给tableview cell添加动画

来源：互联网发布：寻根文学知乎编辑：程序博客网时间：2024/05/16 07:14

声明：

1、这篇文章转载于破船之家的博客，原文网址为：http://beyondvincent.com/2014/01/13/2014-01-13-animation-tableview-cell/

2、本文由破船翻译于13年1月，所以有可能某些技术已经更新，如有疑问，请查证。但是我认为本文还是很有参考价值的。

3、这篇文章虽为转载，但是内容上可能基于我的理解有所修改，如有疑问，请参考原文。

本文介绍如何给tableview cell添加动画，其实只需要很少的代码量就可以。本文参考Animating UITableView cells

该例完整代码工程下载地址：BVTableViewAnimation，最终的效果是当cell显示出来的时候，是在Y和Z轴上进行3D旋转。

下面来看看是如何实现的：

我们只需要实现UITableViewDelegate中的tableView:WillDisplayCell:ForRowAtIndexPath:即可。当cell显示之前，会先调用该方法，因此给cell添加动画，在这个方法里面即可。

如下代码所示：

-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{
    // 1. 配置CATransform3D的内容
    CATransform3D transform;
    transform = CATransform3DMakeRotation( (90.0*M_PI)/180, 0.0, 0.7, 0.4);
    transform.m34 = 1.0/ -600;
    
    // 2. 定义cell的初始状态
    cell.layer.shadowColor = [[UIColor blackColor]CGColor];
    cell.layer.shadowOffset = CGSizeMake(10, 10);
    cell.alpha = 0;
    
    cell.layer.transform = transform;
    cell.layer.anchorPoint = CGPointMake(0, 0.5);
    
    // 3. 定义cell的最终状态，并提交动画
    [UIView beginAnimations:@"transform" context:NULL];
    [UIView setAnimationDuration:0.5];
    cell.layer.transform = CATransform3DIdentity;
    cell.alpha = 1;
    cell.layer.shadowOffset = CGSizeMake(0, 0);
    cell.frame = CGRectMake(0, cell.frame.origin.y, cell.frame.size.width, cell.frame.size.height);
    [UIView commitAnimations];
}

第一步：使用CATransform3D在Y和Z轴上做旋转设置。

第二步：定义cell的初始状态，添加了一些阴影，并将第一步中的transform设置给cell中layer的transform matrix。然后将anchor设置为0.0, 0.5，也就是说让cell围绕着左边进行旋转。

第三步：通过动画，将cell设置为原始状态。此处利用了UIView的beginAnimations:context方法来更新cell中layer的值。当然还有别的方法来执行动画，不过这种方法比较简单，我们可以设置持续时间。代码里面将transform设置为CATransform3DIdentity。

这样通过第二步和第三步的状态就能够引导动画，以此完成最终效果。

下面是网上看到的两个内容，可以参考：

From RW：Table View Animations Tutorial: Drop-In Cards@bluesea哈哈哈推荐本链接

Library Allowing You To Create Table Views With Wacky Highly Detailed Ripple Cell Animations

Drop-In Open Source Library For Creating Wacky Animated UITableViews

0 0