加班狗
UICollectionView 简介
UICollectionVew 与 UITableView 有很多相似之处。在传说中，苹果为 collectionView 做了优化，使其界面流畅度更好（反正在下没有感觉出来）。与 tableView 相比，collectionView 多了一个横向滑动，而且动画的添加也更灵活。现在我来教大家用 UICollectionView 来实现一些简单的动画。
最终实现效果图:
Rotation3 效果图实现原理:
UICollectionViewFlowLayout 实现动画原理大家先不要怕原理图复杂，只要你看明白 “UICollectionViewFlowLayout 实现动画原理” 图带色的线，再结合后面的代码实现，你就会觉得 UICollectionView 的动画原来也就那样，So So easy 啦。
代码实现:
1. 创建一个 UICollectionViewFlowLayout 的子类 WQLayout
@interface WQLayout : UICollectionViewFlowLayout
@end
2. 创建一个 UIViewController 的子类并为其添加 collectionView 子视图，实现 UICollectionViewDelegate, UICollectionViewDataSource 的返回 Setion 与 返回 NumberInSetion 和返回 Cell 的方法（这个平时写多了，在这里在下就不写了）
WQLayout *layout = [[WQLayout alloc] init];
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
// 设置 Cell 的宽高
layout.itemSize = CGSizeMake(sWidth/2, sWidth/2 * 4/3);
self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 64, sWidth, sHeight/2) collectionViewLayout:layout];
self.collectionView.delegate = self;
self.collectionView.dataSource = self;
[self.view addSubview:self.collectionView];
设置完上以内容，这个类基本上你可以不怎么理它了。因为它的动画实现都在 UICollectionViewFlowLayout 的子类 WQLayout 里。
3. 动画实现
要实现动画，你首先要了解这几个方法：
> - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds; 当你实现这个方法，并返回 YES 时，让每次更改都调 都重新获取 cell 的几何信息
> - (NSArray*)layoutAttributesForElementsInRect:(CGRect)rect; 获得某个范围内的 cell 的 attribute （动画都在这里实现），这里返回一个 cell 的 attribute 数组
> - (void)prepareLayout; 将要发生 layout （这个方法里放的一般用来初始化一些数据）
> - (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity; 这个方法可以是在你滑动过后，手指离开屏幕时，系统就会调用，告诉你它将停止在哪个位置（proposedContentOffset），加速度（velocity）是多少。这里会返回一个停止时的位置
1）首先我们来看一下重写 layoutAttributesForElementsInRect: 这个方法怎么实现动画：
-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect {
/** 获得 rect 里的 cell 的 attribute */
NSArray *attributes = [super layoutAttributesForElementsInRect:rect];
/** collectionView 的相对于 contentOffset 的最左边的中心点的距离 */
CGFloat cCenter = self.collectionView.contentOffset.x + self.collectionView.width/2.0 :
/** collectionView 的宽 */
self.cSize = self.collectionView.width;
for (UICollectionViewLayoutAttributes *attribute in attributes) {
/** cell 相对于 contentOffset 最左边的中心点的距离 */
self.aCenter = attribute.center.x;
/** 3D 旋转 */
CATransform3D tran3D = CATransform3DIdentity;
tran3D.m34 = -0.002;
attribute.transform3D = CATransform3DRotate(tran3D, M_PI/2 * rotation, 0, 1, 0);
}
return attributes;
}
2）写完后一运行你会发现，第一个 Cell 和最后一个 Cell 总是不在屏幕的中间。这时，为了更美观，我们可以重写 prepareLayout: ，在这里设置一个 sectionInset
- (void)prepareLayout{
[super prepareLayout];
// 设置内边距,使第一个item居中
CGFloat inset = (self.collectionView.frame.size.width - self.itemSize.width) * 0.5 ;
self.sectionInset = UIEdgeInsetsMake(0, inset, 0, inset);
}
3）写到这里你会发现，当你滑动视图的时候，Cell 不一定有一个在中间。这时候，我们就可以重写最后一个方法了——targetContentOffsetForProposedContentOffset:withScrollingVelocity:
最终停止原理- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity{
CGRect rect;
rect.origin.x = proposedContentOffset.x;
rect.size = self.collectionView.bounds.size;
NSArray *attributes = [super layoutAttributesForElementsInRect:rect];
// 得到离 rect 中心点最近的值
CGFloat min = MAXFLOAT;
for (UICollectionViewLayoutAttributes *attribute in attributes) {
self.aCenter = attribute.center.x;
min = MIN(fabs(min), fabs(self.aCenter - self.cCenter)) == fabs(min) ? min : self.aCenter - self.cCenter;
}
// 调节移动停止后的 Offset
proposedContentOffset.x = proposedContentOffset.x + min;
return proposedContentOffset;
}
网友评论