文章目录环形发射器核心1. 作用2. 环形发射器参数代码逐模块解析1 页面布局结构2 环形发射器核心配置对应功能3 颜色配置4 透明度动画淡入淡出5 缩放动画生长效果运行效果完整代码总结环形发射器核心1. 作用ParticleEmitterShape.ANNULUS是粒子的环形发射形状粒子会在指定的圆环区域内随机生成形成环形扩散效果。2. 环形发射器参数参数含义shape设置为ParticleEmitterShape.ANNULUS启用环形发射annulusRegion环形区域配置核心center圆环中心点坐标innerRadius圆环内圆半径outerRadius圆环外圆半径startAngle圆环起始角度endAngle圆环结束角度代码逐模块解析1 页面布局结构Stack(){// 黑色背景Text().width(300).height(300).backgroundColor(Color.Black)// 粒子动画组件Particle({...}).width(300).height(300)}.width(100%).height(100%).align(Alignment.Center)使用Stack居中布局黑色背景增强粒子色彩表现粒子区域300x3002 环形发射器核心配置emitter:{particle:{type:ParticleType.POINT,// 粒子类型圆点config:{radius:5},// 圆点半径count:2000,// 最大粒子数lifetime:10000,// 生命周期10秒lifetimeRange:100// 生命周期随机范围},emitRate:100,// 每秒发射100个粒子shape:ParticleEmitterShape.ANNULUS,// 环形发射器annulusRegion:{center:{x:LengthMetrics.percent(0.5),y:LengthMetrics.percent(0.5)},// 中心50%innerRadius:LengthMetrics.vp(100),// 内半径100vpouterRadius:LengthMetrics.vp(120),// 外半径120vpstartAngle:0,// 起始角度0°endAngle:360// 结束角度360°}}对应功能环形发射器shape: ANNULUS中心位置屏幕正中心50%50%圆环尺寸内半径100vp外半径120vp →宽度20vp的圆环发射角度0°360° →完整环形发射速度100个/秒 → 密集粒子效果粒子数量最大2000 → 饱满视觉效果3 颜色配置color:{range:[Color.Pink,Color.White],}粒子初始颜色在粉色 ↔ 白色之间随机柔和、美观的色彩搭配4 透明度动画淡入淡出opacity:{range:[0.0,1.0],updater:{type:ParticleUpdater.CURVE,config:[{from:0→1,0-3000ms},// 淡入{from:1→0,5000-10000ms}// 淡出]}}粒子先渐显、后渐隐符合自然动效规律5 缩放动画生长效果scale:{range:[0.0,0.0],updater:{type:ParticleUpdater.CURVE,config:[{from:0→0.5,0-3000ms}]}}粒子从无到有逐渐放大视觉更柔和自然运行效果黑色背景中心出现完整圆环粒子效果粒子从100vp~120vp 的环形区域生成颜色粉色 ↔ 白色随机动画粒子淡入 → 放大 → 淡出密集、流畅、对称的环形扩散动效完整代码import{LengthMetrics}fromkit.ArkUI;EntryComponentstruct ParticleExample5{build(){Stack(){Text().width(300).height(300).backgroundColor(Color.Black)Particle({particles:[{emitter:{particle:{type:ParticleType.POINT,// 粒子类型config:{radius:5// 圆点半径},count:2000,// 粒子总数lifetime:10000,// 粒子生命周期单位mslifetimeRange:100// 粒子生命周期取值范围单位ms},emitRate:100,// 每秒发射粒子数shape:ParticleEmitterShape.ANNULUS,// 环形发射器annulusRegion:{center:{x:LengthMetrics.percent(0.5),y:LengthMetrics.percent(0.5)},// 圆环的圆心坐标innerRadius:LengthMetrics.vp(100),// 圆环的外圆半径outerRadius:LengthMetrics.vp(120),// 圆环的内圆半径startAngle:0,// 圆环的起始角度endAngle:360// 圆环的结束角度}},color:{range:[Color.Pink,Color.White],},opacity:{range:[0.0,1.0],updater:{type:ParticleUpdater.CURVE,config:[{from:0.0,to:1.0,startMillis:0,endMillis:3000,curve:Curve.EaseIn},{from:1.0,to:0.0,startMillis:5000,endMillis:10000,curve:Curve.EaseIn}]}},scale:{range:[0.0,0.0],updater:{type:ParticleUpdater.CURVE,config:[{from:0.0,to:0.5,startMillis:0,endMillis:3000,curve:Curve.EaseIn}]}},}]}).width(300).height(300)}.width(100%).height(100%).align(Alignment.Center)}}运行效果如图总结必须导入 LengthMetricsimport{LengthMetrics}fromkit.ArkUI;用于设置百分比、vp 单位。innerRadius 必须小于 outerRadius才能形成有效圆环。角度范围 0360形成完整圆环可修改为部分扇形如 090。center: 50% 居中是环形特效最常用的配置。高发射速度 大粒子数量可形成饱满、连续的环形特效。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力