CoreAnimation | 核心动画 | 粒子动画 | 点赞

• 效果展示

点赞按钮变大和缩小以及附带爆炸效果

• 效果分析

1. 图片变了
2. 大小变了
3. 爆炸效果(CAEmitterLayer)

• 属性创建

@property (weak, nonatomic) IBOutlet UIButton *likeBtn;
@property (nonatomic, strong) CAEmitterLayer *emitterLayer;

• 粒子动画初始化以及属性之间的配置

- (void)explosion{
    _emitterLayer = [CAEmitterLayer layer];
    CAEmitterCell *cell = [[CAEmitterCell alloc] init];
    cell.name = @"explosionCell";
    cell.lifetime = .7;
    cell.birthRate = 4000;
    cell.velocity = 50;
    cell.velocityRange = 15;
    cell.scale = .03;
    cell.scaleRange = .02;
    cell.contents = (id)[UIImage imageNamed:@"sparkle"].CGImage;
    
    _emitterLayer.name = @"explosionLayer";
    _emitterLayer.emitterShape = kCAEmitterLayerCircle;
    _emitterLayer.emitterMode = kCAEmitterLayerOutline;
    _emitterLayer.emitterSize = CGSizeMake(25, 0);
    _emitterLayer.emitterCells = @[cell];
    _emitterLayer.renderMode = kCAEmitterLayerOldestFirst;
    _emitterLayer.masksToBounds = NO;
    _emitterLayer.birthRate = 0;
    _emitterLayer.zPosition = 0;
    _emitterLayer.position = CGPointMake(CGRectGetWidth(_likeBtn.bounds)/2, CGRectGetHeight(_likeBtn.bounds)/2);
    
    [_likeBtn.layer addSublayer:_emitterLayer];
}

• 说明

1. CAEmitterLayer 相当于烟花筒，容器
2. CAEmitterCell 相当于烟花，我们看到的效果

• 关键帧动画

- (IBAction)clickAction:(UIButton *)sender {
    sender.selected = !sender.selected;
    //关键帧动画
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
    if (sender.selected) {
        anim.values = @[@1.5, @.8, @1, @1.2, @1];
        anim.duration = .6;
        [self addExplosionAnim];
    }else{
        anim.values = @[@.8, @1.0];
        anim.duration = .4;
    }
    [_likeBtn.layer addAnimation:anim forKey:nil];
}

- (void)addExplosionAnim{
    _emitterLayer.beginTime = CACurrentMediaTime();
    _emitterLayer.birthRate = 1;
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(.15 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        _emitterLayer.birthRate = 0;
    });
}

• 特别说明

如果想要动画做完消失的话就需要把birthRate设置为0