代码编织梦想

CAEmitterLayer(粒子发生器)

一、基本简介
  • CAEmitterLayer是CALayer的一个子类,和CAEmitterCell一起使用可以创造出多样的动画效果。
  • CAEmitterLayer主要用于实现基于Core Animation的粒子发生器系统。
  • 在粒子系统中,CAEmitterLayer负责发射粒子(当然粒子也可以发射粒子),而这些所谓的粒子,就是CAEmitterCell,我们可以将CAEmitterLayer比作是CAEmitterCell的容器,它会按照你的设置来以不同的样式不断产生粒子,也就是CAEmitterCell。
  • CAEmitterLayer决定了粒子从什么样的几何特性上发射出来,这个几何特性包括了位置,形状,大小。另外还有一些渲染相关的特性。另外的一些属性是CAEmitterLayer和CAEmiiterCell都有的,CAEmitterLayer的这些属性会作为CAEmitterCell相同属性的系数。
  • CAEmitterCell则决定了粒子自身的一些特征,例如速度,加速度,发射的范围,颜色等等。这些属性大多是以“中间值”配合一个范围值的方式来表示的。
二、CAEmitterLayer的属性

CAEmitterLayer类提供了一个粒子发射器系统为核心的动画。这些粒子是由CAEmitterCell组成的实例,它相当于一个管理者,来管理 CAEmitterCell的发射的一些细节,比如发射的位置,发射形状等。

属性作用
emitterPosition发射位置
emitterSize发射源的大小
emitterMode发射模式
emitterShape发射源的形状
renderMode渲染模式
birthRate粒子产生系数,默认1.0
emitterCells装着CAEmitterCell对象的数组,被用于把粒子投放到layer上
emitterDepth决定粒子形状的深度联系
emitterZposition发射源的z坐标位置
lifetime粒子生命周期
scale粒子的缩放比例
seed用于初始化随机数产生的种子
spin自旋转速度
velocity粒子速度
三、CAEmitterCell 的属性

CAEmitterCell是粒子发射系统里的粒子,用CAEmitterCell来定义你所需要的粒子的样式,图片,颜色,方向,运动,缩放比例和生命周期等。

属性作用
alphaRange一个粒子的颜色alpha能改变的范围
alphaSpeed粒子透明度在生命周期内的改变速度
birthrate每秒发射的粒子数量
blueRange一个粒子的颜色blue 能改变的范围
blueSpeed粒子blue在生命周期内的改变速度
color粒子的颜色
contents是个CGImageRef的对象,既粒子要展现的图片
contentsRect应该画在contents里的子rectangle
emissionLatitude发射的z轴方向的角度
emissionLongitudex-y平面的发射方向
emissionRange周围发射角度
emitterCells粒子发射的粒子的数组
enabled粒子是否被渲染
greenrange一个粒子的颜色green 能改变的范围
greenSpeed粒子green在生命周期内的改变速度
lifetime生命周期
lifetimeRange生命周期范围 lifetime= lifetime(+/-) lifetimeRange
magnificationFilter增加自己的大小
minificatonFilter减小自己的大小
minificationFilterBias减小大小的因子
name粒子的名字
redRange一个粒子的颜色red 能改变的范围
redSpeed粒子red在生命周期内的改变速度
scale缩放比例
scaleRange缩放比例范围
scaleSpeed缩放比例速度
spin子旋转角度
spinrange子旋转角度范围
velocity速度
velocityRange速度范围
xAcceleration粒子x方向的加速度分量
yAcceleration粒子y方向的加速度分量
zAcceleration粒子z方向的加速度分量

“红包雨”的实现

	// 设置CAEmitterLayer
    self.rainLayer = [CAEmitterLayer layer];
    // 降落区域的方位
    self.rainLayer.frame = self.view.bounds;
    // 在背景图上添加粒子图层
    [self.view.layer addSublayer:self.rainLayer];
    
    // 发射形状:线性
    self.rainLayer.emitterShape = kCAEmitterLayerLine;
    self.rainLayer.emitterMode = kCAEmitterLayerSurface;
    // 指定发射源的大小
    self.rainLayer.emitterSize = self.view.frame.size;
    // 指定发射源的位置
    self.rainLayer.emitterPosition = CGPointMake(self.view.bounds.size.width * 0.5, -10);
    
    // 配置cell
    CAEmitterCell * snowCell = [CAEmitterCell emitterCell];
    snowCell.contents = (id)[[UIImage imageNamed:@"hongbao.png"] CGImage];
    // 每秒多少个
    snowCell.birthRate = 1.0;
    // 存活时间
    snowCell.lifetime = 30;
    // 运动速度
    snowCell.speed = 2;
    // 初速度,因为动画属于落体效果,只需要设置它在y方向上的加速度
    snowCell.velocity = 10.f;
    // 初速度范围
    snowCell.velocityRange = 10.f;
    // y轴方向的加速度
    snowCell.yAcceleration = 60;
    // 图片缩放比例
    snowCell.scale = 0.05;
    snowCell.scaleRange = 0.f;
    
    // 开始动画:添加到图层上
    self.rainLayer.emitterCells = @[snowCell];
  • 效果展示
    在这里插入图片描述

完整示例传送门

CAEmitterLayer之实现“红包雨”效果

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接: https://blog.csdn.net/Forever_wj/article/details/107776353

Html移动端红包雨功能页面实现-爱代码爱编程

实习的效果如下: 具体代码如下 html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi

Android 仿微信表情雨 、红包雨 支持资源回收再利用-爱代码爱编程

Github 项目:https://github.com/JantHsueh/EmojiRain 为了后续能及时看到更新,建议star一下,欢迎issue 表情雨 ViewGroup 微信聊天中的表情雨效果一样。 相比于其他项目的优点: 本项目使用了资源缓存复用机制,在无限循环中,不会出现占用内存增长的问题,所以不会GC(除非),更流畅提供了丰富的

JS——红包雨(抢红包)-爱代码爱编程

JS实现红包雨 这里只是一个效果的实现,没有添加更多复杂的业务逻辑,方便直接拿来使用 PS.该版本会出现卡顿的情况,暂时还未解决,所以重新使用css新属性实现了一个:https://blog.csdn.net/baidu_41604826/article/details/103494543 页面 <!DOCTYPE html> <

QuartzCore(一)CALayer-爱代码爱编程

文章目录 一、概述二、 layer是什么三、layer的作用1. 管理视觉内容2. 维护和处理视觉内容的一些信息四、layre的属性和CAMediaTiming协议五、layer和view的关系六、CALayer1. 认识CALayer2. CALayer API2.1. Layer creation and initialization2.2 P

iOS CALayer CABasicAnimation以及CATransaction-爱代码爱编程

1. 概述 上文简单讲述了CALayer的概念以及一些属性,针对于Layer,除了其展示样式,我们更注重它的动画,本篇文章及本专栏的后续文章将围绕Layer的核心动画进行探究。 本文首先看一下CALayer的基础动画类CABasicAnimation以及CATransaction的使用。 2.  CALayer基础动画 CALayer基础动画类为C