核心动画 - 点赞爆炸效果

创建一个 xcode 项目，新建 SLLikeButton 类继承自 UIButton，在其中编写动画效果。

SLLikeButton.m

#import "SLLikeButton.h"

@interface SLLikeButton ()

@property(nonatomic,strong)CAEmitterLayer * emitterLayer;

@end

@implementation SLLikeButton


-(instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        [self setUpExplosion];
    }
    return self;
}


#pragma mark - 设置粒子
-(void)setUpExplosion
{
    //1.粒子
    CAEmitterCell * emitterCell = [CAEmitterCell emitterCell];
    emitterCell.name = @"emitterCell";
    //透明值变化速度
    emitterCell.alphaSpeed = -1.0f;
    //alphaRange透明值范围
    emitterCell.alphaRange = 0.1f;
    //生命周期
    emitterCell.lifetime = 1.0f;
    //生命周期range
    emitterCell.lifetimeRange = 0.1f;
    //粒子速度
    emitterCell.velocity = 40.0f;
    //粒子速度范围
    emitterCell.velocityRange = 10.0f;
    //缩放比例
    emitterCell.scale = 0.08f;
    //缩放比例range
    emitterCell.scaleRange = 0.02f;
    //粒子图片
    emitterCell.contents = (id)[UIImage imageNamed:@"spark_red"].CGImage;

    //2.发射源
    self.emitterLayer = [CAEmitterLayer layer];
    [self.layer addSublayer:self.emitterLayer];
    //发射源尺寸大小
    self.emitterLayer.emitterSize = CGSizeMake(self.bounds.size.width + 40, self.bounds.size.height + 40);
    //emitterShape表示粒子从什么形状发射出来,圆形形状
    self.emitterLayer.emitterShape = kCAEmitterLayerCircle;
    //emitterMode发射模型,轮廓模式,从形状的边界上发射粒子
    self.emitterLayer.emitterMode = kCAEmitterLayerOutline;
    //renderMode:渲染模式
    self.emitterLayer.renderMode = kCAEmitterLayerOldestFirst;
    //粒子cell 数组
    self.emitterLayer.emitterCells = @[emitterCell];
}

-(void)layoutSubviews
{
    [super layoutSubviews];
    
    //发射源位置
    self.emitterLayer.position = CGPointMake(self.bounds.size.width * 0.5, self.bounds.size.height * 0.5);
}


#pragma mark - 选中状态 实现缩放
-(void)setSelected:(BOOL)selected
{
    [super setSelected:selected];
    
    //通过关键帧动画实现缩放
    CAKeyframeAnimation * animation = [CAKeyframeAnimation animation];
    //设置动画路径
    animation.keyPath = @"transform.scale";

    if (selected)
    {
        //从没有点击到点击状态 会有爆炸的动画效果
        animation.values = @[@1.5, @2.0, @0.8, @1.0];
        animation.duration = 0.5;
        //计算关键帧方式
        animation.calculationMode = kCAAnimationCubic;
        //为图层添加动画
        [self.layer addAnimation:animation forKey:nil];

        //让放大动画先执行完毕 再执行爆炸动画
        [self performSelector:@selector(startAnimation) withObject:nil afterDelay:0.25];
    }
    else
    {
        //从点击状态normal状态 无动画效果 如果点赞之后马上取消 那么也立马停止动画
        [self stopAnimation];
    }
}


#pragma mark - 开始动画
-(void)startAnimation
{
    //用KVC设置颗粒个数
    [self.emitterLayer setValue:@1000 forKeyPath:@"emitterCells.emitterCell.birthRate"];

    //开始动画
    self.emitterLayer.beginTime = CACurrentMediaTime();

    //延迟停止动画
    [self performSelector:@selector(stopAnimation) withObject:nil afterDelay:0.15];
}


#pragma mark - 动画结束
-(void)stopAnimation
{
    //用KVC设置颗粒个数
    [self.emitterLayer setValue:@0 forKeyPath:@"emitterCells.emitterCell.birthRate"];

    //移除动画
    [self.emitterLayer removeAllAnimations];
}

@end

然后在控制器添加自定义的按钮

ViewController.m

#import "ViewController.h"
#import "SLLikeButton.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    SLLikeButton * likeButton = [SLLikeButton buttonWithType:UIButtonTypeCustom];
    likeButton.frame = CGRectMake(200, 150, 30, 130);
    [self.view addSubview:likeButton];
    [likeButton setImage:[UIImage imageNamed:@"dislike"] forState:UIControlStateNormal];
    [likeButton setImage:[UIImage imageNamed:@"like_orange"] forState:UIControlStateSelected];
    [likeButton addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
}

-(void)btnClick:(UIButton *)btn
{
    btn.selected = !btn.selected;
}

运行效果如下：

点赞.png