UICollectionView 簡介
? ? UICollectionVew 與 UITableView 有很多相似之處。在傳說中平委，蘋果為 collectionView 做了優(yōu)化，使其界面流暢度更好（反正在下沒有感覺出來）。與 tableView 相比，collectionView 多了一個橫向滑動糖声，而且動畫的添加也更靈活”現(xiàn)在我來教大家用 UICollectionView 來實現(xiàn)一些簡單的動畫葵陵。
最終實現(xiàn)效果圖:
實現(xiàn)原理:
大家先不要怕原理圖復(fù)雜，只要你看明白 “UICollectionViewFlowLayout 實現(xiàn)動畫原理” 圖帶色的線瞻佛，再結(jié)合后面的代碼實現(xiàn)脱篙，你就會覺得 UICollectionView 的動畫原來也就那樣，So So easy 啦伤柄。
代碼實現(xiàn):
1. 創(chuàng)建一個 UICollectionViewFlowLayout 的子類 WQLayout
@interface WQLayout : UICollectionViewFlowLayout
@end
2. 創(chuàng)建一個 UIViewController 的子類并為其添加 collectionView 子視圖绊困，實現(xiàn) UICollectionViewDelegate, UICollectionViewDataSource 的返回 Setion 與 返回 NumberInSetion 和返回 Cell 的方法（這個平時寫多了，在這里在下就不寫了）
WQLayout *layout = [[WQLayout alloc] init];
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
// 設(shè)置 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];
設(shè)置完上以內(nèi)容适刀，這個類基本上你可以不怎么理它了秤朗。因為它的動畫實現(xiàn)都在 UICollectionViewFlowLayout 的子類 WQLayout 里。
3. 動畫實現(xiàn)
要實現(xiàn)動畫笔喉，你首先要了解這幾個方法：
> - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds; 當(dāng)你實現(xiàn)這個方法取视，并返回 YES 時，讓每次更改都調(diào)?? 都重新獲取 cell 的幾何信息
> - (NSArray*)layoutAttributesForElementsInRect:(CGRect)rect; 獲得某個范圍內(nèi)的 cell 的 attribute （動畫都在這里實現(xiàn)）常挚，這里返回一個 cell 的 attribute 數(shù)組
> - (void)prepareLayout; 將要發(fā)生 layout （這個方法里放的一般用來初始化一些數(shù)據(jù)）
> - (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity; 這個方法可以是在你滑動過后作谭，手指離開屏幕時，系統(tǒng)就會調(diào)用奄毡，告訴你它將停止在哪個位置（proposedContentOffset）折欠，加速度（velocity）是多少。這里會返回一個停止時的位置
1）首先我們來看一下重寫 layoutAttributesForElementsInRect: 這個方法怎么實現(xiàn)動畫：
-(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 旋轉(zhuǎn) */
? ? ? ? CATransform3D tran3D = CATransform3DIdentity;
? ? ? ? tran3D.m34 = -0.002;
? ? ? ? attribute.transform3D = CATransform3DRotate(tran3D, M_PI/2 * rotation, 0, 1, 0);
}
return attributes;
}
2）寫完后一運行你會發(fā)現(xiàn)吼过，第一個 Cell 和最后一個 Cell 總是不在屏幕的中間怨酝。這時，為了更美觀那先，我們可以重寫 prepareLayout: 农猬，在這里設(shè)置一個 sectionInset
- (void)prepareLayout{
[super prepareLayout];
// 設(shè)置內(nèi)邊距,使第一個item居中
CGFloat inset = (self.collectionView.frame.size.width - self.itemSize.width) * 0.5 ;
self.sectionInset = UIEdgeInsetsMake(0, inset, 0, inset);
}
3）寫到這里你會發(fā)現(xiàn)，當(dāng)你滑動視圖的時候售淡，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;
}
// 調(diào)節(jié)移動停止后的 Offset
proposedContentOffset.x = proposedContentOffset.x + min;
return proposedContentOffset;
}
