類似粒子效果的虛焦夜景
前言
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ù)有補充我會及時更新的师倔，謝謝您的閱讀。
