• 效果展示

點(diǎn)贊按鈕變大和縮小以及附帶爆炸效果

• 效果分析

1. 圖片變了
2. 大小變了
3. 爆炸效果(CAEmitterLayer)

• 屬性創(chuàng)建

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

• 粒子動(dòng)畫初始化以及屬性之間的配置

- (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 相當(dāng)于煙花筒，容器
2. CAEmitterCell 相當(dāng)于煙花，我們看到的效果

• 關(guān)鍵幀動(dòng)畫

- (IBAction)clickAction:(UIButton *)sender {
    sender.selected = !sender.selected;
    //關(guān)鍵幀動(dòng)畫
    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;
    });
}

• 特別說明

如果想要?jiǎng)赢嬜鐾晗У脑捑托枰裝irthRate設(shè)置為0