总结和收录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链接

持续更新中