文章目录
- 动态发射器控制核心说明
- 1. 作用
- 2. EmitterProperty 结构
- 示例代码逐模块解析
- 1 状态变量定义（动态发射器核心）
- 2 粒子基础配置
- 对应功能：
- 3 颜色动画配置
- 4 动态发射器绑定
- 5 页面布局
- 运行效果
- 完整代码
- 运行效果如图，从中间发散： 
- 总结
动态发射器控制核心说明
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)}}运行效果如图，从中间发散：
![]()
总结
index 必须与粒子索引对应
index: 0控制particles[0]的发射器@State 变量修改自动生效
无需手动刷新，状态变化自动更新粒子支持动态更新的属性
仅支持emitRate、position、sizelifetime: -1 表示永久粒子
官方特殊用法，粒子不会自动消失性能建议
无限粒子需控制总量（count: 400），避免性能损耗
如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力
