一成不变的基本UITableView Cell & UICollectionView Cell 滚动方式是不是已经看得不耐烦了，看的有视觉疲劳了呢？今天就让我来给大家带来一种最最简单的动画来让你们的UITableView Cell & UICollectionView Cell 看起来有点不一样吧！
首先，我们来看看UITableView
在UITableView Delegate<代理方法中有这样的一个方法>
1.jpeg
我们只需要在此方法中对即将要显示的cell做动画即可：
1.先来解释下 indexPathsForVisibleRows 代表的什么意思
返回屏幕中可见cell的数组
@property(nonatomic, readonly) NSArray <NSIndexPath *> *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
网友评论