android 点赞爆炸,核心动画 - 点赞爆炸效果

创建一个 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