概述
UICollectionView真的好强大，今天我们来研究一下这种很常见的卡片动画效果是如何实现了。本篇不能太深入地讲解，因为笔者也是刚刚摸索出点眉目，但是并没有深刻地理解。如果在讲解过程中，出现不对的地方，请及时反馈。
效果图
重写API
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// 我们必须重写此方法，指定布局大小
// 每次layout invalidated或者重新query布局信息时，会调用
- (void)prepareLayout;
// 用于决定布局信息
// 我们必须重写它来实现布局信息
- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;
// 重写它来布局信息
- (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;
|
还有一个非常关键的API，必须重写：
|
1
2
3
4
5
|
// return YES to cause the collection view to requery the layout for geometry information
// 当重新查询布局信息时，就会调用此API。要设置为YES，才能实现自定义布局。
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds;
|
自定义布局
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
//
// HYBCardFlowLayout.m
// CollectionViewDemos
//
// Created by huangyibiao on 16/3/26.
// Copyright © 2016年 huangyibiao. All rights reserved.
//
#import "HYBCardFlowLayout.h"
@interface HYBCardFlowLayout ()
@property (nonatomic, strong) NSIndexPath *mainIndexPath;
@property (nonatomic, strong) NSIndexPath *willMoveToMainIndexPath;
@end
@implementation HYBCardFlowLayout
- (void)prepareLayout {
CGFloat inset = 32;
self.itemSize = CGSizeMake(self.collectionView.frame.size.width - 2 * inset,
self.collectionView.frame.size.height * 3 / 4);
self.sectionInset = UIEdgeInsetsMake(0, inset, 0, inset);
self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
[super prepareLayout];
}
#pragma mark - Override
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
return YES;
}
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewLayoutAttributes *attribute = [super layoutAttributesForItemAtIndexPath:indexPath];
[self setTransformForLayoutAttributes:attribute];
return attribute;
}
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
NSArray *attributesSuper = [super layoutAttributesForElementsInRect:rect];
// 一定要深复制一份，不能修改父类的属性，不然会有很多error打印出来
NSArray *attributes = [[NSArray alloc] initWithArray:attributesSuper copyItems:YES];
NSArray *visibleIndexPaths = [self.collectionView indexPathsForVisibleItems];
if (visibleIndexPaths.count <= 0) {
return attributes;
} else if (visibleIndexPaths.count == 1) {
self.mainIndexPath = [visibleIndexPaths firstObject];
self.willMoveToMainIndexPath = nil;
} else if (visibleIndexPaths.count == 2) {
NSIndexPath *indexPath = [visibleIndexPaths firstObject];
// 说明是往左滚动
if (indexPath == self.mainIndexPath) {
// 记录将要移进来的位置
self.willMoveToMainIndexPath = visibleIndexPaths[1];
} else {// 往右滚动
self.willMoveToMainIndexPath = visibleIndexPaths[0];
// 更新下一个成为main
self.mainIndexPath = visibleIndexPaths[1];
}
}
for (UICollectionViewLayoutAttributes *attribute in attributes) {
[self setTransformForLayoutAttributes:attribute];
}
return attributes;
}
- (void)setTransformForLayoutAttributes:(UICollectionViewLayoutAttributes *)attribute {
UICollectionViewCell *cell = [self.collectionView cellForItemAtIndexPath:attribute.indexPath];
if (self.mainIndexPath && attribute.indexPath.section == self.mainIndexPath.section) {
attribute.transform3D = [self tranformForView:cell];
} else if (self.willMoveToMainIndexPath && attribute.indexPath.section == self.willMoveToMainIndexPath.section) {
attribute.transform3D = [self tranformForView:cell];
}
}
- (CATransform3D)tranformForView:(UICollectionViewCell *)view {
// cell的起始偏移
CGFloat w = self.collectionView.frame.size.width;
CGFloat offset = [self.collectionView indexPathForCell:view].section * w;
// 当前偏移
CGFloat currentOffset = self.collectionView.contentOffset.x;
// 计算偏移angle
CGFloat angle = (currentOffset - offset) / w;
CATransform3D t = CATransform3DIdentity;
t.m34 = 1.0 / -500;
if (currentOffset - offset >= 0) {
t = CATransform3DRotate(t, angle, 1, 1, 0);
} else {
t = CATransform3DRotate(t, angle, -1, 1, 0);
}
return t;
}
@end
|
这里主要是要处理旋转。然后要处理切换cell的attribute设置。mainIndexPath属性用于记录当前显示的cell的位置。willMoveToMainIndexPath记录将要出现的cell的位置。
结尾
这里在慢慢切换时，效果是挺好的，但是如果快速切换卡片，你会发现会有一点点不好之处，就是下一个cell突然出现的。