CAEmitterLayer 全面介紹及實現(xiàn)各種粒子效果(飄灑、爆炸拥娄、火焰等)

類似粒子效果的虛焦夜景

前言

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

CAEmitterLayer

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

  • renderMode:渲染模式狐史,控制著在視覺上粒子圖片是如何混合的。
NSString * const kCAEmitterLayerUnordered;
NSString * const kCAEmitterLayerOldestFirst;
NSString * const kCAEmitterLayerOldestLast;
NSString * const kCAEmitterLayerBackToFront;
NSString * const kCAEmitterLayerAdditive;
  • emitterMode: 發(fā)射模式说墨,這個字段規(guī)定了在特定形狀上發(fā)射的具體形式是什么
kCAEmitterLayerPoints: 點模式骏全,發(fā)射器是以點的形勢發(fā)射粒子。
kCAEmitterLayerOutline:這個模式下整個邊框都是發(fā)射點尼斧,即邊框進行發(fā)射
kCAEmitterLayerSurface:這個模式下是我們邊框包含下的區(qū)域進行拋灑
kCAEmitterLayerVolume: 同上
  • emitterShape:規(guī)定了發(fā)射源的形狀姜贡。
kCAEmitterLayerPoint:點形狀,發(fā)射源的形狀就是一個點棺棵,位置在上面position設(shè)置的位置
kCAEmitterLayerLine:線形狀楼咳,發(fā)射源的形狀是一條線,位置在rect的橫向的位于垂直方向中間那條
kCAEmitterLayerRectangle:矩形狀烛恤,發(fā)射源是一個矩形母怜,就是上面生成的那個矩形rect
kCAEmitterLayerCuboid:立體矩形形狀,發(fā)射源是一個立體矩形缚柏,這里要生效的話需要設(shè)置z方向的數(shù)據(jù)苹熏,如果不設(shè)置就同矩形狀
kCAEmitterLayerCircle:圓形形狀,發(fā)射源是一個圓形,形狀為矩形包裹的那個圓轨域,二維的
kCAEmitterLayerSphere:立體圓形袱耽,三維的圓形,同樣需要設(shè)置z方向數(shù)據(jù)干发,不設(shè)置則通二維一樣
  • emitterSize:發(fā)射源的大小朱巨,這個emitterSize結(jié)合position構(gòu)建了發(fā)射源的位置及大小的矩形區(qū)域rect
  • emitterPosition:發(fā)射點的位置。
  • lifetime:粒子的生命周期铐然。
  • velocity:粒子速度。
  • scale:粒子縮放比例恶座。
  • spin:自旋轉(zhuǎn)速度搀暑。
  • seed:用于初始化產(chǎn)生的隨機數(shù)產(chǎn)生的種子。
  • emitterCells:CAEmitterCell對象的數(shù)組跨琳,被用于把粒子投放到layer上
CAEmitterCell:
  • 粒子在X.Y.Z三個方向上的加速度自点。
@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:指定了一個可以混合圖片內(nèi)容顏色的混合色术唬。
  • birthRate:粒子產(chǎn)生系數(shù),默認(rèn)1.0.
  • contents:是個CGImageRef的對象,既粒子要展現(xiàn)的圖片滚澜;
  • emissionRange:值是2π粗仓,這意味著例子可以從360度任意位置反射出來。如果指定一個小一些的值设捐,就可以創(chuàng)造出一個圓錐形借浊。
  • 指定值在時間線上的變化,例如:alphaSpeed = 0.4萝招,說明粒子每過一秒減小0.4蚂斤。

火焰效果:

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

代碼實現(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;//這會讓重疊的地方變得更亮一些槐沼。
    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

瀑布飄灑效果:

大致實現(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ā)射點的位置
    [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;           // 每秒生成粒子的個數(shù)
    cell.lifetime = 6.f;            // 粒子存活時間
    cell.alphaSpeed = -0.1f;        // 粒子消逝的速度
    cell.velocity = 30.f;           // 粒子運動的速度均值
    cell.velocityRange = 100.f;      // 粒子運動的速度擾動范圍
    cell.emissionRange = M_PI; // 粒子發(fā)射角度, 這里是一個扇形.
    
//    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ā)射源形狀取值不同時會有不同效果曙蒸。

  • kCAEmitterLayerPoint : 點。
point.gif
  • kCAEmitterLayerLine:線岗钩。
line.gif

<注>可根據(jù)更多不同的組合參數(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)注我然后評論留下你的郵箱就行了哈凹嘲。

后續(xù)有補充我會及時更新的师倔,謝謝您的閱讀。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市趋艘,隨后出現(xiàn)的幾起案子疲恢,更是在濱河造成了極大的恐慌,老刑警劉巖瓷胧,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件显拳,死亡現(xiàn)場離奇詭異,居然都是意外死亡搓萧,警方通過查閱死者的電腦和手機杂数,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來瘸洛,“玉大人揍移,你說我怎么就攤上這事》蠢撸” “怎么了那伐?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長石蔗。 經(jīng)常有香客問我罕邀,道長,這世上最難降的妖魔是什么养距? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任诉探,我火速辦了婚禮,結(jié)果婚禮上棍厌,老公的妹妹穿的比我還像新娘阵具。我一直安慰自己,他們只是感情好定铜,可當(dāng)我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布阳液。 她就那樣靜靜地躺著,像睡著了一般揣炕。 火紅的嫁衣襯著肌膚如雪帘皿。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天畸陡,我揣著相機與錄音鹰溜,去河邊找鬼。 笑死丁恭,一個胖子當(dāng)著我的面吹牛曹动,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播牲览,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼墓陈,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起贡必,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤兔港,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后仔拟,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體衫樊,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年利花,在試婚紗的時候發(fā)現(xiàn)自己被綠了科侈。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡炒事,死狀恐怖臀栈,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情羡洛,我是刑警寧澤挂脑,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布藕漱,位于F島的核電站欲侮,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏肋联。R本人自食惡果不足惜威蕉,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望橄仍。 院中可真熱鬧韧涨,春花似錦、人聲如沸侮繁。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽宪哩。三九已至娩贷,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間锁孟,已是汗流浹背彬祖。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留品抽,地道東北人储笑。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像圆恤,于是被迫代替她去往敵國和親突倍。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容