iOS 粒子效果实现：CAEmitterLayer + CAEmitterCell

OpenGL + OpenGL ES +Metal 系列文章汇总

粒子效果的实现需要使用两个类：CAEmitterLayer 和 CAEmitterCell

CAEmitterLayer

CAEmitterLayer是Core Animation中的特殊图层，继承自CALayer，是一个粒子发射器，用于控制粒子效果

属性

属性	说明
emitterCells	粒子数组，创建好的粒子样式，需要放入数组中，支持多种粒子样式
birthRate	粒子的产生率，默认是1.0
lifetime	粒子的生命周期，默认是1.0
emitterPosition	发射源的中心点位置，默认是(0, 0, 0)
emitterCells	粒子数组创建好的粒子样式，需要放入数组中，支持多种粒子样式
emitterZPosition	三维立体中的位置，处于立体的效果时使用
emitterSize	发射源的尺寸大小
emitterDepth	发射源的深度
emitterShape	发射源的形状，默认是point
emitterMode	发射模式，默认是volum
renderMode	渲染模式，默认是unordered
preservesDepth	是否需要深度，默认是NO（如果设置为YES，表示粒子效果是三维空间的）
velocity	粒子初始速度，默认是1.0
scale	粒子缩放比例，默认是1.0
spin	粒子自旋转速度。默认是1.0
seed	随机数发生器

下面着重介绍下常用的属性

emitterShape：决定发射源的形状，并不是粒子的形状
emitterMode：发射模式，决定发射区域在发射源的哪一部分
emitterSize：发射源的尺寸大小
emitterPosition：发射源的重心点位置
renderMode：渲染模式
emitterCells：粒子样式数组，每一个粒子就是一个CAEmitterCell

其中 emitterShape 、 emitterMode、renderMode都是枚举类型

emitterShape：发射源的形状

发射源的形状有以下几种

发射源形状	说明
kCAEmitterLayerPoint	点
kCAEmitterLayerLine	线
kCAEmitterLayerRectangle	矩形框
kCAEmitterLayerCuboid	立体矩形框，由于是3D的，iOS中默认是2D，所以需要设置z方向的数据
kCAEmitterLayerCircle	圆形
kCAEmitterLayerSphere	立体圆形，即球，同样需要设置z方向的数据

emitterMode：发射模式

发射模式有以下几种

发射模式	说明
kCAEmitterLayerPoints	点模式
kCAEmitterLayerOutline	轮廓模式，从形状边缘上发射粒子
kCAEmitterLayerSurface	表面模式，从形状的表面上发射粒子
kCAEmitterLayerVolume	立体模式，3D形状的物体内部发射

renderMode：渲染模式

渲染模式有以下几种

渲染模式	说明
kCAEmitterLayerUnordered	粒子是无序出现的
kCAEmitterLayerOldestFirst	最先创建的粒子在最前面
kCAEmitterLayerOldestLast	最后创建的粒子在最前面
kCAEmitterLayerBackToFront	粒子的渲染按照z轴的前后顺序进行
kCAEmitterLayerAdditive	粒子混合

注：每秒粒子产生的个数 = layer.birthRate * cell.birthRate

CAEmitterCell

CAEmitterCell是粒子的样式类，用来创建粒子，类似于UITableView中的cell，同时也可以复用

属性

属性	说明
name	cell标识符，默认是nil
enabled	cell是否显示
birthRate	每秒粒子的产生率，默认是0
lifetime & lifetimeRange	cell的生命周期 & 生命周期的范围，都默认是0，以秒为单位
emissionLatitude	指定纬度，维度角代表了x-z轴平面坐标系中与x轴和z轴之间的夹角，默认是0
emissionLongitude	指定经度，经度角代表了x-y轴平面坐标系中与x轴和y轴之间的夹角，默认是0
emissionRange	发射角度范围，默认是0
velocity & velocityRange	粒子的初始速度 & 范围，都默认是0
xAcceleration & yAcceleration & zAcceleration	在x、y、z轴上的重力加速度矢量，都默认是0
scale	粒子在生命周期范围内的缩放比例，默认是1
scaleRange	缩放比例范围，默认是0，负数缩小，正数放大
scaleSpeed	缩放速度，默认是0
spin & spinRange	粒子的自旋转速度 & 自旋转角度范围（弧度制），都默认是0
color	粒子的颜色
redRange & greenRange & blueRange & alphaRange	粒子的颜色RGBA能改变的范围，默认是0，范围是[0,1]
redSpeed & greenSpeed & blueSpeed & alphaSpeed	粒子的颜色RGBA在生命周期内改变的速度，都默认是0，范围是[0,1]
contents	粒子的内容，设置为CGImageRef类型的对象
contentsRect	粒子内容的位置
contentsScale	粒子内容的缩放比例
minificationFilter & magnificationFilter & minificationFilterBias	缩小 & 放大的过滤器
emitterCells	粒子中的粒子数组：即粒子也可以包含粒子
style	样式

下面着重介绍下常用的属性

lifetime：粒子生命周期，即存活时间，单位是秒
birthRate：粒子的产生率，即每秒产生多少粒子的个数
contents：粒子的内容，通常为CGImageRef的对象，将提供的图片从UIImage转换为CGImageRef类型
name：粒子的名字，即粒子的唯一标识，可以KVC通过name拿到粒子的需要修改的属性
color：粒子的颜色，会结合contents的颜色来决定粒子的最终颜色，如果想完全通过color来控制cell的颜色，最好设置一张白色的图片
redSpeed & greenSpeed & blueSpeed & alphaSpeed：color中RGBA的取值范围，默认还0，范围是[0,1]，如果cell的color设置为[[UIColor colorWithRed:0.5 green:0.4 blue:0.5 alpha:1] CGColor];，在设置redSpeed & greenSpeed & blueSpeed & alphaSpeed全部为0.1，对应的RGB取值范围是R(0.1, 0.5)、G(0.1,0.4 )、B(0.1, 0.5)、A(0.1, 1.0)
velocity & velocityRange: 粒子的初始速度和范围
xAcceleration & yAcceleration & zAcceleration：分别是x、y、z轴上的加速度，当为正数时，向坐标轴的正方向加速，反之，向负方向加速
scale & scaleRange：粒子的缩放比例及范围，缩放比例默认是0，范围是[0,1]

以下是实现的几种的粒子效果图示

粽子雨、红包雨等粒子效果
点赞按钮的粒子效果
类似烟花的粒子效果
下雨的粒子效果

以上的几种效果的实现就不一一详细说明了.

粒子效果实现的一般步骤

接下来总结粒子效果实现的步骤：

利用CAEmitterLayer创建粒子图层layer，即发射源，并添加到视图的layer上
设置发射源的属性，例如：emitterShape、emitterMode、emitterSize、emitterPosition等
通过CAEmitterCell创建粒子cell
设置粒子的相关属性，例如contents、birthRate、lifetime、speed等
将粒子cell添加到发射源的emitterCells数组中

部分示例代码如下：

- (void)zongZiRain{
//    1、设置CAEmitterLayer
    CAEmitterLayer *rainLayer = [CAEmitterLayer layer];
    
//    2、在背景图上添加粒子图层
    [self.view.layer addSublayer:rainLayer];
    self.rainlayer = rainLayer;
    
//    3、发射形状--线性
    rainLayer.emitterShape = kCAEmitterLayerLine;
    //发射模式
    rainLayer.emitterMode = kCAEmitterLayerSurface;
    //发射形状的大小
    rainLayer.emitterSize = self.view.frame.size;
    //发射的中心点位置
    rainLayer.emitterPosition = CGPointMake(self.view.bounds.size.width*0.5, -10);
    
//    4、配置cell
    CAEmitterCell *cell = [CAEmitterCell emitterCell];
    //粒子图片
    cell.contents = (id)[[UIImage imageNamed:@"zongzi2.jpg"] CGImage];
    //每秒钟创建的粒子对象，默认是0
    cell.birthRate = 1.0;
    //粒子的生存周期，以s为单位，默认是0
    cell.lifetime = 30;
    //粒子发射的速率，默认是1
    cell.speed = 2;
    //粒子的初始平均速度及范围，默认为0
    cell.velocity = 10.0f;
    cell.velocityRange = 10.0f;
    //y方向的加速度矢量,默认是0
    cell.yAcceleration = 60;
    //粒子的缩放比例及范围，默认是[1,0]
    cell.scale = 0.05;
    cell.scaleRange = 0.0f;
    
//    5、添加到图层上
    rainLayer.emitterCells = @[cell];
}

完整的代码见Github - 12-CAEmitterLayer_实现粒子效果_OC

iOS 粒子效果实现：CAEmitterLayer + CAEmitterCell

CAEmitterLayer

属性

CAEmitterCell

属性

猜你喜欢