文章目录核心功能代码结构与核心模块解析1 导入与变量定义2 动态发射器配置3 初始环形区域配置4 定时器自动旋转角度5 粒子组件主体配置运行效果完整代码总结核心功能环形发射器ANNULUS粒子沿圆环区域生成动态角度更新通过定时器每秒钟旋转发射扇形角度无限生命周期粒子lifetime: -1粒子永久存在状态驱动动态更新使用State.emitter()实时修改发射器属性代码结构与核心模块解析1 导入与变量定义import{LengthMetrics}fromkit.ArkUI;EntryComponentstruct ParticleExample6{Stateradius:number1;Stateshape:ParticleEmitterShapeParticleEmitterShape.ANNULUS;StateemitRate:number200;Statecount:number4000;privatetimerID:number-1;// 环形固定参数privatecenterX:LengthMetricsLengthMetrics.percent(0.5);privatecenterY:LengthMetricsLengthMetrics.percent(0.5);privateinRadius:LengthMetricsLengthMetrics.vp(120);privateoutRadius:LengthMetricsLengthMetrics.vp(120);// 动态旋转角度privatestartAngle:number-90;privateendAngle:number-60;}LengthMetrics用于百分比、vp 单位尺寸定义centerX/Y: 0.5粒子发射中心在容器正中心初始角度-90° ~ -60°时钟 12点 → 1点方向2 动态发射器配置StateemitterProperties:ArrayEmitterProperty[{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.timerIDsetInterval((){// 更新发射器属性this.emitterProperties[...]// 角度每秒 30°this.startAngle30;this.endAngle30;// 旋转一周后停止if(this.endAngle360){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高密度效果颜色白色 → 粉色随机无限生命周期形成累积效果运行效果页面显示黑色背景 300x300 区域粒子从正中心圆环的扇形区域发射发射扇形每秒钟顺时针旋转30°粒子永久存在形成环形扫描/时钟转动视觉效果旋转一周360°后自动停止颜色白、粉色随机柔和美观完整代码import{LengthMetrics}fromkit.ArkUI;EntryComponentstruct ParticleExample6{Stateradius:number1;Stateshape:ParticleEmitterShapeParticleEmitterShape.ANNULUS;// 圆环StateemitRate:number200;Statecount:number4000;privatetimerID:number-1;privatecenterX:LengthMetricsLengthMetrics.percent(0.5);privatecenterY:LengthMetricsLengthMetrics.percent(0.5);privateinRadius:LengthMetricsLengthMetrics.vp(120);privateoutRadius:LengthMetricsLengthMetrics.vp(120);privatestartAngle:number-90;// 时钟12点钟方向privateendAngle:number-60;// 时钟1点钟方向// 粒子动画环形发射器的更新参数设置StateemitterProperties:ArrayEmitterProperty[{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.timerIDsetInterval((){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.endAngle360){if(this.timerID!-1){clearInterval(this.timerID);}return;}// 更新角度值30度/秒this.startAngle30;this.endAngle30;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)}}}运行效果如图总结环形发射器shape: ParticleEmitterShape.ANNULUS动态更新发射器使用.emitter(emitterProperties)实时修改角度、半径、发射速率无限生命周期粒子lifetime: -1角度旋转规则-90°时钟12点方向每帧 30°实现顺时针扫描360° 后自动停止LengthMetrics 单位用于跨设备适配percent(0.5)50% 居中vp(120)120vp 半径如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力