前言
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];
效果:
瀑布飄灑效果:
大致實現(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
: 點。
-
kCAEmitterLayerLine
:線岗钩。
<注>可根據(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ù)有補充我會及時更新的师倔,謝謝您的閱讀。