查看: 2624|回复: 0

[IOS开发教程] iOS中利用CAEmitterLayer实现粒子动画详解

发表于 2017-8-2 08:00:02
太阳http代理AD

前言

你肯定见过很酷炫的iOS动画吧,例如微信的表情雨😘,红包雨,下雪,烟花等,但是有时候确不知道从何下手,iOS动画内容有很多,这次我们就来学习下酷炫的粒子动画。

先上效果图给大伙瞧瞧

知识点

本文用了两大知识点

1.CAGradientLayer 创建渐变的背景色

2.CAEmitterLayer、CAEmitterCell iOS中的粒子效果有两部分组成,一部分为发射器CAEmitterLayer,另一部分是粒子单元CAEmitterCell,用于设置相应的粒子属性。

代码详解

1.渐变背景色的生成


CAGradientLayer继承自CALayer,它主要功能是能实现渐变的颜色

  1. @property(copy) NSArray *colors 渐变颜色的数组
  2. @property(copy) NSArray *locations 渐变颜色的区间分布,
  3. locations的数组长度和color一致,一般不用设置,默认是nil,会平均分布。
  4. //[NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0],
  5. // [NSNumber numberWithFloat:0.3],
  6. // [NSNumber numberWithFloat:0.8],
  7. // [NSNumber numberWithFloat:1.0],
  8. // nil];
  9. @property CGPoint startPoint 映射locations中第一个位置,
  10. 用单位向量表示,比如(0,0)表示从左上角开始变化。默认值是(0.5,0.0)。
  11. @property CGPoint endPoint 映射locations中最后一个位置
  12. ,用单位向量表示,比如(1,1)表示到右下角变化结束。默认值是(0.5,1.0)。
复制代码

demo背景色代码

  1. //渐变色
  2. CAGradientLayer *gradientLayer = [CAGradientLayer layer];
  3. gradientLayer.frame = self.view.bounds;
  4. [self.view.layer addSublayer:gradientLayer];
  5. UIColor *lightColor = [UIColor colorWithRed:40.0 / 255.0 green:150.0 / 255.0 blue:200.0 / 255.0 alpha:1.0];
  6. UIColor *whiteColor = [UIColor colorWithRed:255.0 / 255.0 green:250.0 / 255.0 blue:250.0 / 255.0 alpha:1.0];
  7. //可以设置多个colors,
  8. gradientLayer.colors = @[(__bridge id)lightColor.CGColor,(__bridge id)whiteColor.CGColor];
  9. //45度变色(由lightColor->white)
  10. gradientLayer.startPoint = CGPointMake(0, 0);
  11. gradientLayer.endPoint = CGPointMake(1, 1);
复制代码

雪花粒子发射器

  1. CAEmitterCell *cell = [[CAEmitterCell alloc] init];
  2. //展示的图片
  3. cell.contents = (__bridge id _Nullable)([UIImage imageNamed:@"white"].CGImage);
  4. //每秒粒子产生个数的乘数因子,会和layer的birthRate相乘,然后确定每秒产生的粒子个数
  5. cell.birthRate = 2000;
  6. //每个粒子存活时长
  7. cell.lifetime = 5.0;
  8. //粒子生命周期范围
  9. cell.lifetimeRange = 0.3;
  10. //粒子透明度变化,设置为-0.4,就是每过一秒透明度就减少0.4,这样就有消失的效果,一般设置为负数。
  11. cell.alphaSpeed = -0.2;
  12. cell.alphaRange = 0.5;
  13. //粒子的速度
  14. cell.velocity = 40;
  15. //粒子的速度范围
  16. cell.velocityRange = 20;
  17. //周围发射的角度,如果为M_PI*2 就可以从360度任意位置发射
  18. //cell.emissionRange = M_PI*2;
  19. //粒子内容的颜色
  20. // cell.color = [[UIColor whiteColor] CGColor];
  21. //设置了颜色变化范围后每次产生的粒子的颜色都是随机的
  22. cell.redRange = 0.5;
  23. cell.blueRange = 0.5;
  24. cell.greenRange = 0.5;
  25. //缩放比例
  26. cell.scale = 0.2;
  27. //缩放比例范围
  28. cell.scaleRange = 0.02;
  29. //粒子的初始发射方向
  30. cell.emissionLongitude = M_PI;
  31. //Y方向的加速度
  32. cell.yAcceleration = 70.0;
  33. //X方向加速度
  34. // cell.xAcceleration = 20.0;
  35. _emitterLayer = [CAEmitterLayer layer];
  36. //发射位置
  37. _emitterLayer.emitterPosition = CGPointMake(SCREEN_WIDTH/2.0, 0);
  38. //粒子产生系数,默认为1
  39. _emitterLayer.birthRate = 1;
  40. //发射器的尺寸
  41. _emitterLayer.emitterSize = CGSizeMake(SCREEN_WIDTH, 0);
  42. //发射的形状
  43. _emitterLayer.emitterShape = kCAEmitterLayerLine;
  44. //发射的模式
  45. _emitterLayer.emitterMode = kCAEmitterLayerLine;
  46. //渲染模式
  47. _emitterLayer.renderMode = kCAEmitterLayerOldestFirst;
  48. _emitterLayer.masksToBounds = NO;
  49. //_emitterLayer.zPosition = -1;
  50. _emitterLayer.emitterCells = @[cell];
  51. //emitterView是自己创建的一个View
  52. [self.emitterView.layer addSublayer:_emitterLayer];
复制代码

代码中都有注释,这里进行简单的解释

CAEmitterCell粒子单元

  • contents 一般放一张图片,是我们粒子要展示的内容
  • birthRate 每秒粒子产生个数的乘数因子,会和layer的birthRate相乘, 然后确定每秒产生的粒子个数
  • lifetimeRange 所有的range属性都是你设置的属性值加减它后得到一个范围,例如cell.lifetime=5.0, cell.lifetimeRange = 1.0; 那么粒子的存活时间就是[4.0,6.0];
  • color 粒子内容的颜色,更改后粒子会变色
  • redRange,blueRange,greenRange 设置了颜色变化范围后会产生随机的颜色,这样粒子就会是五颜六色的了
  • scale 粒子缩放比例,我们看到的烟花粒子就是缩放比例很小得到的,你可以用任意图,然后缩放比例设置很小,就可以得到很小的粒子

CAEmitterLayer发射器

  • emitterCells 粒子单元数组,你可以创建两个单元,负责不同的效果。
  • emitterPosition 发射位置
  • birthRate 粒子产生系数,默认为1,想关掉就设为0,这样就没有粒子产生了,demo中的暂停效果就是这么实现的。
  • emitterSize 发射器的尺寸
  • emitterShape 发射的形状,有6种值,分别是点、线、矩形、立方体、圆形、球形,具体的实现效果自己可以体验下。
  1. CA_EXTERN NSString * const kCAEmitterLayerPoint//点
  2. CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
  3. CA_EXTERN NSString * const kCAEmitterLayerLine//线
  4. CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
  5. CA_EXTERN NSString * const kCAEmitterLayerRectangle//矩形
  6. CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
  7. CA_EXTERN NSString * const kCAEmitterLayerCuboid//立方体
  8. CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
  9. CA_EXTERN NSString * const kCAEmitterLayerCircle//圆形
  10. CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
  11. CA_EXTERN NSString * const kCAEmitterLayerSphere//球形
  12. CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
复制代码

emitterMode 发射的模式,有4种值,分别是

  1. CA_EXTERN NSString * const kCAEmitterLayerPoints//从发射器中
  2. CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
  3. CA_EXTERN NSString * const kCAEmitterLayerOutline//边缘
  4. CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
  5. CA_EXTERN NSString * const kCAEmitterLayerSurface//表面
  6. CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
  7. CA_EXTERN NSString * const kCAEmitterLayerVolume//中点
  8. CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
复制代码

renderMode 渲染模式,有5种取值,分别是(我更改体验了下,暂没找出啥不同😄)

  1. CA_EXTERN NSString * const kCAEmitterLayerUnordered//粒子是无序出现的,多个发射源将混合
  2. CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
  3. CA_EXTERN NSString * const kCAEmitterLayerOldestFirst//声明久的粒子会被渲染在最上层
  4. CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
  5. CA_EXTERN NSString * const kCAEmitterLayerOldestLast//年轻的粒子会被渲染在最上层
  6. CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
  7. CA_EXTERN NSString * const kCAEmitterLayerBackToFront//粒子的渲染按照Z轴的前后顺序进行
  8. CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
  9. CA_EXTERN NSString * const kCAEmitterLayerAdditive//进行粒子混合
  10. CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
复制代码

Demo

demo中的烟花实现的就是更改了发射形状为圆形获得的,雪花发射形状改为圆形得到下图的样子,更多的自己去探索吧,有什么问题请留言探讨,共同进步,最后奉上Demo地址,大家也可以通过本地下载进行学习。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对程序员之家的支持。



太阳http代理AD
回复

使用道具 举报