TableviewCell的动画效果

总结和收录TableViewCell动画效果

1.cell旋转出现效果

1.1.gif

核心代码

CGFloat value = (90.0 * M_PI) / 180.0;
    CATransform3D rotate = CATransform3DMakeRotation(value, 0.0, 0.7, 0.4);
    rotate.m34 = 1.0 / -600;
    cell.layer.shadowColor = [UIColor blackColor].CGColor;
    cell.layer.shadowOffset = CGSizeMake(10, 10);
    cell.alpha = 0;
    cell.layer.transform = rotate;
    cell.layer.anchorPoint = CGPointMake(0, 0.5);
    
    if(cell.layer.position.x != 0){
        cell.layer.position = CGPointMake(0, cell.layer.position.y);
    }
    [UIView beginAnimations:@"rotate" context:nil];
    [UIView setAnimationDuration:AnimationDuration];
    cell.layer.transform = CATransform3DIdentity;
    cell.alpha = 1;
    cell.layer.shadowOffset = CGSizeMake(0, 0);
    [UIView commitAnimations];

主要是在cell将要display的协议中,对cell进行操作,更改cellLayer层的一些属性,然后制作成动画效果.主要是针对transform这个属性,你可以改变里面的x,y,z的值去实现一些细微的改变,去实现更好的效果

2.cell逐渐出现的效果

2.1.gif

核心代码

 NSInteger baseRows = ceilf(CGRectGetHeight(self.bounds) / self.rowHeight) - 1;
    
    CGFloat delay = row <= baseRows ? 0.05f * row : 0.01f;
    
    switch (direction) {
        case directionRight: {
            cell.layer.transform = CATransform3DMakeRotation(90.0f, 0, 1, 0);
            cell.layer.anchorPoint = CGPointMake(1, 0.5);
        }
            break;
        case directionLeft: {
            cell.layer.transform = CATransform3DMakeRotation(-90.0f, 0, 1, 0);
            cell.layer.anchorPoint = CGPointMake(0.0, 0.5);
        }
    }
    cell.alpha = 0;
    

    [UIView animateWithDuration:AnimationDuration
                          delay:delay
                        options:UIViewAnimationOptionAllowUserInteraction
                     animations:^{
                         //clear the transform
                         cell.layer.transform = CATransform3DIdentity;
                          cell.alpha = 1;
                     } completion:nil];
    _currentMaxDisplayedCell = row;

这个一样是操作的transform属性,可以控制是从左还是从右出现.

3.cell从中间由小变大的出现,可以控制scale的比例大小

3.1.gif

核心代码:

- (void)appearCell:(UITableViewCell *)cell andScale:(CGFloat)scale
{
    CATransform3D rotate = CATransform3DMakeScale( 0.0, scale, scale);
    cell.layer.shadowColor = [UIColor blackColor].CGColor;
    cell.layer.shadowOffset = CGSizeMake(10, 10);
    cell.alpha = 0;
    cell.layer.transform = rotate;
    [UIView beginAnimations:@"scale" context:nil];
    [UIView setAnimationDuration:AnimationDuration];
    cell.layer.transform = CATransform3DIdentity;
    cell.alpha = 1;
    cell.layer.shadowOffset = CGSizeMake(0, 0);
    [UIView commitAnimations];
}

4.cell旋转出现

4.1.gif

核心代码:

- (void)appearCell:(UITableViewCell *)cell andDirection:(Duration)direction
{

    
    switch (direction) {
        case directionRight: {
            cell.layer.transform = CATransform3DMakeRotation(90.0f, 0, 1, 0);
        }
            break;
        case directionLeft: {
            cell.layer.transform = CATransform3DMakeRotation(-90.0f, 0, 1, 0);
        }
    }
    cell.alpha = 0;
    
    
    [UIView animateWithDuration:AnimationDuration
                          delay:0.05
                        options:UIViewAnimationOptionAllowUserInteraction
                     animations:^{
                         //clear the transform
                         cell.layer.transform = CATransform3DIdentity;
                         cell.alpha = 1;
                     } completion:nil];
}

如果对你有帮助,请关注,喜欢,star一下.
demo链接


持续更新中


推荐阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 7,478评论 6 28
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 4,377评论 5 13
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 8,914评论 4 48
  • 二月的南方 气温刚刚好 我的心是澎湃昂扬的 远方的孩子啊 感受到了吗 西伯利亚的寒流退去了 从南洋越过了马来西亚 ...
    逗霸君阅读 284评论 1 10
  • 大家好,我是刘向阳,今天我要推荐的书是姜戎的《狼图腾》。这本书讲述了陈阵等一批大学生与草原之间的故事,它是世界上唯...
    简约语文阅读 302评论 0 1