iOS简单粒子动画:落叶,火焰

CAEmitterLayer简介:
CAEmitterLayer(粒子发射器)继承自CALayer,提供了一个基于Core Animation的粒子发射系统,粒子用CAEmitterCell来初始化,一个单独的CAEmitterLayer可同时支持多个CAEmitterCell。

简单来说CAEmitterLayer就是发射器,可以设置位置、大小、形状等属性;CAEmitterCell就是发射出来的粒子,可以设置粒子图片,速度,旋转等属性。一个CAEmitterLayer可以同时发射多种不同的CAEmitterCell。

CAEmitterLayer属性:
emitterCells:CAEmitterCell对象的数组,用于把粒子投放到layer上。
birthRate:粒子产生速度,默认1个每秒。
lifetime:粒子纯在时间,默认1秒。
emitterPosition:发射器在xy平面的中心位置。
emitterZPosition:发射器在z平面的位置。
preservesDepth:是否开启三维效果。
velocity:粒子运动速度。
scale:粒子的缩放比例。
spin:自旋转速度。
seed:用于初始化随机数产生的种子。
emitterSize:发射器的尺寸。
emitterDepth:发射器的深度。
emitterShape:发射器的形状
NSString * const kCAEmitterLayerPoint;//点的形状,粒子从一个点发出
NSString * const kCAEmitterLayerLine;//线的形状,粒子从一条线发出
NSString * const kCAEmitterLayerRectangle;//矩形形状,粒子从一个矩形中发出
NSString * const kCAEmitterLayerCuboid;//立方体形状,会影响Z平面的效果
NSString * const kCAEmitterLayerCircle;//圆形,粒子会在圆形范围发射
NSString * const kCAEmitterLayerSphere;//球型
emitterMode:发射器发射模式
NSString * const kCAEmitterLayerPoints;//从发射器中发出
NSString * const kCAEmitterLayerOutline;//从发射器边缘发出
NSString * const kCAEmitterLayerSurface;//从发射器表面发出
NSString * const kCAEmitterLayerVolume;//从发射器中点发出
renderMode:发射器渲染模式
NSString * const kCAEmitterLayerUnordered;//粒子无序出现
NSString * const kCAEmitterLayerOldestFirst;//声明久的粒子会被渲染在最上层
NSString * const kCAEmitterLayerOldestLast;//年轻的粒子会被渲染在最上层
NSString * const kCAEmitterLayerBackToFront;//粒子的渲染按照Z轴的前后顺序进行
NSString * const kCAEmitterLayerAdditive;//粒子混合

CAEmitterCell属性:
emitterCell:初始化方法。
name:粒子的名字。
color:粒子的颜色。
enabled:粒子是否渲染。
contents:渲染粒子,是个CGImageRef的对象,即粒子要展示的图片。
contentsRect:渲染范围。
birthRate:粒子产生速度。
lifetime:生命周期。
lifetimeRange:生命周期增减范围。
velocity:粒子运动速度。
velocityRange:速度范围。
spin:粒子旋转速度。
spinrange:粒子旋转速度范围。
scale:缩放比例。
scaleRange:缩放比例范围。
scaleSpeed:缩放比例速度。
alphaRange::一个粒子的颜色alpha能改变的范围。
alphaSpeed::粒子透明度在生命周期内的改变速度。
redRange:一个粒子的颜色red能改变的范围。
redSpeed:粒子red在生命周期内的改变速度。
blueRange:一个粒子的颜色blue能改变的范围。
blueSpeed:粒子blue在生命周期内的改变速度。
greenRange:一个粒子的颜色green能改变的范围。
greenSpeed:粒子green在生命周期内的改变速度。
xAcceleration:粒子x方向的加速度分量。
yAcceleration:粒子y方向的加速度分量。
zAcceleration:粒子z方向的加速度分量。
emissionRange:粒子发射角度范围。
emissionLongitude:粒子在xy平面的发射角度。
emissionLatitude:发射的z轴方向的发射角度。

下面来实现简单的落叶动画


落叶.gif
CAEmitterLayer *leafEmitter = [CAEmitterLayer layer];
    [self.view.layer addSublayer:leafEmitter];
    
    leafEmitter.emitterPosition = CGPointMake(self.view.bounds.size.width/2, 0);//发射器中心点
    leafEmitter.emitterSize = CGSizeMake(self.view.bounds.size.width, 0);//发射器大小,因为emitterShape设置成线性所以高度可以设置成0,
    
    leafEmitter.emitterShape = kCAEmitterLayerLine;//发射器形状为线性
    leafEmitter.emitterMode = kCAEmitterLayerOutline;//从发射器边缘发出

    NSMutableArray *array = [NSMutableArray array];//CAEmitterCell数组,存放不同的CAEmitterCell,我这里准备了四张不同形态的叶子图片。
    for (int i = 0; i<4; i++) {
        NSString *imageName = [NSString stringWithFormat:@"叶子%d",i];
        
        CAEmitterCell *leafCell = [CAEmitterCell emitterCell];
        leafCell.birthRate = 2;//粒子产生速度
        leafCell.lifetime = 50;//粒子存活时间
        
        leafCell.velocity = 10;//初始速度
        leafCell.velocityRange = 5;//初始速度的差值区间,所以初始速度为5~15,后面属性range算法相同
        
       leafCell.yAcceleration = 2;//y轴方向的加速度,落叶下飘只需要y轴正向加速度。
        
        leafCell.spin = 1.0;//粒子旋转速度
        leafCell.spinRange = 2.0;//粒子旋转速度范围
        
        leafCell.emissionRange = M_PI;//粒子发射角度范围
        
        leafCell.contents = (id)[[UIImage imageNamed:imageName] CGImage];//粒子图片
        
        leafCell.scale = 0.3;//缩放比例
       leafCell.scaleRange = 0.2;//缩放比例
        
        
        [array addObject:leafCell];
    }
    
    pageEmitter.emitterCells = array;//设置粒子组

下面是实现火焰效果

火焰.gif
    CAEmitterLayer *fireEmitter = [CAEmitterLayer layer];
    [self.view.layer addSublayer:fireEmitter];
    
    fireEmitter.emitterPosition = CGPointMake(self.view.bounds.size.width/2, self.view.bounds.size.height-60);
    fireEmitter.emitterSize = CGSizeMake(self.view.bounds.size.width, 0);
    
    fireEmitter.emitterShape = kCAEmitterLayerLine;
    fireEmitter.emitterMode = kCAEmitterLayerOutline;
    fireEmitter.renderMode = kCAEmitterLayerAdditive;//混合渲染效果

    NSString *imageName = @"火焰";
    
    CAEmitterCell *fireCell = [CAEmitterCell emitterCell];
    fireCell.birthRate = 15;
    fireCell.lifetime = 6;
    
    fireCell.velocity = 10;
    fireCell.velocityRange = 10;
    
    fireCell.emissionRange = 0;
    
    fireCell.contents = (id)[[UIImage imageNamed:imageName] CGImage];
    
    fireCell.scale = 0.5;
    fireCell.scaleRange = 0.2;
    
    fireCell.alphaSpeed = -0.2;//透明度改变速度

    fireEmitter.emitterCells = @[fireCell];

关于emissionRange,用一副图说明:


图.png

简单效果完成,当然要做出更加逼真精美的动画效果还是要调试各个参数。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容