CAEmitterLayer，粒子发射系统

关注

原创最新推荐文章于 2026-04-16 11:12:52 发布 1.7k 阅读 AI 写同款· GEO 优化 ›

ios 基于CAEmitterLayer的雪花，烟花，火焰，爱心等效果demo demo功能：基于CAEmitterLayer的雪花，烟花，火焰，爱心等效果。 demo说明：基于Core Animation的粒子发射系统，粒子用CAEmitterCell来初始化。粒子画在背景层盒边界上 demo截屏： demo代码说明： emitterPosition:发射位置 emitterSize:发射源的大小； emitterMode:发射模式阅读详情

#import "DGExplodeAnimationView.h"

#import <QuartzCore/QuartzCore.h>

@interface DGExplodeAnimationView()

@property (nonatomic, strong) CAEmitterLayer *emitterLayer;

@end

@implementation DGExplodeAnimationView

#pragma mark - Initial Function

- (void) StartUp {

self.clipsToBounds = NO;

self.userInteractionEnabled = NO;

CAEmitterCell *emitter = [CAEmitterCell emitterCell];

emitter.contents = (id)[UIImage imageNamed: @"Like-Sparkle"].CGImage;

emitter.color = [UIColor cyanColor].CGColor;

emitter.name = @"explosion";

emitter.alphaRange = 0.2f;

emitter.alphaSpeed = -1.f;

emitter.lifetime = 0.7f;

emitter.lifetimeRange = 0.3f;

emitter.birthRate = 0;

emitter.velocity = 40.0f;

emitter.velocityRange = 10.0f;

emitter.emissionRange = M_PI_4;

emitter.scale = 0.05f;

emitter.scaleRange = 0.02;

_emitterLayer = [CAEmitterLayer layer];

_emitterLayer.name = @"emitterLayer";

_emitterLayer.emitterShape = kCAEmitterLayerCircle;

_emitterLayer.emitterMode = kCAEmitterLayerOutline;

_emitterLayer.emitterPosition = self.center;

_emitterLayer.emitterSize = CGSizeMake(25, 0);

_emitterLayer.renderMode = kCAEmitterLayerOldestFirst;

_emitterLayer.masksToBounds = NO;

_emitterLayer.emitterCells = @[emitter];

_emitterLayer.frame = [UIScreen mainScreen].bounds;

[self.layer addSublayer: _emitterLayer];

_emitterLayer.emitterPosition = self.center;

}

#pragma mark - Overide

- (void) layoutSubviews {

[super layoutSubviews];

[self StartUp];

}

#pragma mark - Methods

- (void) animate {

dispatch_time_t delay = dispatch_time(DISPATCH_TIME_NOW, 0.2 * NSEC_PER_SEC);

dispatch_after(delay, dispatch_get_main_queue(), ^{

self.emitterLayer.beginTime = CACurrentMediaTime();

CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath: @"emitterCells.explosion.birthRate"];

ani.fromValue = @0;

ani.toValue = @500;

[_emitterLayer addAnimation: ani forKey: nil];

});

}

基于CAEmitterLayer做的点赞效果图：

CAEmitterCell

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

属性列表

属性名	作用
alphaRange	一个粒子的颜色alpha能改变的范围
alphaSpeed	粒子透明度在生命周期内的改变速度
birthrate	每秒发射的粒子数量
blueRange	一个粒子的颜色blue 能改变的范围
blueSpeed	粒子blue在生命周期内的改变速度
color	粒子的颜色
contents	是个CGImageRef的对象,既粒子要展现的图片
contentsRect	应该画在contents里的子rectangle
emissionLatitude	发射的z轴方向的角度
emissionLongitude	x-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方向的加速度分量

- 代码示例

<code class="language-swift hljs avrasm has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">let explosionCell           = CAEmitterCell()
explosionCell<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.name</span>          = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"explosion"</span>
explosionCell<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.alphaRange</span>    = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.10</span>
explosionCell<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.alphaSpeed</span>    = -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>
explosionCell<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.lifetime</span>      = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.7</span>
explosionCell<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.lifetimeRange</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.3</span>
explosionCell<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.birthRate</span>     = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>
explosionCell<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.velocity</span>      = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">40.00</span>
explosionCell<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.velocityRange</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10.00</span>
explosionCell<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.scale</span>         = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.03</span>
explosionCell<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.scaleRange</span>    = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.02</span>
explosionCell<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.contents</span>      = UIImage(named: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Sparkle"</span>)?<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.CGImage</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>

CAEmitterLayer

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

属性列表

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

代码示例

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">explosionLayer = CAEmitterLayer()
explosionLayer<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.name</span>          = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"emitterLayer"</span>
explosionLayer<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.emitterShape</span>  = kCAEmitterLayerCircle<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
explosionLayer<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.emitterMode</span>   = kCAEmitterLayerOutline<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
explosionLayer<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.emitterSize</span>   = CGSizeMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
explosionLayer<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.emitterCells</span>  = [explosionCell]
explosionLayer<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.renderMode</span>    = kCAEmitterLayerOldestFirst<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
explosionLayer<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.masksToBounds</span> = false
explosionLayer<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.position</span>      = CGPointMake(self<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.frame</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.size</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.width</span>/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.0</span>, self<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.frame</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.size</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.height</span>/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.0</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
explosionLayer<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.zPosition</span>     = -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
layer<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.addSublayer</span>(explosionLayer)</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>