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

核心功能

• 环形发射器（ANNULUS）：粒子沿圆环区域生成
• 动态角度更新：通过定时器每秒钟旋转发射扇形角度
• 无限生命周期粒子：lifetime: -1粒子永久存在
• 状态驱动动态更新：使用@State+.emitter()实时修改发射器属性

代码结构与核心模块解析

1 导入与变量定义

import{LengthMetrics}from'@kit.ArkUI';@Entry@Componentstruct ParticleExample6{@Stateradius:number=1;@Stateshape:ParticleEmitterShape=ParticleEmitterShape.ANNULUS;@StateemitRate:number=200;@Statecount:number=4000;privatetimerID:number=-1;// 环形固定参数privatecenterX:LengthMetrics=LengthMetrics.percent(0.5);privatecenterY:LengthMetrics=LengthMetrics.percent(0.5);privateinRadius:LengthMetrics=LengthMetrics.vp(120);privateoutRadius:LengthMetrics=LengthMetrics.vp(120);// 动态旋转角度privatestartAngle:number=-90;privateendAngle:number=-60;}

• LengthMetrics：用于百分比、vp 单位尺寸定义
• centerX/Y: 0.5：粒子发射中心在容器正中心
• 初始角度：-90° ~ -60°（时钟 12点 → 1点方向）

2 动态发射器配置

@StateemitterProperties:Array<EmitterProperty>=[{index:0,emitRate:100,annulusRegion:{center:{x:this.centerX,y:this.centerY},outerRadius:this.outRadius,innerRadius:this.inRadius,startAngle:this.startAngle,endAngle:this.endAngle}}]

• index:0：绑定第一个粒子发射器
• annulusRegion：动态更新环形发射区域
• 角度可实时修改，实现旋转扫描效果

3 初始环形区域配置

@Stateregion:ParticleAnnulusRegion={center:{x:this.centerX,y:this.centerY},outerRadius:this.outRadius,innerRadius:this.inRadius,startAngle:-90,endAngle:-60}

用于粒子组件初始化时的默认环形区域。

4 定时器自动旋转角度

onPageShow():void{this.timerID=setInterval(()=>{// 更新发射器属性this.emitterProperties=[...]// 角度每秒 +30°this.startAngle+=30;this.endAngle+=30;// 旋转一周后停止if(this.endAngle>=360){clearInterval(this.timerID);}},1000);}

• 每秒更新一次发射角度
• 每次旋转30°
• 旋转 360° 后自动停止定时器

5 粒子组件主体配置

Particle({particles:[{emitter:{particle:{type:ParticleType.POINT,config:{radius:this.radius},count:this.count,lifetime:-1// 无限生命周期},emitRate:this.emitRate,shape:this.shape,annulusRegion:this.region},color:{range:[Color.White,Color.Pink]}}]}).width('100%').height('100%').emitter(this.emitterProperties)// 绑定动态发射器

• 粒子类型：圆点（POINT）
• 粒子数量：4000（高密度效果）
• 颜色：白色 → 粉色随机
• 无限生命周期，形成累积效果

运行效果

1. 页面显示黑色背景 300x300 区域
2. 粒子从正中心圆环的扇形区域发射
3. 发射扇形每秒钟顺时针旋转30°
4. 粒子永久存在，形成环形扫描/时钟转动视觉效果
5. 旋转一周（360°）后自动停止
6. 颜色：白、粉色随机，柔和美观

完整代码

import{LengthMetrics}from'@kit.ArkUI';@Entry@Componentstruct ParticleExample6{@Stateradius:number=1;@Stateshape:ParticleEmitterShape=ParticleEmitterShape.ANNULUS;// 圆环@StateemitRate:number=200;@Statecount:number=4000;privatetimerID:number=-1;privatecenterX:LengthMetrics=LengthMetrics.percent(0.5);privatecenterY:LengthMetrics=LengthMetrics.percent(0.5);privateinRadius:LengthMetrics=LengthMetrics.vp(120);privateoutRadius:LengthMetrics=LengthMetrics.vp(120);privatestartAngle:number=-90;// 时钟12点钟方向privateendAngle:number=-60;// 时钟1点钟方向// 粒子动画，环形发射器的更新参数设置@StateemitterProperties:Array<EmitterProperty>=[{index:0,emitRate:100,annulusRegion:{center:{x:this.centerX,y:this.centerY},// 圆环的圆心坐标outerRadius:this.outRadius,// 圆环的外圆半径innerRadius:this.inRadius,// 圆环的内圆半径startAngle:this.startAngle,// 圆环的起始角度endAngle:this.endAngle// 圆环的结束角度}}]// 创建的时候，环形发射器的初始设置@Stateregion:ParticleAnnulusRegion={center:{x:this.centerX,y:this.centerY},outerRadius:this.outRadius,innerRadius:this.inRadius,startAngle:-90,endAngle:-60}onPageShow():void{// 创建定时器（每秒更新）this.timerID=setInterval(()=>{this.emitterProperties=[{index:0,emitRate:this.emitRate,annulusRegion:{center:{x:this.centerX,y:this.centerY},outerRadius:this.outRadius,innerRadius:this.inRadius,startAngle:this.startAngle,endAngle:this.endAngle}}];if(this.endAngle>=360){if(this.timerID!=-1){clearInterval(this.timerID);}return;}// 更新角度值（30度/秒）this.startAngle+=30;this.endAngle+=30;console.info("angle: "+this.startAngle+", "+this.endAngle);},1000);}build(){Column({space:10}){Stack(){Text().width(300).height(300).backgroundColor(Color.Black)Particle({particles:[{emitter:{particle:{type:ParticleType.POINT,// 粒子类型config:{radius:this.radius// 圆点半径},count:this.count,// 粒子总数lifetime:-1// 粒子的生命周期，-1表示粒子生命周期无限大},emitRate:this.emitRate,// 每秒发射粒子数shape:this.shape,// 发射器形状annulusRegion:this.region},color:{range:[Color.White,Color.Pink],// 初始颜色范围},},]}).width('100%').height('100%').emitter(this.emitterProperties)}.width('100%').height('100%').align(Alignment.Center)}}}

运行效果如图：

总结

1. 环形发射器
   shape: ParticleEmitterShape.ANNULUS

2. 动态更新发射器
   使用.emitter(emitterProperties)实时修改角度、半径、发射速率

3. 无限生命周期粒子
   lifetime: -1

4. 角度旋转规则

   • -90°：时钟12点方向
   • 每帧 +30°，实现顺时针扫描
   • 360° 后自动停止

5. LengthMetrics 单位
   用于跨设备适配：

   • percent(0.5)：50% 居中
   • vp(120)：120vp 半径

如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力