当前位置：首页 > news >正文

HarmonyOS 6 ArkUI 粒子动画（Particle）动态发射器控制使用文档

news 2026/5/9 12:52:43

文章目录

- 动态发射器控制核心说明
- - 1. 作用
  - 2. EmitterProperty 结构
- 示例代码逐模块解析
- - 1 状态变量定义（动态发射器核心）
  - 2 粒子基础配置
  - - 对应功能：
  - 3 颜色动画配置
  - 4 动态发射器绑定
  - 5 页面布局
- 运行效果
- 完整代码
- 运行效果如图，从中间发散： ![](https://i-blog.csdnimg.cn/img_convert/e4e08699281566bccd43a372f82a1396.png)
- 总结

动态发射器控制核心说明

1. 作用

.emitter(emitterProperties: Array<EmitterProperty>)用于动态更新粒子发射器属性，无需重建粒子组件，即可实时修改：

发射速率（emitRate）
发射器位置（position）
发射器尺寸（size）

2. EmitterProperty 结构

参数	含义
index	粒子发射器索引（对应 particles 数组下标）
emitRate	每秒发射粒子数量
position	发射器坐标 {x, y}
size	发射器区域尺寸 {width, height}

示例代码逐模块解析

1 状态变量定义（动态发射器核心）

@StateemitterProperties:Array<EmitterProperty>=[{index:0,// 绑定第 0 个粒子发射器emitRate:100,// 动态发射速率position:{x:60,y:80},// 动态位置size:{width:200,height:200}// 动态区域大小}];

@State：响应式状态，修改变量自动同步更新粒子发射器
index: 0：关联particles[0]的发射器
支持同时控制多个发射器

2 粒子基础配置

emitter:{particle:{type:ParticleType.POINT,// 圆点粒子config:{radius:5},// 半径5count:400,// 最大粒子数400lifetime:-1// 无限生命周期},emitRate:10,// 默认发射速率position:[0,0],// 默认位置shape:ParticleEmitterShape.CIRCLE// 圆形发射器}

对应功能：

粒子类型：圆点（POINT）
无限生命周期：lifetime: -1粒子永久存在
发射器形状：圆形（CIRCLE）
默认发射速度：10个/秒（可被动态属性覆盖）

3 颜色动画配置

color:{range:[Color.Red,Color.Yellow],// 初始颜色随机updater:{type:ParticleUpdater.CURVE,config:[{白 → 粉,0-3000ms},{粉 → 橙,3000-5000ms},{橙 → 粉,5000-8000ms}]}}

粒子颜色随时间三段式渐变
符合官方曲线更新器标准用法

4 动态发射器绑定

Particle({...}).width(300).height(300).emitter(this.emitterProperties)// 绑定动态发射器

通过.emitter()将状态变量与粒子发射器关联
状态变量变化 →实时驱动粒子发射属性更新

5 页面布局

Stack(){Text().width(300).height(300).backgroundColor(Color.Black)// 黑色背景Particle(...)}.width('100%').height('100%').align(Alignment.Center)

居中展示 300x300 粒子动画区域
黑色背景提升粒子视觉效果

运行效果

黑色背景上生成无限生命周期的圆点粒子
粒子从圆形区域发射
颜色动态渐变：白 → 粉 → 橙 → 粉
发射器属性由@State变量动态控制
粒子持续发射、永久存在、颜色流畅变化

完整代码

@Entry@Componentstruct ParticleExample4{@StateemitterProperties:Array<EmitterProperty>=[{index:0,emitRate:100,position:{x:60,y:80},size:{width:200,height:200}}];build(){Stack(){Text().width(300).height(300).backgroundColor(Color.Black)Particle({particles:[{emitter:{particle:{type:ParticleType.POINT,// 粒子类型config:{radius:5// 圆点半径},count:400,// 粒子总数lifetime:-1// 粒子的生命周期，-1表示粒子生命周期无限大},emitRate:10,// 每秒发射粒子数position:[0,0],// 粒子发射位置shape:ParticleEmitterShape.CIRCLE// 发射器形状},color:{range:[Color.Red,Color.Yellow],// 初始颜色范围updater:{type:ParticleUpdater.CURVE,// 变化方式为曲线变化config:[{from:Color.White,to:Color.Pink,startMillis:0,endMillis:3000,curve:Curve.EaseIn},{from:Color.Pink,to:Color.Orange,startMillis:3000,endMillis:5000,curve:Curve.EaseIn},{from:Color.Orange,to:Color.Pink,startMillis:5000,endMillis:8000,curve:Curve.EaseIn},]}},},]}).width(300).height(300).emitter(this.emitterProperties)}.width('100%').height('100%').align(Alignment.Center)}}