当前位置：首页 > news >正文

HarmonyOS 6 ArkUI 粒子动画（Particle）使用文档

news 2026/5/9 14:59:13

文章目录

- 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容器居中展示粒子效果
黑色背景提升粒子视觉对比度
粒子区域固定为300x300

2 粒子发射器配置（emitter）

emitter:{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 颜色动画配置（color）

color:{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 透明度动画配置（opacity）

opacity:{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 缩放动画配置（scale）

scale:{range:[0.0,0.0],updater:{type:ParticleUpdater.CURVE,config:[{from:0.0→0.5,0-3000ms}// 从小到大放大]}}

对应功能：

粒子从无到有逐渐放大
增强视觉冲击感

6 加速度配置（acceleration）

acceleration:{speed:{range:[3,9],updater:{type:ParticleUpdater.RANDOM,config:[1,20]}},angle:{range:[90,90]}// 固定向上运动}

对应功能：

粒子固定向上（90°）加速漂浮
速度随机变化，模拟自然飘动效果

运行效果

黑色背景上生成红色/黄色圆点粒子
粒子从无到有淡入、逐渐放大
颜色按时间渐变：白 → 粉 → 橙 → 粉
粒子向上加速漂浮
后期逐渐淡出消失
持续发射、无限循环动效

完整代码

@Entry@Componentstruct 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)}}