一.前言

你肯定見過很酷炫的iOS動畫吧，例如微信的表情雨??，紅包雨，下雪，煙花等，但是有時候確不知道從何下手，iOS動畫內(nèi)容有很多，這次我們就來學(xué)習(xí)下酷炫的粒子動畫。先上效果圖給大伙瞧瞧

未命名.gif

二.知識點

本文用了兩大知識點
1.CAGradientLayer 創(chuàng)建漸變的背景色
2.CAEmitterLayer、CAEmitterCell iOS中的粒子效果有兩部分組成，一部分為發(fā)射器CAEmitterLayer，另一部分是粒子單元CAEmitterCell，用于設(shè)置相應(yīng)的粒子屬性。

三、代碼詳解

• 1.漸變背景色的生成

  
  
  屏幕快照 2017-06-14 下午2.53.07.png

CAGradientLayer繼承自CALayer，它主要功能是能實現(xiàn)漸變的顏色

@property(copy) NSArray *colors   漸變顏色的數(shù)組 
@property(copy) NSArray *locations  漸變顏色的區(qū)間分布，
locations的數(shù)組長度和color一致，一般不用設(shè)置，默認是nil，會平均分布。
//[NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0],  
 //                          [NSNumber numberWithFloat:0.3],  
 //                         [NSNumber numberWithFloat:0.8],  
 //                         [NSNumber numberWithFloat:1.0],  
 //                        nil];  
@property CGPoint startPoint  映射locations中第一個位置，
用單位向量表示，比如（0，0）表示從左上角開始變化。默認值是(0.5,0.0)。
@property CGPoint endPoint 映射locations中最后一個位置
,用單位向量表示，比如（1，1）表示到右下角變化結(jié)束。默認值是(0.5,1.0)。

demo背景色代碼

 //漸變色
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = self.view.bounds;
    [self.view.layer addSublayer:gradientLayer];
    
    UIColor *lightColor = [UIColor colorWithRed:40.0 / 255.0 green:150.0 / 255.0 blue:200.0 / 255.0 alpha:1.0];
    
    UIColor *whiteColor = [UIColor colorWithRed:255.0 / 255.0 green:250.0 / 255.0 blue:250.0 / 255.0 alpha:1.0];
//可以設(shè)置多個colors,
    gradientLayer.colors = @[(__bridge id)lightColor.CGColor,(__bridge id)whiteColor.CGColor];
    //45度變色(由lightColor－>white)
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(1, 1);

• 雪花粒子發(fā)射器

    CAEmitterCell *cell = [[CAEmitterCell alloc] init];
    //展示的圖片
    cell.contents = (__bridge id _Nullable)([UIImage imageNamed:@"white"].CGImage);

    //每秒粒子產(chǎn)生個數(shù)的乘數(shù)因子，會和layer的birthRate相乘，然后確定每秒產(chǎn)生的粒子個數(shù)
    cell.birthRate = 2000;
    //每個粒子存活時長
    cell.lifetime = 5.0;
    //粒子生命周期范圍
    cell.lifetimeRange = 0.3;
    //粒子透明度變化，設(shè)置為－0.4，就是每過一秒透明度就減少0.4，這樣就有消失的效果,一般設(shè)置為負數(shù)。
    cell.alphaSpeed = -0.2;
    cell.alphaRange = 0.5;
    //粒子的速度
    cell.velocity = 40;
    //粒子的速度范圍
    cell.velocityRange = 20;
    //周圍發(fā)射的角度，如果為M_PI*2 就可以從360度任意位置發(fā)射
      //cell.emissionRange = M_PI*2;
    //粒子內(nèi)容的顏色
    //    cell.color = [[UIColor whiteColor] CGColor];
    
  //設(shè)置了顏色變化范圍后每次產(chǎn)生的粒子的顏色都是隨機的
    cell.redRange = 0.5;
    cell.blueRange = 0.5;
    cell.greenRange = 0.5;
    
    //縮放比例
    cell.scale = 0.2;
    //縮放比例范圍
    cell.scaleRange = 0.02;
    
    //粒子的初始發(fā)射方向
    cell.emissionLongitude = M_PI;
    //Y方向的加速度
    cell.yAcceleration = 70.0;
    //X方向加速度
    //    cell.xAcceleration = 20.0;
    
    _emitterLayer = [CAEmitterLayer layer];
    
    //發(fā)射位置
    _emitterLayer.emitterPosition = CGPointMake(SCREEN_WIDTH/2.0, 0);
    //粒子產(chǎn)生系數(shù)，默認為1
    _emitterLayer.birthRate = 1;
    //發(fā)射器的尺寸
    _emitterLayer.emitterSize = CGSizeMake(SCREEN_WIDTH, 0);
    //發(fā)射的形狀
    _emitterLayer.emitterShape = kCAEmitterLayerLine;
    //發(fā)射的模式
    _emitterLayer.emitterMode = kCAEmitterLayerLine;
    //渲染模式
    _emitterLayer.renderMode = kCAEmitterLayerOldestFirst;
    _emitterLayer.masksToBounds = NO;
    //_emitterLayer.zPosition = -1;
    _emitterLayer.emitterCells = @[cell];
  //emitterView是自己創(chuàng)建的一個View
    [self.emitterView.layer addSublayer:_emitterLayer];

代碼中都有注釋，這里進行簡單的解釋

CAEmitterCell粒子單元
contents 一般放一張圖片，是我們粒子要展示的內(nèi)容
birthRate 每秒粒子產(chǎn)生個數(shù)的乘數(shù)因子，會和layer的birthRate相乘, 然后確定每秒產(chǎn)生的粒子個數(shù)
lifetimeRange 所有的range屬性都是你設(shè)置的屬性值加減它后得到一個范圍，例如cell.lifetime=5.0, cell.lifetimeRange = 1.0; 那么粒子的存活時間就是[4.0,6.0];
color 粒子內(nèi)容的顏色,更改后粒子會變色
redRange，blueRange，greenRange 設(shè)置了顏色變化范圍后會產(chǎn)生隨機的顏色，這樣粒子就會是五顏六色的了
scale 粒子縮放比例，我們看到的煙花粒子就是縮放比例很小得到的，你可以用任意圖，然后縮放比例設(shè)置很小，就可以得到很小的粒子

CAEmitterLayer發(fā)射器
emitterCells 粒子單元數(shù)組，你可以創(chuàng)建兩個單元，負責(zé)不同的效果。
emitterPosition 發(fā)射位置
birthRate 粒子產(chǎn)生系數(shù)，默認為1，想關(guān)掉就設(shè)為0，這樣就沒有粒子產(chǎn)生了，demo中的暫停效果就是這么實現(xiàn)的。
emitterSize 發(fā)射器的尺寸
emitterShape 發(fā)射的形狀，有6種值，分別是點、線、矩形、立方體、圓形、球形，具體的實現(xiàn)效果自己可以體驗下。

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);

emitterMode 發(fā)射的模式，有4種值，分別是

CA_EXTERN NSString * const kCAEmitterLayerPoints//從發(fā)射器中
    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);

renderMode 渲染模式,有5種取值，分別是(我更改體驗了下，暫沒找出啥不同??)

CA_EXTERN NSString * const kCAEmitterLayerUnordered//粒子是無序出現(xiàn)的，多個發(fā)射源將混合
    CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerOldestFirst//聲明久的粒子會被渲染在最上層
    CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerOldestLast//年輕的粒子會被渲染在最上層
    CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerBackToFront//粒子的渲染按照Z軸的前后順序進行
    CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerAdditive//進行粒子混合
    CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);

4.Demo

其他效果展示（更改了發(fā)射位置，粒子數(shù)量，關(guān)閉隨機顏色，換成心形圖片后）

心雨.gif

屏幕快照 2017-06-14 下午3.49.11.png