CollectionView动画

20150717102107315.jpg

废话不说，先上效果图，如果觉得效果不错的话，可以继续往下看。

DynamicCell.gif

这是我在cocoaChina上看到的，不过那位仁兄用的xib完成的，但我发现如果用纯代码写的话，按照他的的那个思路并不能实现这个效果。

整个视图用的是collectionView的（当然你也可以用UITableView来写）下面的代码只是简单的创建UICollectionView。

UICollectionViewFlowLayout*flowLayout = [UICollectionViewFlowLayoutnew];

[flowLayoutsetScrollDirection:UICollectionViewScrollDirectionVertical];

self.collectionView= [[UICollectionViewalloc]initWithFrame:CGRectMake(0,64,self.view.width,self.view.height)collectionViewLayout:flowLayout];

self.collectionView.contentInset=UIEdgeInsetsMake(0,0,60,0);

self.collectionView.delegate=self;

self.collectionView.dataSource=self;

self.collectionView.backgroundColor= [UIColorcolorWithRed:0.369green:0.357blue:0.604alpha:1.000];

[self.collectionViewregisterClass:[CustomCollectionCellclass]forCellWithReuseIdentifier:@"CollectionViewCell"];

[self.viewaddSubview:self.collectionView];

[self.collectionViewselectItemAtIndexPath:[NSIndexPathindexPathForItem:0inSection:0]animated:YESscrollPosition:UICollectionViewScrollPositionBottom];

self.automaticallyAdjustsScrollViewInsets=NO;

紧接着需要实现collectionView的代理方法

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
                  cellForItemAtIndexPath:(NSIndexPath *)indexPath
#pragma mark - UICollectionViewDelegateFlowLayout
- (CGSize)collectionView:(UICollectionView *)collectionView
                  layout:(UICollectionViewLayout *)collectionViewLayout
  sizeForItemAtIndexPath:(NSIndexPath *)indexPath 

其实这个动态效果就只是一个frame的变化，在生成cell的时候让它的frame为

- (void)prepareVisibleCellsForAnimationWithRow:(NSInteger )row
                                       andCell:(CustomCollectionCell *)cell{

    cell.frame = CGRectMake(-CGRectGetWidth(cell.bounds),
                            cell.frame.origin.y,
                            CGRectGetWidth(cell.bounds),
                            CGRectGetHeight(cell.bounds));
    cell.alpha = 0.f;
}

这样只是让它整个的cell在屏幕的左边，之后可以用一个animation改变frame，成一个动态的效果。

- (void)animateVisibleCell:(CustomCollectionCell *)cell withRow:(NSInteger)row {

    cell.alpha = 1.f;
    [UIView animateWithDuration:0.25 delay:0.2 *row usingSpringWithDamping:0.8
          initialSpringVelocity:1.0 options:0 animations:^{
        cell.frame = CGRectMake(0.f, cell.frame.origin.y,
                                CGRectGetWidth(cell.bounds),
                                CGRectGetHeight(cell.bounds));
    } completion:^(BOOL finished) {
        
    }];
}

这两个方法在生成cell的地方调用即可，至于那个cell你也可以自定义一个。

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
                  cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    CustomCollectionCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"CollectionViewCell" forIndexPath:indexPath];
    NSDictionary *dictionary = self.dataArray[indexPath.row];
    cell.model = dictionary;
    if (collectionView.contentSize.height - kScreen_Height > collectionView.contentOffset.y ||
        collectionView.contentOffset.y < 0) {
        if (collectionView.contentOffset.y == 0) {
            [self prepareVisibleCellsForAnimationWithRow:indexPath.row andCell:cell];
            [self animateVisibleCell:cell withRow:indexPath.row];
        }else {
            [self prepareVisibleCellsForAnimationWithRow:1 andCell:cell];
            [self animateVisibleCell:cell withRow:1];
        }
    }
    return cell;
}

if 中的判断只是在顶部下拉和在底部上拉的时候不会调用方法，以及在刚生成或刚进入该视图的时候（这时候collectionView.contentOffset.y == 0）屏幕中cell的生成会有一个延迟。
这样就实现上面的那个动态效果。