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

文章目录动态发射器控制核心说明1. 作用2. EmitterProperty 结构示例代码逐模块解析1 状态变量定义动态发射器核心2 粒子基础配置对应功能3 颜色动画配置4 动态发射器绑定5 页面布局运行效果完整代码运行效果如图从中间发散 总结动态发射器控制核心说明1. 作用.emitter(emitterProperties: ArrayEmitterProperty)用于动态更新粒子发射器属性无需重建粒子组件即可实时修改发射速率emitRate发射器位置position发射器尺寸size2. EmitterProperty 结构参数含义index粒子发射器索引对应 particles 数组下标emitRate每秒发射粒子数量position发射器坐标 {x, y}size发射器区域尺寸 {width, height}示例代码逐模块解析1 状态变量定义动态发射器核心StateemitterProperties:ArrayEmitterProperty[{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变量动态控制粒子持续发射、永久存在、颜色流畅变化完整代码EntryComponentstruct ParticleExample4{StateemitterProperties:ArrayEmitterProperty[{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避免性能损耗如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力