OpenGL|iOS 粒子效果实现(CAEmitterLayer + CAEmitterCell)

粒子效果的实现需要使用两个类: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形状的物体内部发射
【OpenGL|iOS 粒子效果实现(CAEmitterLayer + CAEmitterCell)】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]
以下是实现的几种的粒子效果图示
  • 粽子雨、红包雨等粒子效果

  • 点赞按钮的粒子效果
    OpenGL|iOS 粒子效果实现(CAEmitterLayer + CAEmitterCell)
    文章图片

  • 类似烟花的粒子效果

  • 下雨的粒子效果

以上的几种效果的实现就不一一详细说明了.
粒子效果实现的一般步骤
接下来总结粒子效果实现的步骤:
  • 利用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

    推荐阅读