文章目录Particle 粒子动画核心1. 组件作用2. 核心适用场景3. 官方标准核心结构示例代码逐模块解析1 页面布局结构2 粒子发射器配置emitter对应功能3 颜色动画配置color对应功能4 透明度动画配置opacity对应功能5 缩放动画配置scale对应功能6 加速度配置acceleration对应功能运行效果完整代码总结Particle 粒子动画核心1. 组件作用Particle是 ArkUI 提供的高性能粒子动画组件用于快速实现复杂的粒子特效。通过配置发射器、粒子数量、生命周期、颜色、透明度、缩放、速度、加速度等参数实现高度自定义的视觉效果。2. 核心适用场景烟花、火焰、烟雾、爆炸特效APP 启动页背景动效点赞、金币飘落等交互动效自定义加载动画3. 官方标准核心结构Particle({particles:[ParticleDescription]})particles: 粒子描述数组支持多组粒子效果内部包含emitter发射器、color颜色、opacity透明度、scale缩放、acceleration加速度等模块示例代码逐模块解析1 页面布局结构Stack(){Text().width(300).height(300).backgroundColor(Color.Black)// 黑色背景Particle({...}).width(300).height(300)// 粒子容器}.width(100%).height(100%).align(Alignment.Center)使用Stack容器居中展示粒子效果黑色背景提升粒子视觉对比度粒子区域固定为300x3002 粒子发射器配置emitteremitter:{particle:{type:ParticleType.POINT,// 粒子类型圆点config:{radius:10},// 圆点半径count:500,// 最大粒子总数lifetime:10000,// 生命周期 10 秒lifetimeRange:100// 生命周期随机范围},emitRate:10,// 每秒发射 10 个粒子position:[0,0],// 发射器位置shape:ParticleEmitterShape.RECTANGLE// 发射器形状矩形}对应功能粒子类型POINT圆点粒子数量控制最多同时存在 500 个粒子发射速度每秒生成 10 个新粒子生命周期单个粒子存活 10 秒发射区域矩形区域发射3 颜色动画配置colorcolor:{range:[Color.Red,Color.Yellow],// 初始颜色范围distributionType:DistributionType.GAUSSIAN,// 高斯分布updater:{type:ParticleUpdater.CURVE,// 曲线渐变config:[{from:White,to:Pink,0-3000ms},{from:Pink,to:Orange,3000-5000ms},{from:Orange,to:Pink,5000-8000ms}]}}对应功能粒子初始颜色在红 → 黄之间随机按时间轴三段式渐变白 → 粉 → 橙 → 粉使用曲线动画实现平滑过渡4 透明度动画配置opacityopacity:{range:[0.0,1.0],// 初始透明度随机updater:{type:ParticleUpdater.CURVE,config:[{from:0.0→1.0,0-3000ms},// 淡入{from:1.0→0.0,5000-10000ms}// 淡出]}}对应功能粒子先淡入、后淡出符合自然视觉动效5 缩放动画配置scalescale:{range:[0.0,0.0],updater:{type:ParticleUpdater.CURVE,config:[{from:0.0→0.5,0-3000ms}// 从小到大放大]}}对应功能粒子从无到有逐渐放大增强视觉冲击感6 加速度配置accelerationacceleration:{speed:{range:[3,9],updater:{type:ParticleUpdater.RANDOM,config:[1,20]}},angle:{range:[90,90]}// 固定向上运动}对应功能粒子固定向上90°加速漂浮速度随机变化模拟自然飘动效果运行效果黑色背景上生成红色/黄色圆点粒子粒子从无到有淡入、逐渐放大颜色按时间渐变白 → 粉 → 橙 → 粉粒子向上加速漂浮后期逐渐淡出消失持续发射、无限循环动效完整代码EntryComponentstruct ParticleExample{build(){Stack(){Text().width(300).height(300).backgroundColor(Color.Black)Particle({particles:[{emitter:{particle:{type:ParticleType.POINT,// 粒子类型config:{radius:10// 圆点半径},count:500,// 粒子总数lifetime:10000,// 粒子生命周期单位mslifetimeRange:100// 粒子生命周期取值范围单位ms},emitRate:10,// 每秒发射粒子数position:[0,0],shape:ParticleEmitterShape.RECTANGLE// 发射器形状},color:{range:[Color.Red,Color.Yellow],// 初始颜色范围distributionType:DistributionType.GAUSSIAN,// 初始颜色随机值分布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},]}},opacity:{range:[0.0,1.0],// 粒子透明度的初始值从【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}]}},acceleration:{// 加速度的配置从大小和方向两个维度变化speed表示加速度大小angle表示加速度方向speed:{range:[3,9],updater:{type:ParticleUpdater.RANDOM,// Speed的变化方式是随机变化config:[1,20]}},angle:{range:[90,90]}}}]}).width(300).height(300)}.width(100%).height(100%).align(Alignment.Center)}}运行效果如图总结Particle 必须设置宽高不设置宽高会导致粒子无法显示粒子数量合理设置count过大会导致性能下降updater 配置顺序按时间先后顺序排列实现连续动画加速度方向angle: 90表示垂直向上性能优化背景建议使用纯色提升渲染效率如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力