iOS中利用CAEmitterLayer实现粒子动画详解

前言

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

先上效果图给大伙瞧瞧

知识点

本文用了两大知识点

1.CAGradientLayer 创建渐变的背景色

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

代码详解

1.渐变背景色的生成

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

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

demo背景色代码

 //渐变色
 CAGradientLayer *gradientLayer = [CAGradientLayer layer];
 gradientLayer.frame = self.view.bounds;
 [self.view.layer addSublayer:gradientLayer];

 UIColor *lightColor = [UIColor colorWithRed:40.0 / 255.0 green:150.0 / 255.0 blue:200.0 / 255.0 alpha:1.0];

 UIColor *whiteColor = [UIColor colorWithRed:255.0 / 255.0 green:250.0 / 255.0 blue:250.0 / 255.0 alpha:1.0];
//可以设置多个colors,
 gradientLayer.colors = @[(__bridge id)lightColor.CGColor,(__bridge id)whiteColor.CGColor];
 //45度变色(由lightColor->white)
 gradientLayer.startPoint = CGPointMake(0, 0);
 gradientLayer.endPoint = CGPointMake(1, 1);

雪花粒子发射器

 CAEmitterCell *cell = [[CAEmitterCell alloc] init];
 //展示的图片
 cell.contents = (__bridge id _Nullable)([UIImage imageNamed:@"white"].CGImage);

 //每秒粒子产生个数的乘数因子,会和layer的birthRate相乘,然后确定每秒产生的粒子个数
 cell.birthRate = 2000;
 //每个粒子存活时长
 cell.lifetime = 5.0;
 //粒子生命周期范围
 cell.lifetimeRange = 0.3;
 //粒子透明度变化,设置为-0.4,就是每过一秒透明度就减少0.4,这样就有消失的效果,一般设置为负数。
 cell.alphaSpeed = -0.2;
 cell.alphaRange = 0.5;
 //粒子的速度
 cell.velocity = 40;
 //粒子的速度范围
 cell.velocityRange = 20;
 //周围发射的角度,如果为M_PI*2 就可以从360度任意位置发射
 //cell.emissionRange = M_PI*2;
 //粒子内容的颜色
 // cell.color = [[UIColor whiteColor] CGColor];

//设置了颜色变化范围后每次产生的粒子的颜色都是随机的
 cell.redRange = 0.5;
 cell.blueRange = 0.5;
 cell.greenRange = 0.5;

 //缩放比例
 cell.scale = 0.2;
 //缩放比例范围
 cell.scaleRange = 0.02;

 //粒子的初始发射方向
 cell.emissionLongitude = M_PI;
 //Y方向的加速度
 cell.yAcceleration = 70.0;
 //X方向加速度
 // cell.xAcceleration = 20.0;

 _emitterLayer = [CAEmitterLayer layer];

 //发射位置
 _emitterLayer.emitterPosition = CGPointMake(SCREEN_WIDTH/2.0, 0);
 //粒子产生系数,默认为1
 _emitterLayer.birthRate = 1;
 //发射器的尺寸
 _emitterLayer.emitterSize = CGSizeMake(SCREEN_WIDTH, 0);
 //发射的形状
 _emitterLayer.emitterShape = kCAEmitterLayerLine;
 //发射的模式
 _emitterLayer.emitterMode = kCAEmitterLayerLine;
 //渲染模式
 _emitterLayer.renderMode = kCAEmitterLayerOldestFirst;
 _emitterLayer.masksToBounds = NO;
 //_emitterLayer.zPosition = -1;
 _emitterLayer.emitterCells = @[cell];
//emitterView是自己创建的一个View
 [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种值,分别是点、线、矩形、立方体、圆形、球形,具体的实现效果自己可以体验下。
CA_EXTERN NSString * const kCAEmitterLayerPoint//点
 CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerLine//线
 CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerRectangle//矩形
 CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerCuboid//立方体
 CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerCircle//圆形
 CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerSphere//球形
 CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);

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

CA_EXTERN NSString * const kCAEmitterLayerPoints//从发射器中
 CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerOutline//边缘
 CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerSurface//表面
 CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerVolume//中点
 CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);

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

CA_EXTERN NSString * const kCAEmitterLayerUnordered//粒子是无序出现的,多个发射源将混合
 CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerOldestFirst//声明久的粒子会被渲染在最上层
 CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerOldestLast//年轻的粒子会被渲染在最上层
 CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerBackToFront//粒子的渲染按照Z轴的前后顺序进行
 CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAEmitterLayerAdditive//进行粒子混合
 CA_AVAILABLE_STARTING (10.6, 5.0, 9.0, 2.0);

Demo

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

总结

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

(0)

相关推荐

  • IOS 中动画的暂停与继续播放的详解

    IOS 中动画的暂停与继续播放的详解 在使用动画控制UI的时候,可能会碰到通过手势或其他方式要进行暂停正在进行中的动画,然后再继续.如手指按下时,暂停动画,手指离开时继续动画. 实现原理主要是通过UI的layer进行相关的控制. 暂停动画: - (void)pauselayer:(CALayer *)layer { CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil]; layer.s

  • 利用iOS开发实现翻转扑克牌动画的方法

    前言 本文主要给大家介绍的关于利用iOS开发实现翻转扑克牌动画的方法,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍吧. 动画效果 实现原理 实现原理就是创建三个扑克牌pockerView , 先在扑克牌上添加一个imageview,作为牌的背面.然后实现翻转动画,在翻转的时候将imageview移除,添加另一个imageview作为正面. 核心代码: 方法一: 翻转动画,内部实现还是方法二 + (void)transitionWithView:(UIView *)view dura

  • ios基于MJRefresh实现上拉刷新和下拉加载动画效果

    本文介绍了ios基于MJRefresh实现上拉刷新和下拉加载动画效果,分享给大家,具体如下: 目录 1. 头部刷新动画 2.尾部刷新动画 头部刷新动画 #import <MJRefresh/MJRefresh.h> @interface HZNormalHeader : MJRefreshGifHeader @end #import "HZNormalHeader.h" @implementation HZNormalHeader #pragma mark - 重写父类的方

  • iOS 实现简单的加载等待动画示例(思路与实现)

    先看下最后基本要实现的效果 总结一下自己的实现思路与所用到的类 1.这个肯定是要自定义的View类,起名为XDColorCircle吧,最后用的时候达到这样的效果 //创建XDColorCircle的实例化对象 XDColorCircle *circle=[[XDColorCircle alloc]initWithFrame:CGRectMake(0 ,100,self.view.frame.size.width,200)]; //添加到视图上展示 [self.view addSubview:c

  • IOS swift中的动画的实例详解

    IOS swift中的动画的实例详解 UIView的通用动画 let view = UIView(frame: CGRectMake(10.0, 10.0, 100.0, 40.0)) self.view.addSubview(view) view.backgroundColor = UIColor.lightGrayColor() // 位置改变 var frame = view.frame UIView.animateWithDuration(0.6, delay: 2.0, options

  • iOS 下拉刷新动画的实现实例

    先上完整的效果图: 接下去动画分步实现,首先先实现如下效果: 思路是这样的,在偏移值小于等于100的时候绘制一个矩形,当偏移值大于100的时候,底部直线变成曲线,主要是利用CAShapeLayer和UIBezierPath来实现,代码如下 #pragma mark - UIScrollViewDelegate -(void)scrollViewDidScroll:(UIScrollView *)scrollView { CGFloat height = -scrollView.contentOf

  • iOS中利用CAEmitterLayer实现粒子动画详解

    前言 你肯定见过很酷炫的iOS动画吧,例如微信的表情雨

  • IOS 中CALayer绘制图片的实例详解

    IOS 中CALayer绘制图片的实例详解 CALayer渲染内容图层.与UIImageView相比,不具有事件响应功能,且UIImageView是管理内容. 注意事项:如何使用delegate对象执行代理方法进行绘制,切记需要将delegate设置为nil,否则会导致异常crash. CALayer绘制图片与线条效果图: 代码示例: CGPoint position = CGPointMake(160.0, 200.0); CGRect bounds = CGRectMake(0.0, 0.0

  • iOS中setValue和setObject的区别详解

    网上关于setValue和setObject的区别的文章很多,说的并不准确,首先我们得知道: setObject:ForKey: 是NSMutableDictionary特有的:setValue:ForKey:是KVC的主要方法 话不多说,上代码: - (void)viewDidLoad { [super viewDidLoad]; //setObject和setvalue的区别 NSMutableDictionary *dic = [NSMutableDictionary dictionary

  • IOS 中KVC的使用方法实例详解

    IOS 中KVC的使用方法实例详解 KVC是Key Value Coding的缩写,意思是键值编码.在iOS中,提供了一种方法通过使用属性的名称(也就是Key)来间接访问对象的属性方法.说的有的拗口,实际上就是通过类定义我们可以看到类的各种属性,那么使用属性的名称我们就能访问到类实例化后的对象的这个属性值. 这个方法可以不通过getter/setter方法来访问对象的属性.因为一个类的成员变量如果没有提供getter/setter的话,外界就失去了对这个变量的访问渠道.而KVC则提供了一种访问的

  • IOS实战之自定义转场动画详解

    转场动画这事,说简单也简单,可以通过presentViewController:animated:completion:和dismissViewControllerAnimated:completion:这一组函数以模态视图的方式展现.隐藏视图.如果用到了navigationController,还可以调用pushViewController:animated:和popViewController这一组函数将新的视图控制器压栈.弹栈. 下图中所有转场动画都是自定义的动画,这些效果如果不用自定义动

  • 如何在iOS中高效的加载图片详解

    目录 前言 图片的渲染流程 DataBuffer SD源码分析 ImageBuffer 占用内存大小 Xcode测试 如何减少图像占用内存 向下采样 SD源码分析解码过程 选择正确的图片渲染格式 渲染格式 如何正确的选择渲染格式 减少后备存储器的使用 减少或者不使用 draw(rect:) 方法 如何在列表中加载图片 线程爆炸 总结 前言 在iOS开发中,图片(UIImage)是我们在开发中,占用手机内存比较大的对象,如果在运行过程中,内存占用过大,对电池寿命会造成影响,如果超过了内存占用的最大

  • iOS如何优雅地实现序列动画详解

    前言 我们的在做动效中经常会有这样的需求,A动画执行完,执行B动画,B动画执行完执行C动画这样的序列,比如如下效果: iOS 10之前,我们可能这样实现这个动画序列,实际上可能你现在的代码就是这样写的: UIView.animate()提供了一个完成block回调,我们可以用它来触发下一个动画.这样做,我们可以实现这个动画.正如你可以看到的,这坨代码的主要缺点是丑陋,几乎没有可读性. UIViewPropertyAnimator iOS10引入了UIViewPropertyAnimator ,基

  • iOS中视频播放器的简单封装详解

    前言 如果仅仅是播放视频两者的使用都非常简单,但是相比MediaPlayer,AVPlayer对于视频播放的可控制性更强一些,可以通过自定义的一些控件来实现视频的播放暂停等等.因此这里使用AVPlayer的视频播放. 视频播放器布局 首先使用xib创建CLAVPlayerView继承UIView用来承载播放器,这样我们在外部使用的时候,直接在控制器View或者Cell上添加CLAVPlayerView即可,至于播放器播放或者暂停等操作交给CLAVPlayerView来管理.下面来看一下CLAVP

  • iOS中捕获日志与异常示例详解

    前言 在平时自己调试的时候,可以直接连接电脑,直接在窗口中查看结果.但是在测试人员测试,或者灰度测试的时候,怎么才能拿到日志呢?最先想到的肯定是输出到本地文件,然后在需要的时候进行上传. 分享一段之前找到的方法,下面的代码提供了两个主要功能: – 把日志输出到文件中 – 捕捉异常信息 [解析都写在注释中了] 示例代码 - (void)redirectNSLogToDocumentFolder { //如果已经连接Xcode调试则不输出到文件 //该函数用于检测输出 (STDOUT_FILENO)

  • iOS中TableView如何统一数据源代理详解

    前言 TableView 是 iOS 应用程序中非常通用的组件,几乎每一个界面都有一个TableView,而我们许多的代码都和TableView有关系,比如数据展示.更新TableView,一些响应选择事件等,而这些大多都会通过其代理函数来实现,所以在VC中我们通常需要实现大量TableView的代理函数,如下面这样 func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat

随机推荐