CAEmitterLayer
釋放决摧、動(dòng)畫(huà)和呈現(xiàn)粒子系統(tǒng)。

它是比較完善的粒子渲染引擎了凑兰。所以我們?cè)陂_(kāi)始的時(shí)候需要去熟悉的它的屬性掌桩，因?yàn)槲覀冎恍枰O(shè)置它的屬性就可以做到我們所想要的效果。

粒子發(fā)射器的形狀
@property(copy) NSString *emitterShape

以下值:
CA_EXTERN NSString * const kCAEmitterLayerPoint
    CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerLine
     CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerRectangle
     CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerCuboid
     CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerCircle 
     CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerSphere
     CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);

發(fā)射模式票摇，這個(gè)字段規(guī)定了在特定形狀上發(fā)射的具體形式是什么
@property(copy) NSString *emitterMode;

CA_EXTERN NSString * const kCAEmitterLayerPoints
    CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerOutline
    CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerSurface
    CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerVolume
    CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);

具體的參數(shù)效果拘鞋，看這篇文章，本來(lái)錄了一些矢门，好吧盆色。比較懶，而且對(duì)于做重復(fù)的事情沒(méi)啥意義祟剔。
https://www.cnblogs.com/densefog/p/5424155.html

屬性參數(shù):

所以我們大概了解一下隔躲，然后我們以實(shí)踐為準(zhǔn)。
我們先看今天實(shí)現(xiàn)的這個(gè)效果,我一直想做一下這個(gè)物延，也比較簡(jiǎn)單宣旱。

like.gif

主要包含了兩種，一種利用CAKeyframeAnimation 關(guān)鍵幀動(dòng)畫(huà)還有CAEmitterLayer做出來(lái)的粒子動(dòng)畫(huà)叛薯。

配置粒子動(dòng)畫(huà)參數(shù)

@property (nonatomic,readwrite,strong)CAEmitterLayer *emitterLayer;

- (void)configerEmitterLayer{
    self.emitterLayer = [[CAEmitterLayer alloc] init];
    //發(fā)射的位置
    [self.emitterLayer setEmitterPosition:self.likeButton.center];
    //發(fā)射源的尺寸大小
    self.emitterLayer.emitterSize  = (CGSize){80,80};
    //發(fā)射源的形狀
    self.emitterLayer.emitterShape = kCAEmitterLayerCircle;
    //發(fā)射源的模式
    self.emitterLayer.emitterMode = kCAEmitterLayerOutline;
    CAEmitterCell *cell = [CAEmitterCell new];
    //cell的內(nèi)容,即可以設(shè)置圖片浑吟，也可以自己繪制圖形轉(zhuǎn)換成圖片
    cell.contents = (id)[PMBTools getBuddleImage:@"start" imageType:@"png"].CGImage;
    //每秒中粒子的數(shù)量
    cell.birthRate = 0.f;
    //粒子從出生到結(jié)束的時(shí)間
    cell.lifetime = 0.3f;
    //粒子生存浮動(dòng)的時(shí)間, [lifetime - lifetimeRange]
    cell.lifetimeRange = 0.5f;
    //運(yùn)動(dòng)的速度
    cell.velocity = 30.f;
    //運(yùn)動(dòng)浮動(dòng)速度[velocity - velocityRange]
    cell.velocityRange = 4.f;
    //Y方向的加速度 值越大每個(gè)粒子下落的速度越快
    cell.yAcceleration = 15.f;
    
    //粒子發(fā)射出來(lái)的角度
    cell.emissionLongitude = 0;
    //粒子發(fā)射出來(lái)的浮動(dòng)角度,這個(gè)角度決定了粒子能夠在多大角度范圍內(nèi)擴(kuò)散
    cell.emissionRange = 180;
    
    //粒子的初始大小
    cell.scale = 0.003;
    //粒子的初始大小的浮動(dòng)范圍 [scal - scaleRange]
    cell.scaleRange = 0.06;
    //粒子縮放的速度
   cell.scaleSpeed = 0.01;
    
//    //粒子的顏色笙纤，這里cell可以對(duì)圖片進(jìn)行新顏色的填充
//    cell.color = getColor(1.f, 1.f, 1.f, 1).CGColor;
//    cell.redRange = 1.0f;
//    cell.greenRange = 1.0f;
//    cell.blueRange = 1.0f;
//    //粒子透明的范圍
    cell.alphaRange = 0.8f;
//    //粒子透明的速度
    cell.alphaSpeed = -0.1f;
    
    [self.emitterLayer setEmitterCells:@[cell]];
    [self.view.layer addSublayer:self.emitterLayer];
}

關(guān)鍵的參數(shù):
self.emitterLayer.emitterShape = kCAEmitterLayerCircle;
我們想要的效果是點(diǎn)擊的時(shí)候呈現(xiàn)圓形擴(kuò)散,
kCAEmitterLayerCircle的效果就是呈現(xiàn)圓形擴(kuò)散，所以比較符合我們的設(shè)定

self.emitterLayer.emitterMode = kCAEmitterLayerOutline;
這個(gè)模式下整個(gè)邊框都是發(fā)射點(diǎn)组力，即邊框進(jìn)行發(fā)射,而我們上邊設(shè)置的是圓形省容，所以邊框呈現(xiàn)圓形范圍。

然后就是我們需要它在開(kāi)始的時(shí)候沒(méi)有小星星,所以設(shè)置它的
cell.birthRate = 0.f; 不設(shè)置的話默認(rèn)為0燎字。

其它的你們?cè)趺聪矚g怎么來(lái)咯腥椒。

然后就是那個(gè)心心點(diǎn)擊的時(shí)候的動(dòng)畫(huà):

心心動(dòng)畫(huà).gif

通過(guò)觀察其實(shí)就是這個(gè)圖片一個(gè)會(huì)一會(huì)小了，我們可以自己設(shè)置一下它的放大比例和縮小比例候衍。
我們實(shí)現(xiàn)這個(gè)動(dòng)畫(huà)的方式很多笼蛛，但是關(guān)鍵幀動(dòng)畫(huà)相對(duì)來(lái)說(shuō)比較簡(jiǎn)單(關(guān)鍵幀動(dòng)畫(huà)會(huì)單獨(dú)寫(xiě)一篇，這里就簡(jiǎn)單看下實(shí)踐吧)：

    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
    animation.values = @[@1.4,@0.7,@1.0,@1.3,@1.0];
    animation.duration = 0.5;
    animation.calculationMode = kCAAnimationCubic;
    [self.likeButton.layer addAnimation:animation forKey:@"transform.scale"];

    kCAAnimationCubic 對(duì)關(guān)鍵幀為座標(biāo)點(diǎn)的關(guān)鍵幀進(jìn)行圓滑曲線相連后插值計(jì)算

    animationWithKeyPath的值：
　  transform.scale = 比例轉(zhuǎn)換
    transform.scale.x = 闊的比例轉(zhuǎn)換
    transform.scale.y = 高的比例轉(zhuǎn)換
    transform.rotation.z = 平面圖的旋轉(zhuǎn)
    opacity = 透明度
    margin  四周邊距
    zPosition Z軸位置
    backgroundColor    背景顏色
    cornerRadius    圓角
    borderWidth 邊框?qū)挾?    bounds  
    contents
    contentsRect
    cornerRadius
    frame 
    hidden 是否隱藏
    mask   
    masksToBounds 是否截取邊緣
    opacity  不透明度
    position 位置
    shadowColor 陰影顏色
    shadowOffset 陰影偏移度
    shadowOpacity 陰影不透明度
    shadowRadius 陰影半徑

嗯蛉鹿，配置也好了滨砍，動(dòng)畫(huà)也有了，下面就是開(kāi)啟粒子動(dòng)畫(huà)了

    //首先獲取我們粒子動(dòng)畫(huà)單元榨为。設(shè)置它的粒子數(shù)量
    CAEmitterCell *cell = self.emitterLayer.emitterCells[0];
    [cell setBirthRate:30.f];
    //然后再設(shè)置粒子layer的粒子數(shù)量惨好，如果你只設(shè)置其中的一種，那是么有用的随闺。
    //網(wǎng)上有直接通過(guò)反射設(shè)置的我試過(guò)了沒(méi)有效果日川。還是說(shuō)操作的方式不正確。不過(guò)被我發(fā)現(xiàn)了這個(gè)可用的了矩乐。
    [self.emitterLayer setBirthRate:30.f];
    //設(shè)置粒子動(dòng)畫(huà)立馬顯示
    self.emitterLayer.beginTime = CACurrentMediaTime();
    //想粒子動(dòng)畫(huà)消失其實(shí)就是將粒子設(shè)置為0,都沒(méi)有粒子了自然也就結(jié)束了龄句。
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
          [self.emitterLayer setBirthRate:0.f];
    });

嗯。到這里點(diǎn)擊心心的動(dòng)畫(huà)也就結(jié)束了散罕。記得把上面的粒子動(dòng)畫(huà)放在上面的關(guān)鍵幀動(dòng)畫(huà)里哦分歇。

DEMO:
https://github.com/yanggenwei/GWAnimation/tree/master