Objective-c粒子动画

前面贴过几篇关于SpriteKit的案例文章,其中涉及到的动画都是材质类的图片切换或则常规的动画效果,没涉及到今天要说的粒子动画,今天说的粒子动画就是在游戏中实现更佳炫酷的效果必须使用的类,OC中粒子动画主要涉及到两个类,CAEmitterLayer,CAEmitterCell,第一个是动画的执行类,第二个是动画的实现类,虽只有两个类,属性也不多,但是想要理解这两个类,并且灵活运用它们还是有一定难度的。应为粒子动画在游戏开发中算是最难的技术了,当前比较火的游戏开发框架,大多粒子动画效果都是用工具制作,比如3dmax这样的工具,虽然oc把实现粒子动画的类优化得很容易很简单,但是难度还是有的,不好理解。我接下去的步骤就是先解释下这两个类,然后会贴上一个对每句代码都详细解释过的案例。

一、涉及类

1、CAEmitterLayer(粒子动画执行类,这里你把它想成是实现粒子动画的导演类)
/* The array of emitter cells attached to the layer. Each object must
* have the CAEmitterCell class. */
这个数组是这个层的附加发射器层, 每个对象必须至少有一个粒子类,
@property(nullable, copy) NSArray<CAEmitterCell *> *emitterCells;

2、CAEmitterCell(粒子类,这个类可以想成是粒子动画实现类,用它来实现粒子动画后,放入到CAEmitterLayer中去执行)

二、详细案例

 1 @interface SnowViewController ()
 2
 3 @end
 4
 5 @implementation SnowViewController
 6
 7 - (void)viewDidLoad
 8 {
 9     [super viewDidLoad];
10
11     flakeLayer = [CAEmitterLayer layer];
12
13
14     CGRect bounds = [[UIScreen mainScreen] bounds];
15
16     //下面是设置发射器在屏幕上的位置,
17     flakeLayer.emitterPosition = CGPointMake(bounds.size.width / 2, bounds.size.height/3);
18
19     /*下面是发射器的size,决定了粒子的出生位置范围。比如下面的设置为0,0那么所有的粒子出生轨迹起点都将是发射器的中心点,你可以想成是模拟器的中心点   可以把这个范围与emitterShape属性结合来想*/
20     flakeLayer.emitterSize = CGSizeMake(0,0);
21
22     // 发射模型决定出生粒子的运动轨迹显示的形状
23     flakeLayer.emitterShape =kCAEmitterLayerLine;//kCAEmitterLayerRectangle
24
25     //发射模式
26     flakeLayer.emitterMode    =kCAEmitterLayerSurface;// kCAEmitterLayerOutline
27
28
29     //申明一个粒子类
30     CAEmitterCell *flakeCell = [CAEmitterCell emitterCell];
31     //是个CGImageRef的对象,既粒子要展现的图片
32     flakeCell.contents = (id)[[UIImage imageNamed:@"FFFlake.png"] CGImage];
33     //每秒出生的粒子数量
34     flakeCell.birthRate = 100;
35     //生命周期 1.2秒之后消失
36     flakeCell.lifetime = 120.0;
37     //生命周期范围
38     flakeCell.lifetimeRange = 0.5;
39     //速度//粒子从出生到运动轨迹的终点速的速度,如果这里指设置很大那么屏幕的粒子就会增多,出生率就会加快
40     flakeCell.velocity = 100;
41     //速度范围
42     flakeCell.velocityRange = 10;
43     //粒子y方向的加速度分量--向 粒子y轴方向移动
44     flakeCell.xAcceleration = 10;
45     // upx-y平面的发射方向  ....>> emissionLatitude:发射的z轴方向的角度
46     flakeCell.emissionLongitude = -M_PI / 2;
47     // 发射器在一个范围内的随机发射角度,这里如果设置为0那么,发射器的角度就会固定,如果设置为圆周率,那么出生粒子的发射范围就会在360度范围内随机发射粒子角度
48     flakeCell.emissionRange = M_PI ;
49
50     //这里代表粒子出生后完成运动轨迹中带的效果,如果是0那么在生命周期内就会以平滑的形式移动,假如这里我们设置为
51     //360那么 在生命周期内它就会旋转的形式移动
52     flakeCell.spinRange        =0;
53
54
55     flakeCell.scale = 1.0;//缩放比例:
56     flakeCell.scaleSpeed = 0.1;//1.0;//缩放比例速度
57     flakeCell.scaleRange = 1.0;//缩放比例范围;
58
59     flakeCell.color = [[UIColor colorWithRed:0.6 green:0.6 blue:0.6 alpha:1.0] CGColor];//粒子的颜色
60     flakeCell.redRange = 1.0;//一个粒子的颜色red 能改变的范围;
61     flakeCell.redSpeed = 0.1;//粒子red在生命周期内的改变速度;
62     flakeCell.blueRange = 1.0;//一个粒子的颜色blue 能改变的范围
63     flakeCell.blueSpeed = 0.1;//粒子blue在生命周期内的改变速度
64     flakeCell.greenRange = 1.0;//个粒子的颜色green 能改变的范围;
65     flakeCell.greenSpeed = 0.1;//粒子green在生命周期内的改变速度;
66     flakeCell.alphaSpeed = -0.08;//粒子透明度在生命周期内的改变速度
67
68     flakeLayer.emitterCells = [NSArray arrayWithObject:flakeCell];//粒子发射的粒子
69
70      [self.view.layer insertSublayer:flakeLayer atIndex:0];
71
72 }
时间: 2024-10-10 05:20:29

Objective-c粒子动画的相关文章

7款让人惊叹的HTML5粒子动画特效

HTML5的很大一个优势就是可以更加便捷高效地制作网页粒子动画特效,特别是Canvas特性,可以实现在网页上绘制任何图形和动画.本文要分享7款让人惊叹的HTML5粒子动画特效,这些粒子特效都提供源代码下载供大家学习. 1.HTML5 Canvas粒子模拟效果 这是一款利用HTML5 Canvas模拟出来的30000个粒子动画,当你用鼠标在canvas画布上移动时,鼠标周围的一些粒子就会跟着你移动,并形成一定的图案,就像你在玩沙画一样,效果非常不错.这里,我们应用了一些HTML5的特性,让这个粒子

canvas学习之粒子动画

项目地址:http://pan.baidu.com/s/1ccTptc 粒子动画意思就是把一个图片粒子画,然后使用粒子作出动画效果,主要两个问题:一个图片如何粒子化,这里面我们使用canvas的getImageData(http://web.jobbole.com/87602/),还有一个是作出轨迹,让粒子按照既定轨迹来运行,我们使用tweet.js(http://www.zhangxinxu.com/study/201612/how-to-use-tween-js.html,) 下载项目后,执

vue-particles粒子动画插件的使用和爬坑出现垂直滚动条

1下载==>cnpm install vue-particles --save-dev 2引入 注册-->main.js//插件 import VueParticles from 'vue-particles' Vue.use(VueParticles) 在使用的时候外层必须要有一个id包裹(重要) 否则展示不出来 <template> <div class="maxnbox" ref="clcheight"> <!-- 插

第四篇、点赞的粒子动画

点赞动画 iOS自带了粒子引擎的类 CAEmitterLayer ,是一个粒子发射器系统,每个粒子都是 CAEmitterCell 的实例.可以查看它们分别有什么属性. 有两个小点,一个是 CAEmitterLayer 一些属性对 CAEmitterCell 有成倍作用,如 birthRate :另一个是没有明确的停止动画的方法,包括它的父类也没提供.可以想到的方法,除了把 layer 抹除掉之外,还可以将 CAEmitterLayer 的 birthRate 设置为0,这样每个 CAEmitt

particles.js粒子动画背景插件

particles.min.js 文件 /* ----------------------------------------------- /* Author : Vincent Garreau - vincentgarreau.com /* MIT license: http://opensource.org/licenses/MIT /* Demo / Generator : vincentgarreau.com/particles.js /* GitHub : github.com/Vi

UI基础--粒子动画

粒子发送器:CAEmitterLayer 粒子:CAEmitterCell 渐变图层:CAGradientLayer 添加代码: @interface RootViewController () @property (nonatomic, strong) CAEmitterLayer *emitterLayer; @end @implementation RootViewController -(CAEmitterLayer *)emitterLayer{ if (_emitterLayer)

canvas粒子文字动画教程

1,什么是canvas粒子动画 canvas粒子文字动画效果绚丽,实现的方法和难点主要是根据缓动函数来确定粒子的轨迹. 2.主要实现步骤 创建一个canvas,在canva上绘制文字或图片,然后获取像素的信息并生成一个粒子数组 var imageData = ctx.getImageData(0,0,canvas.width,canvas.height); ... var dotList = []; for(var x=0; x<imageData.width; x+=mass) { for(v

iOS动画之粒子效果

04.粒子动画 1.效果: 随机绘制一条路径,点击开始按钮,粒子动画 2.实现思路 1.搞个画板绘制路径,自定义view 2.给自定义view添加pan手势,和创建复制图层和圆形图层,只需要设置一次,在awakeFromNib方法中设置. // 添加pan手势 UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)]; [self addGes

使用HTML5 Canvas创建动态粒子网格动画

最近看到一个粒子网格动画挺炫的,自己也就做了一个,当背景挺不错的.CSDN不能上传超过2M的图片,所以就简单截了一个静态图片: 可以点击这里查看动画. 下面就开始说怎么实现这个效果吧: 首先当然是添加一个canvas了: <canvas id="canvas"></canvas> 下面是样式: <style> #canvas{ position: absolute; display: block; left:0; top:0; background: