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:发射源的形状
发射源的形状有以下几种
发射源形状 | 说明 |
---|---|
kCAEmitterLayerPoint | 点 |
kCAEmitterLayerLine | 线 |
kCAEmitterLayerRectangle | 矩形框 |
kCAEmitterLayerCuboid | 立体矩形框,由于是3D的,iOS中默认是2D,所以需要设置z方向的数据 |
kCAEmitterLayerCircle | 圆形 |
kCAEmitterLayerSphere | 立体圆形,即球,同样需要设置z方向的数据 |
发射模式有以下几种
发射模式 | 说明 |
---|---|
kCAEmitterLayerPoints | 点模式 |
kCAEmitterLayerOutline | 轮廓模式,从形状边缘上发射粒子 |
kCAEmitterLayerSurface | 表面模式,从形状的表面上发射粒子 |
kCAEmitterLayerVolume | 立体模式,3D形状的物体内部发射 |
渲染模式有以下几种
渲染模式 | 说明 |
---|---|
kCAEmitterLayerUnordered | 粒子是无序出现的 |
kCAEmitterLayerOldestFirst | 最先创建的粒子在最前面 |
kCAEmitterLayerOldestLast | 最后创建的粒子在最前面 |
kCAEmitterLayerBackToFront | 粒子的渲染按照z轴的前后顺序进行 |
kCAEmitterLayerAdditive | 粒子混合 |
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
推荐阅读
- 2020-04-07vue中Axios的封装和API接口的管理
- iOS中的Block
- 记录iOS生成分享图片的一些问题,根据UIView生成固定尺寸的分享图片
- 了解自然大气粒子对气候的影响
- Cesium|Cesium 粒子系统学习
- 2019-08-29|2019-08-29 iOS13适配那点事
- Hacking|Hacking with iOS: SwiftUI Edition - SnowSeeker 项目(一)
- iOS面试题--基础
- 接口|axios接口报错-参数类型错误解决
- iOS|iOS 笔记之_时间戳 + DES 加密