iOS TableView给力动画的简单实现

前言

之前看见过很多动画, 都非常炫酷, 所以想弄一些比较简单的动画, 以后再项目中可能会用到, 以后还会持续更新类似的动画效果！

GitHub下载地址: LRTableViewRollAnimation

原文地址:http://www.cocoachina.com/ios/20160725/17172.html

效果图:

代码实现

首先我们要在cell中实现一个方法:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

+ (instancetype)cellFromXib:(UITableView *)tableView cellAnchorPoint:(CGPoint)cellAnchorPoint angle:(CGFloat)angle; {      LRAnimationCell *cell = [tableView dequeueReusableCellWithIdentifier:LRCellId];      if  (!cell) {          cell = [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass(self) owner:nil options:nil] lastObject];      }      //动画设置      CATransform3D transform = CATransform3DMakeRotation(angle, 0.0, 0.5, 0.3);      transform.m34 = -1.0/500.0;  // 设置透视效果      cell.layer.transform = transform;      //锚点      cell.layer.anchorPoint = cellAnchorPoint;      [UIView animateWithDuration:0.6 animations:^{          cell.layer.transform = CATransform3DIdentity;      }];      return  cell; }

我们来简单解释下transform.m34 = -1.0/500.0;属性的设置

在CATransform3D中

1 2 3 4 5 6 7 8 9 10

// m34:实现透视效果(意思就是:近大远小), 它的值默认是0, 这个值越小越明显 /* Homogeneous three-dimensional transforms. */   struct CATransform3D       {       CGFloat m11, m12, m13, m14;       CGFloat m21, m22, m23, m24;       CGFloat m31, m32, m33, m34;       CGFloat m41, m42, m43, m44;       };       typedef struct CATransform3D CATransform3D;

我们要在ViewController中添加几个属性:

1 2 3 4 5

@property (nonatomic, assign) CGFloat lastScrollOffset; /**设置cell角度 */ @property (nonatomic, assign) CGFloat angle; /**设置cell锚点 */ @property (nonatomic, assign) CGPoint cellAnchorPoint;

在TableView的代理中实现+ (instancetype)cellFromXib:(UITableView *)tableView cellAnchorPoint:(CGPoint)cellAnchorPoint angle:(CGFloat)angle;方法:

1 2 3 4 5 6

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {      LRAnimationCell *cell = [LRAnimationCell cellFromXib:tableView cellAnchorPoint:_cellAnchorPoint angle:_angle];      cell.backgroundImage.image = LRGetImage(indexPath.row + 1);   return  cell; }

最后实现代理方法, 这个方法主要就是监听TableView往上拖动还是往下拖动,目的就是实现动画的协调性,看着更和谐一些!

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

//滚动监听 - (void)scrollViewDidScroll:(UIScrollView *)scrollView {      if  (scrollView != self.tableView)  return ;      CGFloat y = scrollView.contentOffset.y;      if  (y > _lastScrollOffset) { //用户往上拖动          // x=0 y=0 左          // x=1 y=0 -angle 右          _angle = - kAngle;          _cellAnchorPoint = CGPointMake(1, 0);      }  else  { //用户往下拖动          // x=0 y=1 -angle 左          // x=1 y=1 右          _angle =  - kAngle;          _cellAnchorPoint = CGPointMake(0, 1);      }      //存储最后的y值      _lastScrollOffset = y; }

动画的方向需要根据自己喜好去设置:

1 2 3 4 5 6 7 8 9 10

x,y值为:  _cellAnchorPoint = CGPointMake(x, y);   -angle值为:  _angle =  - kAngle; //用户往下拖动时候动画出现的初始位置:   左边位置:  x=0 y=1 -angle   右边位置: x=1 y=1 //用户往上拖动时候动画出现的初始位置:    左边位置: x=0 y=0    右边位置: x=1 y=0 -angle //在中心点翻转设置:    x=0.5 y=0.5

以上都是效果图1的效果, 再来看看效果图2和3:

下面的代码实现是独立的, 跟效果图1完全是分开实现的, 大家可以拿出去单独使用!

1 2 3 4 5 6 7 8 9 10 11 12 13

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {          CATransform3D transform = CATransform3DIdentity;          transform = CATransform3DRotate(transform, 0, 0, 0, 1); //渐变          transform = CATransform3DTranslate(transform, -200, 0, 0); //左边水平移动 //        transform = CATransform3DScale(transform, 0, 0, 0);//由小变大          cell.layer.transform = transform;          cell.layer.opacity = 0.0;          [UIView animateWithDuration:0.6 animations:^{              cell.layer.transform = CATransform3DIdentity;              cell.layer.opacity = 1;          }]; }