UICollectionView 簡介
? ? UICollectionVew 與 UITableView 有很多相似之處。在傳說中，蘋果為 collectionView 做了優化，使其界面流暢度更好（反正在下沒有感覺出來）。與 tableView 相比，collectionView 多了一個橫向滑動，而且動畫的添加也更靈活。現在我來教大家用 UICollectionView 來實現一些簡單的動畫。
最終實現效果圖:
實現原理:
大家先不要怕原理圖復雜，只要你看明白 “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;
}
