iOS中,如何在UICollectionView载入时使用动画效

先看一下效果:

QQ20180725-190614.gif

实现一个UICollectionView的每个Cell分别弹出的动画效果.

需要注意:
· 如何获取CollectionView中的每一个cell.
· 如何让每个cell非同时地调用动画.
· 调用动画的方法的时机.

1.假设我们已经写好了动画方法animateCollection.如何在CollectionView加载时调用动画呢.

其实很简单, 如下:

-(void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    [self animateCollection];
}

此外, 如果有其他条件要调用动画怎么办呢?
那么,你可能要问了,,什么时候会调用呢...
比如下面这个例子,,,在reloaddata之后,重新展示新内容,我们也想要有一次加载的过程来提高用户体验.

QQ20180725-191845.gif

在segment改变值的时候调用动画方法,代码如下

- (void)changeMode:(id)sender
{
    //增加layoutIfNeed的目的是让animateCollection在reload完成之后再执行
    [self->_collectionView reloadData];
    [self->_collectionView layoutIfNeeded];
    [self animateCollection];
}

特别注意,在reloadData和动画方法中间一定要加上layoutIfNeeded方法,这样才能确保,collectionView在数据全部重载之后再调用动画方法.

2.再来看看动画怎么实现吧.

直接上代码

-(void)animateCollection{
    NSArray *cells = _collectionView.visibleCells;
    CGFloat collectionHeight = _collectionView.bounds.size.height;
    for (UICollectionViewCell *cell in cells.objectEnumerator) {
        cell.alpha = 1.0f;
        cell.transform = CGAffineTransformMakeTranslation(0, collectionHeight);
        NSUInteger index = [cells indexOfObject:cell];
        [UIView animateWithDuration:0.7f delay:0.05*index usingSpringWithDamping:0.8 initialSpringVelocity:0 options:0 animations:^{
            cell.transform =  CGAffineTransformMakeTranslation(0, 0);
        } completion:nil];
    }
}

具体实现代码已经表述的比较明白,就不赘述了...此外,让cell动态消失的方法也类似