在上几篇博客中,我们对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动画开发之五——炫酷的粒子效果的更多相关文章

  1. iOS动画进阶 - 实现炫酷的上拉刷新动效

    移动端訪问不佳,请訪问我的个人博客 近期撸了一个上拉刷新的小轮子.仅仅要遵循一个协议就能自己定义自己动效的上拉刷新和载入,我自己也写了几个动效进去,以下是一个比較好的动效的实现过程 先上效果图和git ...

  2. JParticles 2.0 发布,打造炫酷的粒子特效

    JParticles 2.0 发布,打造炫酷的粒子特效.不好意思哈,在这么繁花似锦的世界里,标题不得不取得吸引眼球一点哈,不然...还是不啰嗦了,我们进入正题吧 简单介绍一下 JParticles 2 ...

  3. 简直要逆天!超炫的 HTML5 粒子效果进度条

    我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack Rugile 基于 HTML5 Cavnas 编写的进度条效果.看着这么炫的 Loading 效果,即使让我多等一会也无妨:)你呢 ...

  4. css3 之炫酷的loading效果

    css3 之炫酷的loading效果 今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 js需要引入jquery 只用到了一点点js 先看效果图 html: ...

  5. 一个炫酷的Actionbar效果

    今天在网上看到一个炫酷的Actionbar效果,一个老外做的DEMO,目前很多流行的app已经加入了这个效果. 当用户初始进入该界面的时候,为一个透明的 ActiionBar ,这样利用充分的空间显示 ...

  6. iOS开发之 Lottie -- 炫酷的动效

    动效在软件开发中非常常见,炫酷的动画能提升应用的B格,然而由设计师的设计转化成程序猿GG的代码是个非常"痛苦"的过程.对于复杂动画,可能要花费很多时间去研究和实现.Lottie 的 ...

  7. Android开发之炫酷MD风格

    文章转自:一点点征服的 http://www.cnblogs.com/ldq2016/p/5217590.html 安卓开发中非常炫的效果集合 这几天开发的时候,想做一些好看而且酷炫的特效,于是又开始 ...

  8. >炫酷的计时器效果Canvas绘图与动画<

    >炫丽的计时器效果Canvas绘图与动画< 虽然我是学习java的,但是因为最近使用html5的关系,多学习了一下前端知识. 现在,我要介绍的计时器是十分炫酷的,使用画布完成. 喜欢htm ...

  9. 有了这个开源 Java 项目,开发出炫酷的小游戏好像不难?

    本文适合有 Java 基础知识的人群,跟着本文可学习和运行 Java 的游戏. 本文作者:HelloGitHub-秦人 HelloGitHub 推出的<讲解开源项目>系列,今天给大家带来一 ...

随机推荐

  1. mssql 2008 失败 需要重新启动计算机 的解决办法

    大致出错信息如下:RebootRequiredCheck 检查是否需要挂起计算机重新启动.挂起重新启动会导致安装程序失败. 失败 需要重新启动计算机.必须重新启动计算机才能安装 SQL Server. ...

  2. ASP.NET c#学习经验

    1.DataGrid自定义字段.<Column  <asp:BoundColumn DataField="khbh" HeaderText="客户编号&quo ...

  3. redux-simple 简化版的redux

    作为react的粉丝,当然要吐槽一下react组件通信问题.react的单向数据流是组件通信的一大阻碍,只允许父组件向子组件传值,子组件向父组件传值只能通过父组件向子组件传递回调函数实现.如果在深层次 ...

  4. 武汉科技大学ACM :1006: 华科版C语言程序设计教程(第二版)习题7.15

    Problem Description 输入n个字符串(n<=100),输出其中最长的串,如果有多个则取最先找到的那一个. Input 多组测试数据. 每组测试数据第一行包含一个整数n,表示一共 ...

  5. 高放的c++学习笔记之函数基础

    局部变量 函数里面的局部变量有普通的局部变量和局部静态变量两种. 普通局部变量变量就是正常定义在函数体内部的变量,如果返回局部变量的地址,以便于函数调用结束后还继续访问此变量的话,编译器会报warni ...

  6. web页面相关的一些常见可用字符介绍

    首先是一张图片,是一张一些字符以及想对应的HTML实体表示的对照图片.如下: 一.引号模样或内心的些字符 请选择该表格要呈现的字体: 字符以及HTML实体 描述以及说明 " " 这 ...

  7. Indy10 即时通讯Demo

    最近闲来无事,重新学习了Indy10,顺手写了一段即时通讯代码.与上次写的笔记有不同之处,但差别不大. 未研究过TCP打洞技术,所以下面的代码采用的是  客户端--服务器--客户端  模式,也就是服务 ...

  8. HAPROXY 配置项/配置实例

    HAPROXY 配置项/实例 常用配置选项: OPTION 选项: option httpclose :HAProxy会针对客户端的第一条请求的返回添加cookie并返回给客户端,客户端发送后续请求时 ...

  9. Mongodb增加权限管理

     前言: 随着列式存储理念的成熟,越来越多的开发者开始接纳mongodb,hbase这类大储存的分布式列式数据库.特别是mongodb的这种快速搭建,快速使用特点,使其得到更多人的青睐.本人主要通过官 ...

  10. ios对SQLite3的使用

    ios对SQLite3的使用 一.在Firefox中打开sqlite3(如果没有,选择工具->附加组件,添加即可)新建sqlite3数据库,Contacts, 建立一个members表,字段 i ...