ios 利用粒子动画实现今天头像点赞效果

image.png

CAEmitterLayer 是一个高性能的粒子引擎，被用来创建复杂的粒子动画如：烟雾，火，雨等效果，并且很好地控制了性能。

苹果给出的解释是：

CAEmitterLayer 看上去像是许多 CAEmitterCell 的容器，这些 CAEmitterCell 定义了一个例子效果。你将会为不同的例子效果定义一个或多个 CAEmitterCell 作为模版，同时 CAEmitterLayer 负责基于这些模版实例化一个粒子流。一个 CAEmitterCell 类似于一个 CALayer ：它有一个 contents 属性可以定义为一个 CGImage ，另外还有一些可设置属性控制着表现和行为。

以上解释来源于网络

首先提醒CAEmitterLayer本身没有什么难度，主要在于两点:

属性较多(一会会把属性都列举出来，不知道了随时查阅就是)
调参数比较费时(想要有好的动画效果还得慢慢的去调整各项参数，不过没有难度就是有点费时间)

下面先认识一下CAEmitterLayer的属性

/* The center of the emission shape. Defaults to (0, 0, 0). Animatable. */
发射源位置。注意，是一个空间坐标。并且标记为 Animatable. 也就是说可以用 CoreAnimation 移动发射源位置
@property CGPoint emitterPosition;
@property CGFloat emitterZPosition;

“/* The size of the emission shape. Defaults to (0, 0, 0). Animatable.
 * Depending on the `emitterShape' property some of the values may be
 * ignored. */
发射源大小。注意除了宽和高之外，还有纵向深度。
文档中还提到，这两个属性有时候可能会因为设置了 emitterShape 而被忽略，具体情况实际尝试一下就可以了。
@property CGSize emitterSize;
@property CGFloat emitterDepth;

“/* A string defining the type of emission shape used. Current options are:
 * `point' (the default), `line', `rectangle', `circle', `cuboid' and
 * `sphere'. */
  
CA_EXTERN NSString * const kCAEmitterLayerPoint
    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);
CA_EXTERN NSString * const kCAEmitterLayerLine
    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);
CA_EXTERN NSString * const kCAEmitterLayerRectangle
    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);
CA_EXTERN NSString * const kCAEmitterLayerCuboid
    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);
CA_EXTERN NSString * const kCAEmitterLayerCircle
    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);
CA_EXTERN NSString * const kCAEmitterLayerSphere
    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);

 emitterShape 决定了发射源的形状。
@property(copy) NSString *emitterShape;
 
/* A string defining how particles are created relative to the emission
 * shape. Current options are `points', `outline', `surface' and
 * `volume' (the default). */
 

   
CA_EXTERN NSString * const kCAEmitterLayerPoints
    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);
CA_EXTERN NSString * const kCAEmitterLayerOutline
    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);
CA_EXTERN NSString * const kCAEmitterLayerSurface
    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);
CA_EXTERN NSString * const kCAEmitterLayerVolume
    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);

 emitterMode 决定了发射源的发射模式。
@property(copy) NSString *emitterMode;

平常用的多的比如 emitterShape 的 kCAEmitterLayerLine 和 kCAEmitterLayerPoint。这两个从视觉上还是比较好区分的，这决定了你的粒子是从一个点「喷」出来的，还是从一条线上每个点「喷」下来，前者像焰火，后者像瀑布。显然，下雪的效果更像后者。

emitterMode 的 kCAEmitterLayerOutline 表示向外围扩散，如果你的发射源形状是 circle，那么 kCAEmitterLayerOutline 就会以一个圆的方式向外扩散开。

又比如你想表达一股蒸汽向上喷的效果，就可以设置 emitterShape 为 kCAEmitterLayerLine ， emitterMode 为 kCAEmitterLayerOutline。

CAEmitterCell的属性

其实CAEmitterCell真是的名字叫粒子，下面详细的介绍了CAEmitterCell的属性，只要求大家属性一下，以后用到了可以再来查阅。

@property float birthRate; //每秒生成多少个粒子
 
@property float lifetime; //粒子存活的时间,以秒为单位
@property float lifetimeRange; // 可以为这个粒子存活的时间再指定一个范围。
上面两个属性如果只用了lifetime那么粒子的存活时间就是固定的，比如lifetime=10,那么粒子10s秒后就消失了。
如果使用了lifetimeRange，比如lifetimeRange=5，那么粒子的存活时间就是在5s~15s这个范围内消失。
 
@property CGFloat velocity;//粒子平均初始速度。正数表示竖直向上，负数竖直向下。
@property CGFloat velocityRange; //可以再指定一个范围。
上面两个属性同lifetime和lifetimeRange
 
@property CGFloat xAcceleration;
@property CGFloat yAcceleration;
@property CGFloat zAcceleration; //三者构成了一个空间矢量。决定了每个方向上粒子的加速度。
 
@property CGFloat emissionRange; //以锥形分布开的发射角度。角度用弧度制。粒子均匀分布在这个锥形范围内。
 
@property CGFloat spin;//粒子的平均旋转速度
@property CGFloat spinRange; //可指定一个范围。弧度制。
 
@property(strong) id contents; //cell的内容。通常是一个指针CGImageRef。
 
@property CGColorRef color; //可以把图片「染」成你想要的颜色。

@property(copy) NSString *name; //The name of the cell，用于构建key paths。这也是后面手动控制动画开始和结束的关键。

好，上面简单介绍了一下CAEmitterLayer和CAEmitterCell的一些基本属性，下面来利用粒子动画实现一个类似今日头条点赞效果。

#import <UIKit/UIKit.h>

@interface GXUpvoteButton : UIButton

@end

#import "GXUpvoteButton.h"

@interface GXUpvoteButton()

/**
 展示的layer
 */
@property (strong, nonatomic) CAEmitterLayer *streamerLayer;

/**
 图片数组
 */
@property (nonatomic, strong) NSMutableArray *imagesArr;

/**
 cell的数组
 */
@property (nonatomic, strong) NSMutableArray *CAEmitterCellArr;

/**
 展示多少个赞的label
 */
@property (nonatomic, strong) UILabel *zanLabel;

@end



@implementation GXUpvoteButton

{
    NSTimer *_timer; //定时器
    NSInteger countNum;//赞的个数
}

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

- (instancetype)initWithCoder:(NSCoder *)coder {
    self = [super initWithCoder:coder];
    if (self) {
        [self setup];
    }
    return self;
}

/**
 *  配置WclEmitterButton
 */
- (void)setup {
    //初始化 赞的个数
    countNum = 1;
    
    //展示多少个赞的label
    self.zanLabel = [[UILabel alloc]init];
    [self addSubview:self.zanLabel];
    self.zanLabel.frame = CGRectMake(-50 ,- 100, 200, 40);
    self.zanLabel.hidden = YES;
    
    //添加点击事件
    //点一下
    [self addGestureRecognizer:[[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(pressOnece:)]];
    //长按
    [self addGestureRecognizer:[[UILongPressGestureRecognizer alloc]initWithTarget:self action:@selector(longPress:)]];
    
    [self setImage:[UIImage imageNamed:@"feed_like"] forState:UIControlStateNormal];
    [self setImage:[UIImage imageNamed:@"feed_like_press"] forState:UIControlStateSelected];
    
    //设置暂时的layer
    _streamerLayer               = [CAEmitterLayer layer];
    _streamerLayer.emitterSize   = CGSizeMake(30, 30);
    _streamerLayer.masksToBounds = NO;
    _streamerLayer.renderMode = kCAEmitterLayerAdditive;
    [self.layer addSublayer:_streamerLayer];
}


/**
 点了一下

 @param ges 手势
 */
- (void)pressOnece:(UIGestureRecognizer *)ges
{
    UIButton * sender = (UIButton *)ges.view;
    sender.selected = !sender.selected;
    [self animation];
    [self performSelector:@selector(explode) withObject:nil afterDelay:0.1];
    if (sender.selected == NO) {
        //重置label文字
        countNum = 0;
        [self changeText];
        //清空数组
        [self.imagesArr removeAllObjects];
        [self.CAEmitterCellArr removeAllObjects];
    }
}


/**
 长按

 @param ges 手势
 */
- (void)longPress:(UIGestureRecognizer *)ges
{
    UIButton * sender = (UIButton *)ges.view;
    sender.selected = YES;
    if (ges.state == UIGestureRecognizerStateBegan) {
        [self animation];
    }else if (ges.state == UIGestureRecognizerStateEnded)
    {
        [self explode];
    }
}

/**
 *  开始动画
 */
- (void)animation {
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
    if (self.selected) {
        animation.values = @[@1.5 ,@0.8, @1.0,@1.2,@1.0];
        animation.duration = 0.5;
        [self startAnimate];
    }else
    {
        animation.values = @[@0.8, @1.0];
        animation.duration = 0.4;
    }
    animation.calculationMode = kCAAnimationCubic;
    [self.layer addAnimation:animation forKey:@"transform.scale"];
}

/**
 *  开始喷射
 */
- (void)startAnimate {
    
    for (int i = 1; i < 10; i++)
    {
        //78张图片 随机选9张
        int x = arc4random() % 77 + 1;
        NSString * imageStr = [NSString stringWithFormat:@"emoji_%d",x];
        [self.imagesArr addObject:imageStr];
    }
    
    //设置展示的cell
    for (NSString * imageStr in self.imagesArr) {
        CAEmitterCell * cell = [self emitterCell:[UIImage imageNamed:imageStr] Name:imageStr];
        [self.CAEmitterCellArr addObject:cell];
    }
    _streamerLayer.emitterCells  = self.CAEmitterCellArr;
    
    
    // 开启计时器 设置点赞次数的label
    self.zanLabel.hidden = NO;
    _timer = [NSTimer scheduledTimerWithTimeInterval:0.15 target:self selector:@selector(changeText) userInfo:nil repeats:YES];
    
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
    animation.values = @[@0.8, @1.0];
    animation.duration = 0.4;
    [self.zanLabel.layer addAnimation:animation forKey:@"transform.scale"];
    
    //_streamerLayer开始时间
    _streamerLayer.beginTime = CACurrentMediaTime();
    for (NSString * imgStr in self.imagesArr) {
        NSString * keyPathStr = [NSString stringWithFormat:@"emitterCells.%@.birthRate",imgStr];
        [_streamerLayer setValue:@7 forKeyPath:keyPathStr];
    }
    
}


/**
 *  停止喷射
 */
- (void)explode {
    //让chareLayer每秒喷射的个数为0个
    for (NSString * imgStr in self.imagesArr) {
        NSString * keyPathStr = [NSString stringWithFormat:@"emitterCells.%@.birthRate",imgStr];
        [self.streamerLayer setValue:@0 forKeyPath:keyPathStr];
    }
    _zanLabel.hidden = YES;
    [_timer invalidate];
    _timer = nil;
}



/**
 更改点赞个数label的文字
 */
- (void)changeText
{
    countNum ++;
    self.zanLabel.attributedText = [self getAttributedString:countNum];
    self.zanLabel.textAlignment = NSTextAlignmentCenter;
}


/**
 富文本设置label的图片内容
 
 @param num 当前赞的个数
 @return 要显示的富文本
 */
- (NSMutableAttributedString *)getAttributedString:(NSInteger)num
{
    //先把num 拆成个十百
    NSInteger ge = num % 10;
    NSInteger shi = num % 100 / 10;
    NSInteger bai = num % 1000 / 100;
    
    //大于1000则隐藏
    if (num >= 1000) {
        return nil;
    }
    
    
    NSMutableAttributedString * mutStr = [[NSMutableAttributedString alloc]init];
    
    //创建百位显示的图片
    if (bai != 0) {
        NSTextAttachment *b_attch = [[NSTextAttachment alloc] init];
        b_attch.image = [UIImage imageNamed:[NSString stringWithFormat:@"multi_digg_num_%ld",bai]];
        b_attch.bounds = CGRectMake(0, 0, b_attch.image.size.width, b_attch.image.size.height);
        NSAttributedString *b_string = [NSAttributedString attributedStringWithAttachment:b_attch];
        [mutStr appendAttributedString:b_string];
    }
    
    //创建十位显示的图片
    if (!(shi == 0 && bai == 0)) {
        NSTextAttachment *s_attch = [[NSTextAttachment alloc] init];
        s_attch.image = [UIImage imageNamed:[NSString stringWithFormat:@"multi_digg_num_%ld",shi ]];
        s_attch.bounds = CGRectMake(0, 0, s_attch.image.size.width, s_attch.image.size.height);
        NSAttributedString *s_string = [NSAttributedString attributedStringWithAttachment:s_attch];
        [mutStr appendAttributedString:s_string];
    }
    
    //创建个位显示的图片
    if (ge >= 0) {
        NSTextAttachment *g_attch = [[NSTextAttachment alloc] init];
        g_attch.image = [UIImage imageNamed:[NSString stringWithFormat:@"multi_digg_num_%ld",ge]];
        g_attch.bounds = CGRectMake(0, 0, g_attch.image.size.width, g_attch.image.size.height);
        NSAttributedString *g_string = [NSAttributedString attributedStringWithAttachment:g_attch];
        [mutStr appendAttributedString:g_string];
    }
    
    if (num <= 3) {
        //鼓励
        NSTextAttachment *attch = [[NSTextAttachment alloc] init];
        attch.image = [UIImage imageNamed:@"multi_digg_word_level_1"];
        attch.bounds = CGRectMake(0, 0, attch.image.size.width, attch.image.size.height);
        NSAttributedString *z_string = [NSAttributedString attributedStringWithAttachment:attch];
        [mutStr appendAttributedString:z_string];
    }else if (num <= 6)
    {
        //加油
        NSTextAttachment *attch = [[NSTextAttachment alloc] init];
        attch.image = [UIImage imageNamed:@"multi_digg_word_level_2"];
        attch.bounds = CGRectMake(0, 0, attch.image.size.width, attch.image.size.height);
        NSAttributedString *z_string = [NSAttributedString attributedStringWithAttachment:attch];
        [mutStr appendAttributedString:z_string];
    }else
    {
        //太棒了
        NSTextAttachment *attch = [[NSTextAttachment alloc] init];
        attch.image = [UIImage imageNamed:@"multi_digg_word_level_3"];
        attch.bounds = CGRectMake(0, 0, attch.image.size.width, attch.image.size.height);
        NSAttributedString *z_string = [NSAttributedString attributedStringWithAttachment:attch];
        [mutStr appendAttributedString:z_string];
    }
    
    return mutStr;
    
}



/**
 创建发射的表情cell
 
 @param image 传入随机的图片
 @param name 图片的名字
 @return cell
 */
- (CAEmitterCell *)emitterCell:(UIImage *)image Name:(NSString *)name
{
    CAEmitterCell * smoke = [CAEmitterCell emitterCell];
    smoke.birthRate = 0;//每秒出现多少个粒子
    smoke.lifetime = 2;// 粒子的存活时间
    smoke.lifetimeRange = 2;
    smoke.scale = 0.35;
    
    smoke.alphaRange = 1;
    smoke.alphaSpeed = -1.0;//消失范围
    smoke.yAcceleration = 450;//可以有下落的效果
    
    CGImageRef image2 = image.CGImage;
    smoke.contents= (__bridge id _Nullable)(image2);
    smoke.name = name; //设置这个 用来展示喷射动画 和隐藏
    
    smoke.velocity = 450;//速度
    smoke.velocityRange = 30;// 平均速度
    smoke.emissionLongitude = 3 * M_PI / 2 ;
    smoke.emissionRange = M_PI_2;//粒子的发散范围
    smoke.spin = M_PI * 2; // 粒子的平均旋转速度
    smoke.spinRange = M_PI * 2;// 粒子的旋转速度调整范围
    return smoke;
}

- (void)layoutSubviews
{
    [super layoutSubviews];
    //设置发射点的位置
    _streamerLayer.position = CGPointMake(self.frame.size.width/2.0, self.frame.size.height/2.0);
}


- (NSMutableArray *)imagesArr
{
    if (_imagesArr == nil) {
        _imagesArr = [NSMutableArray array];
    }
    return _imagesArr;
}

- (NSMutableArray *)CAEmitterCellArr
{
    if (_CAEmitterCellArr == nil) {
        _CAEmitterCellArr = [NSMutableArray array];
    }
    return _CAEmitterCellArr;
}

调用方法：

- (void)viewDidLoad {
    [super viewDidLoad];
    self.upvoteButton = [GXUpvoteButton buttonWithType:UIButtonTypeCustom];
    [self.view addSubview:self.upvoteButton];
    self.upvoteButton.frame = CGRectMake(0, 0, 50, 50);
    self.upvoteButton.center = self.view.center;
}

具体demo稍后提供...

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 158,736评论 4赞 362
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,167评论 1赞 291
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,442评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,902评论 0赞 204
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,302评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,573评论 1赞 216
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,847评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,562评论 0赞 197
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,260评论 1赞 241
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,531评论 2赞 245
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,021评论 1赞 258
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,367评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,016评论 3赞 235
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,068评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,827评论 0赞 194
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,610评论 2赞 274
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,514评论 2赞 269

ios 利用粒子动画实现今天头像点赞效果

下面先认识一下CAEmitterLayer的属性

CAEmitterCell的属性

推荐阅读更多精彩内容