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动画开发之五——炫酷的粒子效果相关推荐

  1. iOS动画系列之五:基础动画之缩放篇旋转篇Swift+OC

    这一篇主要介绍基础动画之缩放和旋转.这些基本操作分享完之后,我想想可以找个稍微复杂一点点的动画做做啦. 这篇继续基础篇,分享一下缩放和旋转.因为整体思路和平移基本上没有变化,加上源代码里面也有OC版本 ...

  2. html5基于Echarts制作3D炫酷世界地图地球制作,地图勾起动画,非常炫酷。

    ❉ html5基于echarts.js制作3D炫酷世界地图地球仪动画 `html5基于echarts.js制作3D炫酷世界地图地球仪动画,业务迁移热点显示动画,地图勾起动画,非常炫酷.ps:涉及跨域, ...

  3. Android开发——自定义炫酷PickerView惯性滚动魔改

    Android开发--自定义炫酷PickerView快速滚动魔改 最近由于课内压力的增加和安卓课设项目,故没有怎么刷acm题,基本上学校要训练也就去水一波,程序设计相关内容也鸽了. 由于从来没有做过开 ...

  4. 【CSS3】CSS3动画——前端的炫酷

    [CSS3]CSS3动画--前端的炫酷 博客说明 文章所涉及的部分资料来自互联网整理,当然还有自己个人的总结和看法,分享的目的在于共建社区和巩固自己.引用的资料如有侵权,请联系本人删除!幸好我在,感谢 ...

  5. 炫彩logo粒子效果

    前端开发whqet,csdn,王海庆,whqet,前端开发专家 昨天我们学习了利用requestAnimationFrame优化动画控制,然后就忍不住冲动,在fork别人codepen的基础上,实现了 ...

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

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

  7. 使用jQuery开发一个超酷的倒计时效果

    转自:http://www.gbtags.com/technology/jquerytutorial/20110105countdownjquery/ 使用jQuery开发一个超酷的倒计时效果 日期: ...

  8. 那些你不知道的炫酷按钮交互效果

    在日常开发中肯定都遇到过不少有按钮交互的地方,但你有用到什么炫酷的交互效果吗?日常开发中想必最多的就是点击按钮背景文字变色,阴影,按钮按下,加载中之类的效果,相对都比较平平无奇,都是一些按部就班的效果 ...

  9. [译] CSS 变量实现炫酷鼠标悬浮效果

    原文: Stunning hover effects with CSS variables 我的博客:[译] CSS 变量实现炫酷鼠标悬浮效果 我最近从Grover网站上的有趣的悬停动画中获得灵感.将 ...

最新文章

  1. HTML中字体的垂直排列
  2. 最常见的208道Java最新面试题及答案(一)
  3. 调查|73%的公司正使用存在漏洞的超期服役设备
  4. redis哨兵模式没有切换主机_Redis哨兵(Sentinel)模式
  5. Java多线程之后台线程不执行finally
  6. WebHubBot 网络爬虫
  7. 123 Python程序中的线程操作-协程
  8. 工作中,什么情况下应该负责到底?
  9. vue h5通过hbuilder打包为App的返回键兼容问题
  10. matlab 矩阵逻辑与,MATLAB矩阵的寻访与赋值
  11. 玩转HTML邮件格式-编写图文并茂邮件如此简单
  12. 数据分析师的发展前景
  13. 对象的属性名与属性值
  14. xmind做会议记录的方法
  15. 最后一个人可以挽救360和QQ的——马云
  16. 西安交通大学计算机基础期末考试,《大学计算机基础试题与答案》-西安交通大学.doc...
  17. 2021年5月份的月度总结
  18. 比MySQL快801倍,OLAP两大神器ClickHouse+Doris技术选型攻略分享
  19. Java培训出来,好找工作吗?
  20. 大一新生初体验——c语言实现贪吃蛇

热门文章

  1. Aoite 系列(03) - 一起来 Redis 吧!
  2. 法总统:英国若“无协议脱欧” 将成最大输家
  3. 转:经典论文翻译导读之《Google File System》
  4. Mysql 表字段(列)编辑 (增删改)
  5. AOP 注入失败的问题
  6. 运行JBoss 5.1.0 GA时出现Error installing to Instantiated:name=AttachmentStore state=Described错误的解决办法...
  7. BASE64每76个字符自动换行
  8. linux 磁盘管理上(分区操作,格式化文件,挂载和卸载)
  9. 【jFreeChart】开发流程
  10. 快乐的生活 2008-10-10 18:49:00