創(chuàng)建一個(gè) xcode 項(xiàng)目，新建 SLLikeButton 類繼承自 UIButton，在其中編寫動(dòng)畫效果。

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 - 設(shè)置粒子
-(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.發(fā)射源
    self.emitterLayer = [CAEmitterLayer layer];
    [self.layer addSublayer:self.emitterLayer];
    //發(fā)射源尺寸大小
    self.emitterLayer.emitterSize = CGSizeMake(self.bounds.size.width + 40, self.bounds.size.height + 40);
    //emitterShape表示粒子從什么形狀發(fā)射出來,圓形形狀
    self.emitterLayer.emitterShape = kCAEmitterLayerCircle;
    //emitterMode發(fā)射模型,輪廓模式,從形狀的邊界上發(fā)射粒子
    self.emitterLayer.emitterMode = kCAEmitterLayerOutline;
    //renderMode:渲染模式
    self.emitterLayer.renderMode = kCAEmitterLayerOldestFirst;
    //粒子cell 數(shù)組
    self.emitterLayer.emitterCells = @[emitterCell];
}

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


#pragma mark - 選中狀態(tài) 實(shí)現(xiàn)縮放
-(void)setSelected:(BOOL)selected
{
    [super setSelected:selected];
    
    //通過關(guān)鍵幀動(dòng)畫實(shí)現(xiàn)縮放
    CAKeyframeAnimation * animation = [CAKeyframeAnimation animation];
    //設(shè)置動(dòng)畫路徑
    animation.keyPath = @"transform.scale";

    if (selected)
    {
        //從沒有點(diǎn)擊到點(diǎn)擊狀態(tài) 會(huì)有爆炸的動(dòng)畫效果
        animation.values = @[@1.5, @2.0, @0.8, @1.0];
        animation.duration = 0.5;
        //計(jì)算關(guān)鍵幀方式
        animation.calculationMode = kCAAnimationCubic;
        //為圖層添加動(dòng)畫
        [self.layer addAnimation:animation forKey:nil];

        //讓放大動(dòng)畫先執(zhí)行完畢 再執(zhí)行爆炸動(dòng)畫
        [self performSelector:@selector(startAnimation) withObject:nil afterDelay:0.25];
    }
    else
    {
        //從點(diǎn)擊狀態(tài)normal狀態(tài) 無動(dòng)畫效果 如果點(diǎn)贊之后馬上取消 那么也立馬停止動(dòng)畫
        [self stopAnimation];
    }
}


#pragma mark - 開始動(dòng)畫
-(void)startAnimation
{
    //用KVC設(shè)置顆粒個(gè)數(shù)
    [self.emitterLayer setValue:@1000 forKeyPath:@"emitterCells.emitterCell.birthRate"];

    //開始動(dòng)畫
    self.emitterLayer.beginTime = CACurrentMediaTime();

    //延遲停止動(dòng)畫
    [self performSelector:@selector(stopAnimation) withObject:nil afterDelay:0.15];
}


#pragma mark - 動(dòng)畫結(jié)束
-(void)stopAnimation
{
    //用KVC設(shè)置顆粒個(gè)數(shù)
    [self.emitterLayer setValue:@0 forKeyPath:@"emitterCells.emitterCell.birthRate"];

    //移除動(dòng)畫
    [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;
}

運(yùn)行效果如下：

點(diǎn)贊.png