炫酷简单易实现的UITableViewCell&UICollectionViewCell动画

一成不变的基本UITableView Cell & UICollectionView Cell 滚动方式是不是已经看得不耐烦了，看的有视觉疲劳了呢？今天就让我来给大家带来一种最最简单的动画来让你们的UITableView Cell & UICollectionView Cell 看起来有点不一样吧！

首先，我们来看看UITableView

在UITableView Delegate<代理方法中有这样的一个方法>

1.jpeg

我们只需要在此方法中对即将要显示的cell做动画即可：

1.先来解释下 indexPathsForVisibleRows 代表的什么意思
返回屏幕中可见cell的数组

 @property(nonatomic, readonly) NSArray  *indexPathsForVisibleRows

2.再来简单理解下 anchorPoint

从一个例子开始入手吧，想象一下，把一张A4白纸用图钉订在书桌上，如果订得不是很紧的话，白纸就可以沿顺时针或逆时针方向围绕图钉旋转，这时候图钉就起着支点的作用。我们要解释的anchorPoint就相当于白纸上的图钉，它主要的作用就是用来作为变换的支点，旋转就是一种变换，类似的还有平移、缩放。

继续扩展，很明显，白纸的旋转形态随图钉的位置不同而不同，图钉订在白纸的正中间与左上角时分别造就了两种旋转形态，这是由图钉（anchorPoint）的位置决定的。如何衡量图钉（anchorPoint）在白纸中的位置呢？在iOS中，anchorPoint点的值是用一种相对bounds的比例值来确定的，在白纸的左上角、右下角，anchorPoint分为为(0,0), (1, 1)，也就是说anchorPoint是在单元坐标空间(同时也是左手坐标系)中定义的。类似地，可以得出在白纸的中心点、左下角和右上角的anchorPoint为(0.5,0.5), (0,1), (1,0)。

然后再来看下面两张图，注意图中分iOS与MacOS，因为两者的坐标系不相同，iOS使用左手坐标系，坐标原点在左上角，MacOS使用右手坐标系，原点在左下角，我们看iOS部分即可。

1.png

2.jpeg

像UIView有superView与subView的概念一样，CALayer也有superLayer与layer的概念，前面说到的白纸和图中的矩形可以理解为layer，书桌和图中矩形以外的坐标系可以理解成superLayer。如果各自以左上角为原点，则在图中有相对的两个坐标空间。

3.最后简单理解下position

position是layer中的anchorPoint点在superLayer中的位置坐标。因此可以说, position点是相对suerLayer的，anchorPoint点是相对layer的，两者是相对不同的坐标空间的一个重合点。
再来看看position的原始定义： The layer’s position in its superlayer’s coordinate space。 中文可以理解成为position是layer相对superLayer坐标空间的位置，很显然，这里的位置是根据anchorPoint来确定的.

代码SHOW

-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSArray *array =  tableView.indexPathsForVisibleRows;
    NSIndexPath *firstIndexPath = array[0];
    
    
    //设置anchorPoint
    cell.layer.anchorPoint = CGPointMake(0, 0.5);
    //为了防止cell视图移动，重新把cell放回原来的位置
    cell.layer.position = CGPointMake(0, cell.layer.position.y);
    
    
    //设置cell 按照z轴旋转90度，注意是弧度
    if (firstIndexPath.row < indexPath.row) {
        cell.layer.transform = CATransform3DMakeRotation(M_PI_2, 0, 0, 1.0);
    }else{
        cell.layer.transform = CATransform3DMakeRotation(- M_PI_2, 0, 0, 1.0);
    }
    
    
    cell.alpha = 0.5;
    
    
    [UIView animateWithDuration:1 animations:^{
        cell.layer.transform = CATransform3DIdentity;
        cell.alpha = 1.0;
    }];

}

效果图如下：

8.01.gif

我们再来看看UICollectionView

既然我们的UITableView有这样神奇的代理方法，那么不用说，我们神奇的UICollectionView也一样有这样的方法，那么下面就让我们再一次见证神奇吧！

2.jpeg

废话不多说

代码SHOW

这里只有一点需要补充
SCREEN_W = ([UIScreen mainScreen].bounds.size.width)

-(void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath
{
    if (indexPath.row % 2 != 0) {
        cell.transform = CGAffineTransformTranslate(cell.transform, SCREEN_W/2, 0);
    }else{
        cell.transform = CGAffineTransformTranslate(cell.transform, -SCREEN_W/2, 0);
    }
    cell.alpha = 0.5;
    
    [UIView animateWithDuration:0.7 animations:^{
        cell.transform = CGAffineTransformIdentity;
        cell.alpha = 1.0;
    } completion:^(BOOL finished) {
        
        
    }];
}

效果图如下

8.02.gif