UICollectionViewCell.gif

今天學(xué)習(xí)了一種加載UICollectionViewCell的動(dòng)畫效果,具體如圖,代碼也在下面:

這個(gè)效果是cell由小變大

//其實(shí)就是在這個(gè)方法里為cell添加了一個(gè)動(dòng)畫效果
- (void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath{

    CATransform3D transform = CATransform3DIdentity;
    transform = CATransform3DRotate(transform, 0, 0, 0, 1);//漸變
    transform = CATransform3DTranslate(transform, 0, -100, 0);//左邊水平移動(dòng)
    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;
    }];
}

這個(gè)效果是cell從左邊水平移動(dòng)進(jìn)入

- (void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath{

    CATransform3D transform = CATransform3DIdentity;
    transform = CATransform3DRotate(transform, 0, 0, 0, 1);//漸變u
    transform = CATransform3DTranslate(transform,-200, 0, 0);//左邊水平移動(dòng)
    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;
    }];
}

還有一種動(dòng)畫效果

2.gif

//動(dòng)畫代碼如下
-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{

    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];
}

最后一種 先看下效果

3.gif

這個(gè)實(shí)際上是對(duì)label設(shè)置的一個(gè)動(dòng)畫,不是針對(duì)于cell的,具體如下
在自定義的cell實(shí)現(xiàn)文件中

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    if (self == [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        self.titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(140, self.center.y - 15, 150, 50)];
        [self addSubview:self.titleLabel];
    }
    return self;
}
- (void)show{
   [UIView animateWithDuration:1 animations:^{
       self.titleLabel.x = 30;
   }];
}
- (void)hide{
    [UIView animateWithDuration:1 animations:^{
        self.titleLabel.x = 414;
    }];
}

在控制器中的代碼

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{
    AnimationCell *animationCell = (AnimationCell *)cell;
    [animationCell show];
}

- (void)tableView:(UITableView *)tableView didEndDisplayingCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{
    AnimationCell *animationCell = (AnimationCell *)cell;
    [animationCell hide];
}