類似粒子效果的虛焦夜景

前言

CAEmitterLayer作為CALayer的子類的一個(gè)高性能的粒子引擎，被用來創(chuàng)建實(shí)時(shí)的粒子動(dòng)畫如爆炸、煙霧及火焰等效果。在研究其酷炫效果之前，讓我們先探究一下CAEmitterLayer的眾多基本屬性，以方便我們根據(jù)需求設(shè)置更多參數(shù)。

CAEmitterLayer

CAEmitterLayer看上去像是許多CAEmitterCell的容器，這些CAEmitierCell定義了一個(gè)例子效果。你將會(huì)為不同的例子效果定義一個(gè)或多個(gè)CAEmitterCell作為模版，同時(shí)CAEmitterLayer負(fù)責(zé)基于這些模版實(shí)例化一個(gè)粒子流。一個(gè)CAEmitterCell類似于一個(gè)CALayer：它有一個(gè)contents屬性可以定義為一個(gè)CGImage，另外還有一些可設(shè)置屬性控制著表現(xiàn)和行為。

• renderMode：渲染模式，控制著在視覺上粒子圖片是如何混合的。

NSString * const kCAEmitterLayerUnordered;
NSString * const kCAEmitterLayerOldestFirst;
NSString * const kCAEmitterLayerOldestLast;
NSString * const kCAEmitterLayerBackToFront;
NSString * const kCAEmitterLayerAdditive;

• emitterMode: 發(fā)射模式，這個(gè)字段規(guī)定了在特定形狀上發(fā)射的具體形式是什么

kCAEmitterLayerPoints： 點(diǎn)模式，發(fā)射器是以點(diǎn)的形勢(shì)發(fā)射粒子。
kCAEmitterLayerOutline：這個(gè)模式下整個(gè)邊框都是發(fā)射點(diǎn)，即邊框進(jìn)行發(fā)射
kCAEmitterLayerSurface：這個(gè)模式下是我們邊框包含下的區(qū)域進(jìn)行拋灑
kCAEmitterLayerVolume： 同上

• emitterShape：規(guī)定了發(fā)射源的形狀。

kCAEmitterLayerPoint：點(diǎn)形狀，發(fā)射源的形狀就是一個(gè)點(diǎn)，位置在上面position設(shè)置的位置
kCAEmitterLayerLine：線形狀，發(fā)射源的形狀是一條線，位置在rect的橫向的位于垂直方向中間那條
kCAEmitterLayerRectangle：矩形狀，發(fā)射源是一個(gè)矩形，就是上面生成的那個(gè)矩形rect
kCAEmitterLayerCuboid：立體矩形形狀，發(fā)射源是一個(gè)立體矩形，這里要生效的話需要設(shè)置z方向的數(shù)據(jù)，如果不設(shè)置就同矩形狀
kCAEmitterLayerCircle：圓形形狀，發(fā)射源是一個(gè)圓形，形狀為矩形包裹的那個(gè)圓，二維的
kCAEmitterLayerSphere：立體圓形，三維的圓形，同樣需要設(shè)置z方向數(shù)據(jù)，不設(shè)置則通二維一樣

• emitterSize：發(fā)射源的大小，這個(gè)emitterSize結(jié)合position構(gòu)建了發(fā)射源的位置及大小的矩形區(qū)域rect
• emitterPosition：發(fā)射點(diǎn)的位置。
• lifetime：粒子的生命周期。
• velocity：粒子速度。
• scale：粒子縮放比例。
• spin：自旋轉(zhuǎn)速度。
• seed：用于初始化產(chǎn)生的隨機(jī)數(shù)產(chǎn)生的種子。
• emitterCells：CAEmitterCell對(duì)象的數(shù)組，被用于把粒子投放到layer上

CAEmitterCell:

• 粒子在X.Y.Z三個(gè)方向上的加速度。

@property CGFloat xAcceleration;
@property CGFloat yAcceleration;
@property CGFloat zAcceleration;

• 粒子縮放比例、縮放范圍及縮放速度。（0.0`1.0）

@property CGFloat scale;
@property CGFloat scaleRange;
@property CGFloat scaleSpeed;

• 粒子自旋轉(zhuǎn)速度及范圍：

@property CGFloat spin;
@property CGFloat spinRange;

• 粒子RGB及alpha變化范圍、速度。

//范圍：
@property float redRange;
@property float greenRange;
@property float blueRange;
@property float alphaRange;
//速度：
@property float redSpeed;
@property float greenSpeed;
@property float blueSpeed;
@property float alphaSpeed;

• emitterCells：子粒子。
• color:指定了一個(gè)可以混合圖片內(nèi)容顏色的混合色。
• birthRate:粒子產(chǎn)生系數(shù)，默認(rèn)1.0.
• contents：是個(gè)CGImageRef的對(duì)象,既粒子要展現(xiàn)的圖片；
• emissionRange：值是2π，這意味著例子可以從360度任意位置反射出來。如果指定一個(gè)小一些的值，就可以創(chuàng)造出一個(gè)圓錐形。
• 指定值在時(shí)間線上的變化，例如：alphaSpeed = 0.4，說明粒子每過一秒減小0.4。

火焰效果:

我們用每個(gè)contents為五角星圖片的粒子來簡(jiǎn)單實(shí)現(xiàn)。

代碼實(shí)現(xiàn)如下：

    UIView * containView = [[UIView alloc]initWithFrame:self.view.bounds];
    containView.center = self.view.center;
    containView.backgroundColor = self.view.backgroundColor;
    self.containView = containView;
    [self.view addSubview:self.containView];

    CAEmitterLayer *emitter = [CAEmitterLayer layer];
    emitter.frame = self.containView.bounds;
    [self.containView.layer addSublayer:emitter];
    emitter.renderMode = kCAEmitterLayerAdditive;//這會(huì)讓重疊的地方變得更亮一些。
    emitter.emitterPosition = CGPointMake(emitter.frame.size.width / 2.0, emitter.frame.size.height / 2.0);

    CAEmitterCell *cell = [[CAEmitterCell alloc] init];
    cell.contents = (__bridge id)[UIImage imageNamed:@"star_yellow"].CGImage;
    cell.birthRate = 150;
    cell.lifetime = 5.0;
    cell.color = [UIColor colorWithRed:1 green:0.5 blue:0.1 alpha:1.0].CGColor;
    cell.alphaSpeed = -0.4;
    cell.velocity = 50;
    cell.velocityRange = 50;
    cell.emissionRange = M_PI * 2.0;

    emitter.emitterCells = @[cell];

效果：

flower.gif

瀑布飄灑效果：

大致實(shí)現(xiàn)如下：

- (void)setupSubviews
{
    self.layer.backgroundColor = [UIColor blackColor].CGColor;
    // 配置emitter
    [self emiterLayer].renderMode = kCAEmitterLayerAdditive; // 粒子如何混合, 這里是直接重疊
    [self emiterLayer].emitterPosition = CGPointMake(self.frame.size.width, 0); // 發(fā)射點(diǎn)的位置
    [self emiterLayer].emitterShape = kCAEmitterLayerPoint;
    

    NSMutableArray * mArr = @[].mutableCopy;
    int cellCount = 6;
    for (int i = 0; i<cellCount; i++) {
        CAEmitterCell * cell = [self getEmitterCellAction];
        [mArr addObject:cell];
    }
    [self emiterLayer].emitterCells = mArr; // 將粒子組成的數(shù)組賦值給CAEmitterLayer的emitterCells屬性即可.
}

- (CAEmitterCell *)getEmitterCellAction
{
    CAEmitterCell *cell = [[CAEmitterCell alloc] init];
    //    cell.contents = (__bridge id)[UIImage imageNamed:@"coin"].CGImage; // 粒子中的圖片
    cell.contents = (__bridge id _Nullable)([self setRandomColorCircleImageSize:CGSizeMake(20, 20)].CGImage);
    cell.yAcceleration = arc4random_uniform(80);   // 粒子的初始加速度
    cell.xAcceleration = -cell.yAcceleration-10;
    cell.birthRate = 10.f;           // 每秒生成粒子的個(gè)數(shù)
    cell.lifetime = 6.f;            // 粒子存活時(shí)間
    cell.alphaSpeed = -0.1f;        // 粒子消逝的速度
    cell.velocity = 30.f;           // 粒子運(yùn)動(dòng)的速度均值
    cell.velocityRange = 100.f;      // 粒子運(yùn)動(dòng)的速度擾動(dòng)范圍
    cell.emissionRange = M_PI; // 粒子發(fā)射角度, 這里是一個(gè)扇形.
    
//    cell.scale = 0.2;
//    cell.scaleRange = 0.1;
//    cell.scaleSpeed = 0.02;
    
    CGFloat colorChangeValue  = 50.0f;
    cell.blueRange = colorChangeValue;
    cell.redRange =  colorChangeValue;
    cell.greenRange =  colorChangeValue;
    
    return cell;
}

當(dāng)emitterShape發(fā)射源形狀取值不同時(shí)會(huì)有不同效果。

• kCAEmitterLayerPoint : 點(diǎn)。

point.gif

• kCAEmitterLayerLine：線。

line.gif

<注>可根據(jù)更多不同的組合參數(shù)設(shè)置來實(shí)現(xiàn)更多酷炫效果，這里便不再贅訴。

參考鏈接：

http://www.tuicool.com/articles/INbQJj
http://blog.csdn.net/samuelltk/article/details/10207799
http://www.cnblogs.com/densefog/p/5424155.html

后續(xù)：

如果需要demo的話直接關(guān)注我然后評(píng)論留下你的郵箱就行了哈。

后續(xù)有補(bǔ)充我會(huì)及時(shí)更新的，謝謝您的閱讀。