我们常见的一些像下雪、下雨、火苗这类的动画,都是可以使用粒子效果来实现。主要使用了类CAEmitterLayerCAEmitterCell来实现。下面我们将通过实现一个下雪的效果来说明该类的使用方法和各个属性的含义。

CAEmitterLayer 可理解为粒子发射器

创建一个CAEmitterLayer的实例,也就是创建一个发射器。

CGRect rect = CGRectMake(0, 100, self.view.bounds.size.width, 50);
//创建发射器
CAEmitterLayer *emitter = [CAEmitterLayer layer];
emitter.frame = rect;
[self.view.layer addSublayer:emitter];
复制代码

设置发射器类型

//设置发射器类型
emitter.emitterShape = kCAEmitterLayerRectangle;
复制代码

这时候就要说一下属性emitterShape的取值了。有6种取值kCAEmitterLayerPointkCAEmitterLayerLinekCAEmitterLayerRectanglekCAEmitterLayerCuboidkCAEmitterLayerCirclekCAEmitterLayerSphere。简单介绍几种

  • kCAEmitterLayerPoint 设置为该类型,发射器的所有粒子都将从一个相同的点创建。这个点是发射器的position。
  • kCAEmitterLayerLine 设置为该值,所有粒子都将在发射器最上端的创建。
  • kCAEmitterLayerRectangle 设置为该值,所有粒子都在发射器的整个区域创建。

其他三种先不说了。 需要注意的,上述所说的区域不是emitterLayer的,而是由属性emitterPositionemitterSize来确认的。 下面就来设置这两个属性的值,在该例子中,将其设置为和layer一样了。

emitter.emitterPosition = CGPointMake(rect.size.width*0.5, rect.size.height*0.5);
emitter.emitterSize = rect.size;
复制代码

CAEmitterCell 可理解为我们要发射的例子

和我们之前说过的Animation一样,CAEmitterCell也只不过是我们为你用来展现粒子形态的一个数据模型。

我们创建一个粒子,并且将图片flake.png作为其内容。接下来发射器会创建他的很多各种各样的拷贝来模拟真实的雪花。

CAEmitterCell *emitterCell = [CAEmitterCell emitterCell];
emitterCell.contents = (__bridge id _Nullable)([UIImage imageNamed:@"flake"].CGImage);
复制代码

接着添加代码

//设置粒子创建速率,也就是每秒产生的个数
emitterCell.birthRate = 20;
//设置粒子的生命周期,也就是在屏幕上存在的时间
emitterCell.lifetime = 3.5;
//将粒子赋给发射器
emitter.emitterCells = @[emitterCell];
复制代码

需要解释的是emitterCells属性。我们将emitterCells属性设置为一个存放着CAEmitterCell类型数据的数组。同一个发射器是可以发射不同类型的粒子的。

这回运行程序,我们将看到这样的效果

我们发现虽然产生了粒子,但是他们并不会运动。所以,继续努力 添加代码

//设置粒子创建速率,也就是每秒产生的个数
emitterCell.birthRate = 200;
//设置粒子的生命周期,也就是在屏幕上存在的时间
emitterCell.lifetime = 3.5;
//设置粒子声明周期范围
emitterCell.lifetimeRange = 1.0;
//将粒子赋给发射器
emitter.emitterCells = @[emitterCell];
//设置y轴上的加速度
emitterCell.yAcceleration = 70.0f;
//设置x轴上的加速度
emitterCell.xAcceleration = 10.0f;
//设置粒子的初始速度
emitterCell.velocity = 20;
//设置粒子的初始角度 如果不设置这个值,我们发现粒子都是水平发射的
emitterCell.emissionLongitude = -M_PI_2;
//设置粒子的初始速度范围 在此例子中范围是 -180~220
emitterCell.velocityRange = 200.0f;
//设置粒子的初始角度范围 此例子的范围为 M_PI~0
emitterCell.emissionRange = M_PI_2;
//设置粒子的颜色
emitterCell.color = [UIColor colorWithRed:0.9 green:1.0 blue:1.0 alpha:1.0].CGColor;
//我们也可以设置随机颜色,并且限定范围。因为RGB的值最大为1.0,那Red来说,范围并不会变为0.6~1.3,而是0.6~1.0。相似的,如果是负值,则最小为0
emitterCell.redRange = 0.3;
emitterCell.greenRange = 0.3;
emitterCell.blueRange = 0.3;//设置粒子的大小及其大小范围
emitterCell.scale = 0.8;
emitterCell.scaleRange = 0.8;//设置让粒子随着时间推移每秒减小15%,如果设置为正值则每秒增加
emitterCell.scaleSpeed = -0.15;//设置粒子透明度的变化范围
emitterCell.alphaRange = 0.75;
//设置粒子变化速度
emitterCell.alphaSpeed = -0.15;
复制代码

好多属性都是有range相关的类型,都是指定的范围,没有一个个的写。 最终效果:

github地址

粒子效果动画使用总结相关推荐

  1. 使用粒子效果动画组成模型[自定义shader实现]

    文章目录 优点 实现思路 传递给Shader的数据 根据模型数据生成数据传递给Shader 自定义shader 连接cpu与gpu 顶点着色器 计算位置 片元着色器 视频教程: THREE.js粒子效 ...

  2. iOS动画开发之五——炫酷的粒子效果

    iOS动画开发之五--炫酷的粒子效果 在上几篇博客中,我们对UIView层的动画以及iOS的核心动画做了介绍,基本已经可以满足iOS应用项目中所有的动画需求,如果你觉得那些都还不够炫酷,亦或是你灵光一 ...

  3. Unity3D中暂停时的动画及粒子效果实现

    暂停是游戏中经常出现的功能,而Unity3D中对于暂停的处理并不是很理想.一般的做法是将Time.timeScale设置为0.Unity的文档中对于这种情况有以下描述: The scale at wh ...

  4. 超好看的粒子效果文字动画特效HTML5源码

    介绍: 一款基于HTML5 Canvas的文字特效原作者(Shape Shifter),输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的文字动画,相当酷的动画效果.喜欢的可以下载 ...

  5. 怎么在html中加入特效文字,如何使用HTML5+css3实现粒子效果文字动画特效(附完整代码)...

    我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发.今天我们要来分享一款基于HTML5和css3的文字特效--粒子效果文字动画 ...

  6. 融入动画技术的粒子效果文字动画交互应用

    写在前面 本次实现的交互系统是基于粒子系统的粒子文本效果.本次课程设计主要参考代码本色一书中的内容,系统应用中运用了 <代码本色> 第一章 向量.第二章 力.第四章 粒子系统等章节的动画技 ...

  7. html怎么把字做成动画效果,如何使用HTML5 css3实现粒子效果文字动画特效(附完整代码)...

    摘要 腾兴网为您分享:如何使用HTML5 css3实现粒子效果文字动画特效(附完整代码),学宝,小米社区,手机管家,神州专车等软件知识,以及小学英语点读机,便利宝,startos,工资宝,玩,大将军手 ...

  8. html5粒子效果,8款惊艳的HTML5粒子动画特效

    [导读] HTML5确实强大,很多时候我们可以利用HTML5中的新技术实现非常炫酷的粒子动画效果,粒子动画在HTML5应用中也是比较消耗本地资源的,尤其是CPU,但是有些HTML5粒子效果确实能给用户 ...

  9. android 矢量粒子动画,iOS CAEmitterLayer实现粒子发射动画效果

    iOS实现粒子发射动画效果图 动画效果用 CAEmitterLayer 实现.CAEmitterLayer 显示粒子发射动画,具体的粒子由 CAEmitterCell 封装.代码示例是展示 CAEmi ...

最新文章

  1. 全面理解Python中的类型提示(Type Hints)
  2. Basic Example of JMX Technology--转载
  3. 最短路径——迪杰斯特拉算法——图的数据结构
  4. 从输入URL到页面加载完成的过程中都发生了什么事情?
  5. Python 图形 GUI 库 pyqtgraph
  6. delphi7 安装 indy10.2.3
  7. windows入门Elasticsearch7.10(es)之3:本地集群搭建
  8. 域渗透——获取用户明文密码
  9. 日知录(九):PR视频剪辑Creo
  10. filter java 意思_在JAVA中filter有什么作用?
  11. matlab线性拟合
  12. ARM的开发步骤:让你思路更清晰
  13. 再掀融资潮 团购网仍后劲不足(团购现状分析)
  14. dell R720 单盘raid0配置
  15. flink流处理示例开发
  16. VMware Workstation 三种网络连接配置详解
  17. 帧率(FPS)计算的几种方法总结
  18. Python爬取笔趣阁小说,有趣又实用!
  19. python批量检索文献pubmed_如何使用PubMed高效检索文献
  20. [培训-DSP快速入门-3]:C54x DSP内存资源与内存空间分布

热门文章

  1. 常用的手机宽度 前端切图用 常用的手机尺寸
  2. 神经网络训练常见坑-新手如何优化调整训练神经网络
  3. 教你如何让windows系统的C盘空间变富裕,永远都不会用完。
  4. 小白白之青龙面板搭建
  5. 利用Kmeans聚类进行用户分层分析
  6. 关于用GetDIBits代替GetPixel效率低的问题
  7. Acer传奇Go电脑开机自动安装软件卡死怎么重装系统?
  8. 计算机管理为什么没有端口,Win7设备管理器没有端口选项的三大原因及解决措施...
  9. 长沙银河计算机中等职业学校图片,长沙银河中等职业学校
  10. 印度乘法口诀双位数乘法详解