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…

前端学习(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…

前端学习(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…

前端学习(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…

前端学习(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…

前端学习(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…

前端学习(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…

前端学习(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…

前端学习(1869)vue之电商管理系统电商系统之配置axios发出登录请求

目录结构 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 <template><div c…

前端学习(1870)vue之电商管理系统电商系统之配置message全局弹框组件

目录结构 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 <template><div c…

前端学习(1871)vue之电商管理系统电商系统之路由导航守卫控制页面访问权限

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue Vue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{…

cd命令

当我们看到一个文件夹&#xff0c;想进去瞧一瞧是什么时&#xff0c;cd命令就能满足你的好奇心。 想进去gg里面瞧一瞧&#xff0c;ok。 eg&#xff1a;cd gg 结果如下 好了&#xff0c;进入到了gg里面&#xff0c;我们要看里面的dx我用到了ll命令&#xff0c;这个命令可以显示里…

强连通分量

强连通分量是有向图中的概念&#xff0c;就是每一个顶点到其它点都由路径&#xff0c;注意有方向. 有向图强连通分量&#xff1a;在有向图G中&#xff0c;如果两个顶点vi,vj间&#xff08;vi>vj&#xff09;有一条从vi到vj的有向路径&#xff0c;同时还有一条从vj到vi的有向…

前端学习(1872)vue之电商管理系统电商系统之完善登录之后的操作

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

前端学习(1873)vue之电商管理系统电商系统之实现退出功能

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

深入理解构造函数和原型链

使用构造函数初始化对象的过程function Base(){} //函数声明var basenew Base() //对象初始化执行Base()的过程&#xff1a; 创建一个名为Base的function对象&#xff1a; 执行function Base(){函数体}本质上相当于var Basenew Function("函数体")&#xff1b;所以Ba…

前端学习(1874)vue之电商管理系统电商系统之处理项目中eslint语法报错

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

Android一个自定义的进度环:ProgressChart

源代码及可执行文件下载地址:http://files.cnblogs.com/rainboy2010/ProgressChart.zip 因项目需要,自己尝试定义了一个进度环,用于显示进度,实现效果如下: 主要代码如下: public class ProgressChart extends View {private Context context;//圆环背景画笔private Paint pain…

前端学习(1876)vue之电商管理系统电商系统之整体布局

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

0414-复利计算再升级

目录 项目简介更新内容设计概要估算工作量任务分配github地址演示总结一、项目简介 项目名复利计算5.1版本号5.1开发语言java开发工具eclipse、IDEA、mysql更新内容功能完善开发人员颜文生、林集团二、更新内容 界面美化 改善交互 三、概要设计 加载图片美化界面&#xff0c;利…