iOS动画开发之五——炫酷的粒子效果
在上几篇博客中,我们对UIView层的动画以及iOS的核心动画做了介绍,基本已经可以满足iOS应用项目中所有的动画需求,如果你觉得那些都还不够炫酷,亦或是你灵光一现,想用UIKit框架写出一款炫酷的休闲游戏,那个有一个东西可以帮到你:iOS的粒子效果引擎。
一、粒子发射器
iOS中的粒子效果有两部分组成,一部分为发射器,设置例子发射的宏观属性,另一部分是粒子单元,用于设置相应的粒子属性。粒子发射器是基于Layer层,没错,又是Layer,他的全名叫做:
CAEmitterLayer。其中常用的属性如下:
@property(copy) NSArray *emitterCells;
粒子单元数组,例如你在绘制火焰的效果时,你可以创建两个单元,一个单元负责烟雾,一个单元负责火苗。
@property float birthRate;
粒子的创建速率,默认为1/s。
@property float lifetime;
粒子的存活时间。默认为1S。
@property CGPoint emitterPosition;
发射器在xy平面的中心位置
@property CGFloat emitterZPosition;
发射器在Z平面的位置
@property CGSize emitterSize;
发射器的尺寸大小
@property CGFloat emitterDepth;
发射器的深度,在某些模式下会产生立体效果
@property(copy) NSString *emitterShape;
发射器的形状,这个参数的几个系统字符串如下:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
CA_EXTERN NSString * const kCAEmitterLayerPoint __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0); //点的形状,粒子从一个点发出CA_EXTERN NSString * const kCAEmitterLayerLine __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//线的形状,粒子从一条线发出CA_EXTERN NSString * const kCAEmitterLayerRectangle __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//矩形形状,粒子从一个矩形中发出CA_EXTERN NSString * const kCAEmitterLayerCuboid __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//立方体形状,会影响Z平面的效果CA_EXTERN NSString * const kCAEmitterLayerCircle __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//圆形,粒子会在圆形范围发射CA_EXTERN NSString * const kCAEmitterLayerSphere __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//球型 |
@property(copy) NSString *emitterMode;
发射器的发射模式,参数如下:
|
1
2
3
4
5
6
7
8
|
CA_EXTERN NSString * const kCAEmitterLayerPoints __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//从发射器中发出CA_EXTERN NSString * const kCAEmitterLayerOutline __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//从发射器边缘发出CA_EXTERN NSString * const kCAEmitterLayerSurface __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//从发射器表面发出CA_EXTERN NSString * const kCAEmitterLayerVolume __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//从发射器中点发出 |
@property(copy) NSString *renderMode;
发射器渲染模式,参数如下:
|
1
2
3
4
5
6
7
8
9
10
|
CA_EXTERN NSString * const kCAEmitterLayerUnordered __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//这种模式下,粒子是无序出现的,多个发射源将混合CA_EXTERN NSString * const kCAEmitterLayerOldestFirst __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//这种模式下,声明久的粒子会被渲染在最上层CA_EXTERN NSString * const kCAEmitterLayerOldestLast __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//这种模式下,年轻的粒子会被渲染在最上层CA_EXTERN NSString * const kCAEmitterLayerBackToFront __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//这种模式下,粒子的渲染按照Z轴的前后顺序进行CA_EXTERN NSString * const kCAEmitterLayerAdditive __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//这种模式会进行粒子混合 |
@property BOOL preservesDepth;
是否开启三维空间效果
@property float velocity;
粒子的运动速度
@property float scale;
粒子的缩放大小
@property float spin;
粒子的旋转位置
@property unsigned int seed;
初始化随机的粒子种子
二、粒子单元
设置好了粒子发射器,我们还需要初始化一些粒子单元,设置具体粒子的属性,我们使用到的类是CAEmitterCell这个类。
+ (instancetype)emitterCell;
类方法创建发射单元
@property(copy) NSString *name;
设置发射单元的名称
@property(getter=isEnabled) BOOL enabled;
是否允许发射器渲染
@property float birthRate;
粒子的创建速率
@property float lifetime;
粒子的生存时间
@property float lifetimeRange;
粒子的生存时间容差
@property CGFloat emissionLatitude;
粒子在Z轴方向的发射角度
@property CGFloat emissionLongitude;
粒子在xy平面的发射角度
@property CGFloat emissionRange;
粒子发射角度的容差
@property CGFloat velocity;
粒子的速度
@property CGFloat velocityRange;
粒子速度的容差
@property CGFloat xAcceleration;
@property CGFloat yAcceleration;
@property CGFloat zAcceleration;
x,y,z三个方向的加速度
@property CGFloat scale;
@property CGFloat scaleRange;
@property CGFloat scaleSpeed;
缩放大小,缩放容差和缩放速度
@property CGFloat spin;
@property CGFloat spinRange;
旋转度与旋转容差
@property CGColorRef color;
粒子的颜色
@property float redRange;
@property float greenRange;
@property float blueRange;
@property float alphaRange;
粒子在rgb三个色相上的容差和透明度的容差
@property float redSpeed;
@property float greenSpeed;
@property float blueSpeed;
@property float alphaSpeed;
粒子在RGB三个色相上的变化速度和透明度的变化速度
@property(strong) id contents;
渲染粒子,可以设置为一个CGImage的对象
@property CGRect contentsRect;
渲染的范围
三、让我们来“火”一把
通过上面的介绍,我们来应用这些创造一团火,代码示例如下:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
@interface ViewController (){ CAEmitterLayer * _fireEmitter;//发射器对象}@end@implementation ViewController- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. self.view.backgroundColor=[UIColor blackColor]; //设置发射器 _fireEmitter=[[CAEmitterLayer alloc]init]; _fireEmitter.emitterPosition=CGPointMake(self.view.frame.size.width/2,self.view.frame.size.height-20); _fireEmitter.emitterSize=CGSizeMake(self.view.frame.size.width-100, 20); _fireEmitter.renderMode = kCAEmitterLayerAdditive; //发射单元 //火焰 CAEmitterCell * fire = [CAEmitterCell emitterCell]; fire.birthRate=800; fire.lifetime=2.0; fire.lifetimeRange=1.5; fire.color=[[UIColor colorWithRed:0.8 green:0.4 blue:0.2 alpha:0.1]CGColor]; fire.contents=(id)[[UIImage imageNamed:@"Particles_fire.png"]CGImage]; [fire setName:@"fire"]; fire.velocity=160; fire.velocityRange=80; fire.emissionLongitude=M_PI+M_PI_2; fire.emissionRange=M_PI_2; fire.scaleSpeed=0.3; fire.spin=0.2; //烟雾 CAEmitterCell * smoke = [CAEmitterCell emitterCell]; smoke.birthRate=400; smoke.lifetime=3.0; smoke.lifetimeRange=1.5; smoke.color=[[UIColor colorWithRed:1 green:1 blue:1 alpha:0.05]CGColor]; smoke.contents=(id)[[UIImage imageNamed:@"Particles_fire.png"]CGImage]; [fire setName:@"smoke"]; smoke.velocity=250; smoke.velocityRange=100; smoke.emissionLongitude=M_PI+M_PI_2; smoke.emissionRange=M_PI_2; _fireEmitter.emitterCells=[NSArray arrayWithObjects:smoke,fire,nil]; [self.view.layer addSublayer:_fireEmitter]; } |
效果如下:

看到效果了么?这次够炫酷了吧,改改其它属性,尽情的玩吧!
iOS动画开发之五——炫酷的粒子效果的更多相关文章
- iOS动画进阶 - 实现炫酷的上拉刷新动效
移动端訪问不佳,请訪问我的个人博客 近期撸了一个上拉刷新的小轮子.仅仅要遵循一个协议就能自己定义自己动效的上拉刷新和载入,我自己也写了几个动效进去,以下是一个比較好的动效的实现过程 先上效果图和git ...
- JParticles 2.0 发布,打造炫酷的粒子特效
JParticles 2.0 发布,打造炫酷的粒子特效.不好意思哈,在这么繁花似锦的世界里,标题不得不取得吸引眼球一点哈,不然...还是不啰嗦了,我们进入正题吧 简单介绍一下 JParticles 2 ...
- 简直要逆天!超炫的 HTML5 粒子效果进度条
我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack Rugile 基于 HTML5 Cavnas 编写的进度条效果.看着这么炫的 Loading 效果,即使让我多等一会也无妨:)你呢 ...
- css3 之炫酷的loading效果
css3 之炫酷的loading效果 今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 js需要引入jquery 只用到了一点点js 先看效果图 html: ...
- 一个炫酷的Actionbar效果
今天在网上看到一个炫酷的Actionbar效果,一个老外做的DEMO,目前很多流行的app已经加入了这个效果. 当用户初始进入该界面的时候,为一个透明的 ActiionBar ,这样利用充分的空间显示 ...
- iOS开发之 Lottie -- 炫酷的动效
动效在软件开发中非常常见,炫酷的动画能提升应用的B格,然而由设计师的设计转化成程序猿GG的代码是个非常"痛苦"的过程.对于复杂动画,可能要花费很多时间去研究和实现.Lottie 的 ...
- Android开发之炫酷MD风格
文章转自:一点点征服的 http://www.cnblogs.com/ldq2016/p/5217590.html 安卓开发中非常炫的效果集合 这几天开发的时候,想做一些好看而且酷炫的特效,于是又开始 ...
- >炫酷的计时器效果Canvas绘图与动画<
>炫丽的计时器效果Canvas绘图与动画< 虽然我是学习java的,但是因为最近使用html5的关系,多学习了一下前端知识. 现在,我要介绍的计时器是十分炫酷的,使用画布完成. 喜欢htm ...
- 有了这个开源 Java 项目,开发出炫酷的小游戏好像不难?
本文适合有 Java 基础知识的人群,跟着本文可学习和运行 Java 的游戏. 本文作者:HelloGitHub-秦人 HelloGitHub 推出的<讲解开源项目>系列,今天给大家带来一 ...
随机推荐
- 安全管理:IE6安全隐患重重 为何不离不弃
安全服务商Zscaler的报告称,尽管微软IE6曾遭受一系列强势攻击并且新出的IE版本有更强的安全性能,但IE6依然受到各企业的热捧. 尽管微软一直敦促用户部署浏览器更新(截止2010年八月就将满九年 ...
- javaScript 自定义事件、发布订阅设计模式
现在很多应用都允许用户根据自己的喜好订阅一些自己较为关注的信息,当应用更新了这些信息后将针对不同的订阅类型推送此类信息.例如xx招聘网,当你订阅了互联网IT技术相关分类的招聘信息推送后,当企业在该网站 ...
- Java直接插入算法
直接插入算法是将N个带排序的元素看做成一个有序表和一个无序表. 每次从无序表中取一个元素和有序表比较,重复N-1次完成排序. 直接上代码: package test; public class Tes ...
- Quartz.net使用记录
1.引入dll文件: nuget控制台:安装quartz:Install-Package Quartz 安装log4net:Install-Package log4net,这里使用log4net记录一 ...
- cocos2dx之触摸事件
要使精灵能够接收到触摸事件,无非要做三件事. 注册触摸事件; 接收触摸事件; 处理触摸事件. 下面就从这三点出发,来了解一下精灵如何响应触摸事件. 1.注册触摸事件 精灵类Poker继承Sprite和 ...
- linux入门。删除不用到内核,为boot分区释放空间
在终端中输入如下命令: dpkg --get-selections|grep linux-image 这时会列出系统中所有到内核. 你可以使用 uname -a 查看你当前使用到内核. 然后用 sud ...
- jquery上传控件个人使用
转了一篇jquery的上传控件使用博文,但是,经过测试貌似不行,自己研究了一下,效果实现.记下,以后使用. 下载“Uploadify”,官方版本为php的,很多文件不需要,删除带.php的文件. &l ...
- JQUERY1.9学习笔记 之基本过滤器(六) 页眉选择器
页眉选择器jQuery( ":header" ) 描述:选择页眉的所有标签,如 h1,h2, h3 等. <!DOCTYPE html><html lang=&q ...
- PHPCMS V9二次开发]自定义字段模型-文本组
phpcms v9,我们在做类似于酒店房型等类型的时候,需要用到文本组字段模型,但phpcms并未提供该模型.如下图所示效果: 展示效果如下: 步骤/方法 打开phpcms\modules\conte ...
- C++快速排序实现(quicksort)
quicksort:分治思想. 分解:数组A[p, r)被划分成两个子数组A[pq) 和 A[q+1, r),使得A[pq)中的每个元素小于等于A[q], A[q]也小于A[q+1r)中的每个元素.q ...