[UITableView] UITableViewCell渲染动画效果

UITableView是iOS APP开发过程中最常使用的一个组件了，给UITableViewCell的加载添加一些动画可以让界面的用户体验更好，下面就介绍几种常用的加载动画。

---

以下动画只要在tableview的以下代理方法调用相应动画方法即可。

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{
    //[self leftInsertAnimation:cell];
    //[self springAnimation_1:cell];
    //[self springAnimation_2:cell];
    //[self left3DAnimation:cell];
    [self flyInAnimation:cell];
}

1、左侧插入动画

-(void) leftInsertAnimation:(UITableViewCell*)cell{
    CGPoint center = cell.center;
    CGPoint orgCenter = center;
    center.x += cell.bounds.size.width;
    cell.center = center;

    [UIView animateWithDuration:0.5 animations:^{
        cell.center = orgCenter;
    }];
}

2、弹簧效果

-(void) springAnimation_1:(UITableViewCell*)cell{
    CGPoint center = cell.center;
    CGPoint orgCenter = center;
    center.y += cell.bounds.size.height;
    cell.center = center;
    
    [UIView animateWithDuration:0.5 animations:^{
        cell.center = orgCenter;
    }];
}

3、折叠展开效果

-(void) springAnimation_2:(UITableViewCell*)cell{
    
    cell.transform = CGAffineTransformMakeTranslation(0, -80);
    
    [UIView animateWithDuration:0.5 animations:^{
        cell.transform = CGAffineTransformIdentity;
    }];
}

4、左侧3D变幻效果

-(void) left3DAnimation:(UITableViewCell*) cell{
    CATransform3D rotation;
    rotation = CATransform3DMakeRotation( (90.0*M_PI)/180, 0.0, 0.7, 0.4);
    rotation.m34 = 1.0/ -600;
    
    cell.layer.shadowColor = [[UIColor blackColor]CGColor];
    cell.layer.shadowOffset = CGSizeMake(10, 10);
    cell.alpha = 0;
    cell.layer.transform = rotation;
    cell.layer.anchorPoint = CGPointMake(0, 0.5);
    
    [UIView beginAnimations:@"rotation" context:NULL];
    [UIView setAnimationDuration:0.8];
    
    cell.layer.transform = CATransform3DIdentity;
    cell.alpha = 1;
    cell.layer.shadowOffset = CGSizeMake(0, 0);
        
    [UIView commitAnimations];
}

5、底部飞入效果

-(void) flyInAnimation:(UITableViewCell*) cell{

    cell.layer.transform = CATransform3DMakeScale(0.1, 0.1, 1);
    //x和y的最终值为1
    [UIView animateWithDuration:1 animations:^{
        cell.layer.transform = CATransform3DMakeScale(1, 1, 1);
    }];
}

以上的动画在上拉和下拉时都有效，要是想只在上滑或者下滑时有效，需要配合scrollView代理方法进行使用:例如飞入效果，可以使用一个全局变量去设置，cell.layer.transform的值。

-(void) scrollViewDidScroll:(UIScrollView *)scrollView{
    if (scrollView.contentOffset.y < oldOffset) {//向上滚动
        self.transform3D = CATransform3DMakeScale(1, 1, 1);
    }else if(scrollView.contentOffset.y > oldOffset){//向下
        self.transform3D = CATransform3DMakeScale(0.1, 0.1, 1);
    }
    oldOffset = scrollView.contentOffset.y;
}

注

动画效果可以自定义