CAEmitterLayer实现粒子效果

在iOS 5中,苹果引入了一个新的CALayer子类叫做CAEmitterLayerCAEmitterLayer是一个高性能的粒子引擎,被用来创建实时例子动画如:烟雾,火,雨等等这些效果。

CAEmitterLayer看上去像是许多CAEmitterCell的容器,这些CAEmitierCell定义了一个例子效果。你将会为不同的例子效果定义一个或多个CAEmitterCell作为模版,同时CAEmitterLayer负责基于这些模版实例化一个粒子流。一个CAEmitterCell类似于一个CALayer:它有一个contents属性可以定义为一个CGImage,另外还有一些可设置属性控制着表现和行为。我们不会对这些属性逐一进行详细的描述,你们可以在CAEmitterCell类的头文件中找到。

我们来举个例子。我们将利用在一圆中发射不同速度和透明度的粒子创建一个火爆炸的效果。清单6.13包含了生成爆炸的代码。图6.13是运行结果

清单6.13 用CAEmitterLayer创建爆炸效果

#import "ViewController.h"
#import <QuartzCore/QuartzCore.h>@interface ViewController ()@property (nonatomic, weak) IBOutlet UIView *containerView;@end@implementation ViewController- (void)viewDidLoad
{[super viewDidLoad];//create particle emitter layerCAEmitterLayer *emitter = [CAEmitterLayer layer];emitter.frame = self.containerView.bounds;[self.containerView.layer addSublayer:emitter];//configure emitteremitter.renderMode = kCAEmitterLayerAdditive;emitter.emitterPosition = CGPointMake(emitter.frame.size.width / 2.0, emitter.frame.size.height / 2.0);//create a particle templateCAEmitterCell *cell = [[CAEmitterCell alloc] init];cell.contents = (__bridge id)[UIImage imageNamed:@"Spark.png"].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;//add particle template to emitteremitter.emitterCells = @[cell];
}
@end

CAEMitterCell的属性基本上可以分为三种:

  • 这种粒子的某一属性的初始值。比如,color属性指定了一个可以混合图片内容颜色的混合色。在示例中,我们将它设置为桔色。
  • 例子某一属性的变化范围。比如emissionRange属性的值是2π,这意味着例子可以从360度任意位置反射出来。如果指定一个小一些的值,就可以创造出一个圆锥形
  • 指定值在时间线上的变化。比如,在示例中,我们将alphaSpeed设置为-0.4,就是说例子的透明度每过一秒就是减少0.4,这样就有发射出去之后逐渐小时的效果。

CAEmitterLayer的属性它自己控制着整个例子系统的位置和形状。一些属性比如birthRatelifetimecelocity,这些属性在CAEmitterCell中也有。这些属性会以相乘的方式作用在一起,这样你就可以用一个值来加速或者扩大整个例子系统。其他值得提到的属性有以下这些:

  • preservesDepth,是否将3D例子系统平面化到一个图层(默认值)或者可以在3D空间中混合其他的图层
  • renderMode,控制着在视觉上粒子图片是如何混合的。你可能已经注意到了示例中我们把它设置为kCAEmitterLayerAdditive,它实现了这样一个效果:合并例子重叠部分的亮度使得看上去更亮。如果我们把它设置为默认的kCAEmitterLayerUnordered,效果就没那么好看了.

                  图6.13 火焰爆炸效果

转载于:https://www.cnblogs.com/Free-Thinker/p/5362225.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/418699.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端学习(1861)vue之电商管理系统电商系统之设置背景色并在中央绘制登录盒子

1安装less_loader依赖 2安装less 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) logi…

Cocoa编程学习笔记一

Cocoa编程学习笔记一 一、Cocoa的起源 Mac OS X的窗口服务器与UNIX中的X窗口服务器具有相同的功能&#xff1a;从用户那里接受事件&#xff0c;并将时间转发给应用程序&#xff0c;将应用程序发过来的数据显示在屏幕上。NeXTSTEP内置了一套库和工具&#xff0c;让开发人员以一种…

beetl 时间输出格式化

https://www.oschina.net/question/204344_2218080

前端学习(1862)vue之电商管理系统电商系统之绘制默认头像

修改头像位置 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <templat…

万事开头难,用HTML写的第一个界面,收获颇多

很开心跟了叶老师学习和做项目&#xff0c;基础不好&#xff0c;前期他会帮你安排好学习路线和计划。前期没有项目做&#xff0c;叶老师先让我先学习jQuery&#xff0c;给我推荐了一些网站&#xff0c;叫我一边学习&#xff0c;一边写博客。其实很早就有想写博客的想法&#xf…

前端学习(1863)vue之电商管理系统电商系统之绘制登录表单区域

修改头像位置 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <templat…

$Android连续按返回键两次实现退出程序

思路&#xff1a;重写Activity的onKeyDown方法&#xff0c;判断按键是不是返回键&#xff0c;如果是&#xff0c;则再判断按下的时间和上次按下的时间之间的差值&#xff08;毫秒数&#xff09;是不是大于2000&#xff0c;如果不大于&#xff0c;则用finish()方法结束程序。Dem…

使用layer.tips实现鼠标悬浮时触发事件提示消息实现

https://www.cnblogs.com/Big-Boss/p/9531235.html /*** 服务商管理初始化*/ var invoice {id: "invoiceTable", //表格idseItem: null, //选中的条目table: null,layerIndex: -1 }; /*** 初始化表格的列*/ invoice.initColumn function () {return [{field: get…

前端学习(1864)vue之电商管理系统电商系统之绘制登录表单区域带icon的输入框

修改头像位置 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <templat…

mysql(2)—— 由笛卡尔积现象分析数据库表的连接

https://www.cnblogs.com/cdf-opensource-007/p/6507678.html

前端学习(1865)vue之电商管理系统电商系统之实现表单的数据绑定

修改头像位置 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <templat…

Solr数据不同步

Solr配置了集群&#xff0c;本地有253和254&#xff0c;2个独立的Solr服务。同一个页面的图片&#xff0c;刷新2次&#xff0c;图片地址不一样&#xff0c;最后查明&#xff0c;后台数据源Solr1和Solr2的数据不一致。第1步推测&#xff1a;本地缓存&#xff0c;删除浏览器缓存&…

Java中BigDecimal的8种舍入模式

http://www.blogjava.net/wangzc2001/archive/2010/12/17/340988.html

前端学习(1866)vue之电商管理系统电商系统之登录退出实现表单的数据验证

修改头像位置 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <templat…

HDU 1402 A * B Problem Plus FFT

A * B Problem Plus题目连接&#xff1a; http://acm.hdu.edu.cn/showproblem.php?pid1402 Description Calculate A * B. Input Each line will contain two integers A and B. Process to end of file. Note: the length of each integer will not exceed 50000. Output For…

前端学习(1867)vue之电商管理系统电商系统之登录退出实现表单的重置

修改头像位置 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <templat…

五种js判断是否为整数类型方式

https://www.cnblogs.com/yueguanguanyun/p/7255962.html

【原】搬家了,请移步

鉴于博客园缺乏教学管理能力&#xff0c;故移步到 www.t2code.com 博客主页&#xff1a;http://www.t2code.com/blog/index.shtml 我的博客&#xff1a; http://www.t2code.com/blog/home.shtml?createUserId3转载于:https://www.cnblogs.com/jerry1979/p/5379859.html

前端学习(1868)vue之电商管理系统电商系统之登录退出实现表单的预先认证

修改头像位置 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <templat…