大家好，我是不想掉发的鸿蒙开发工程师城中的雾。
不知不觉，我们的《极致动效实验室》系列已经来到了最后一期。在之前的文章中，我们学会了控制一个组件、一群组件甚至手绘图形的运动。
但如果产品经理提了这样一个需求：“我要直播间那种漫天飞舞的点赞气泡，要有几百个，还要不卡顿！最好还能像烟花一样炸开！”
这时候，传统的animateTo或者Canvas循环绘制实现起来会比较困难。计算量太大会导致主线程阻塞，手机发烫。
为了解决这个问题，HarmonyOS 提供了原生的Particle(粒子)组件。它将大量的微小图形交给GPU批量渲染，即使同屏几千个粒子也能保持高帧运行。
1. 什么是粒子动画？
粒子动画是计算机图形学中用于模拟模糊物体的技术。
- 适用场景：火、爆炸、烟、水流、火花、落叶、云、雾、雪、尘等。
- 核心思想：不再精确控制每一个点，而是定义“一群点”的统计学规律（发射源、初速度范围、加速度、生命周期、颜色渐变等）。
在 ArkUI 中，Particle是一个声明式组件，你只需要配置参数，剩下的物理计算全交给系统底层。
2. 核心参数拆解
一个标准的粒子效果由以下几个要素构成：
2.1 发射器 (Emitter)
- 位置：粒子从哪里出来？（点、线、矩形区域）。
- 频率：一秒钟喷多少个？(
emitRate) - 形状：粒子长什么样？（可以用图片资源）。
2.2 运动模型 (Motion)
- 速度 (Velocity)：初速度是多少？方向偏转角度是多少？
- 加速度 (Acceleration)：有没有重力？有没有风？
2.3 外观演变 (Appearance)
- 颜色 (Color)：从出生到死亡，颜色怎么变？
- 大小 (Scale)：是变大还是变小？
- 透明度 (Opacity)：通常是淡入淡出。
3. 实战一：沉浸式天气
这是粒子动画最基础的用法
3.1 暴雨：利用 Scale 拉伸
真实的雨滴在高速下落时人眼看到的是线条。我们可以通过scale属性，将圆点粒子在 Y 轴拉伸，模拟“雨丝”效果。
3.2 飞雪：模拟风的扰动
雪花是很轻的，会受风力影响左右飘忽。我们可以利用acceleration.angle的随机更新器来实现。
// 暴雨配置核心代码 Particle({ particles: [{ emitter: { particle: { type: ParticleType.POINT, config: { radius: 1 } }, emitRate: 600, // 倾盆大雨 size: ['100%', 1] // 顶部发射 }, scale: { range: [1.0, 1.0], // Y轴保持拉伸，X轴不变 updater: { type: ParticleUpdater.CURVE, // 这里的配置稍微 trick 一些，实际开发中通常配合图片资源 config: [{ from: 1, to: 1, ... }] } }, velocity: { speed: [1500, 2000], // 极高速度 angle: [85, 95] // 稍微有点侧风 } }] })4. 实战二：直播点赞气泡
直播间右下角冒出的气泡，这里我们需要实现**“自动氛围”与“疯狂点赞”**的结合。
关键策略
- 自动流：默认
emitRate设为 20，营造持续的热度。 - 点击爆发：点击按钮时，瞬间将
emitRate提至 1000，持续 200ms 后恢复。 - 大容量池：粒子
count必须设大（如 3000），防止高频发射时粒子池耗尽导致断流。
@ComponentV2 struct LikeBubbleDemo { // 控制发射率：20 (常态) -> 1000 (爆发) @Local bubbleEmitRate: number = 20; build() { Stack() { Particle({ particles: [{ emitter: { particle: { count: 3000, // [关键]：大容量防断流 lifetime: 3500 }, emitRate: this.bubbleEmitRate, // [关键]：绑定状态 position: ['85%', '90%'] }, // ... 颜色、速度配置 ... }] }) // 交互按钮 Button().onClick(() => { // 瞬间加速 this.bubbleEmitRate = 1000; // 短时间后恢复 setTimeout(() => { this.bubbleEmitRate = 20; }, 200); }) } } }5. 实战三：复合烟花 (Composite Fireworks)
这是粒子效果的集大成者。为了还原真实的烟花，我们需要两段式动画和多层粒子叠加。
第一阶段：升空 (Launch)
使用一个简单的Circle组件配合animateTo，从屏幕底部向上飞行，模拟火种上升。
第二阶段：绽放 (Explode)
当火种到达顶点时，隐藏火种，并触发Particle爆发。为了逼真，我们在一个Particle组件里叠加了三种粒子：
- 核心火球：高亮、速度快、寿命短。
- 主星火：色彩丰富、受重力下坠。
- 闪烁星尘：微小、飘得慢、寿命长。
// 触发逻辑 launchFirework(targetX, targetY) { // 1. 升空动画 animateTo({ duration: 800, curve: Curve.EaseOut, // 模拟重力减速 onFinish: () => { // 2. 到达顶点，触发爆炸 this.emitterX = targetX; this.emitterY = targetY; // 瞬间高频发射 this.fireworkEmitRate = 5000; setTimeout(() => { this.fireworkEmitRate = 0; }, 300); } }, () => { this.rocketY = targetY; // 火种向上飞 }) }总结
至此，我们的《HarmonyOS 极致动效实验室》系列就正式结束了
回顾一下我们的旅程：
- 基础篇：学会了
animation和animateTo，让组件动起来。 - 进阶篇：掌握了
geometryTransition，实现了一镜到底的丝滑转场。 - 交互篇：引入了物理引擎，让 UI 拥有了真实的阻尼手感。
- 绘图篇：利用
Canvas突破了组件限制，手绘液态波浪。 - 终极篇：召唤
Particle粒子动画，实现了炸裂的全屏特效。
动效不是为了炫技，而是为了引导视线、反馈状态、愉悦用户。希望大家在未来的鸿蒙开发之路上，能写出既代码稳）、动效极致的优秀应用！
我是城中的雾，我们下一期系列见！
充电时间
如果您想系统深入地学习 HarmonyOS 开发或想考取HarmonyOS认证证书，欢迎加我的华为开发者学堂：
🔗 HarmonyOS第一课：官方认证培训
🔗 完整代码仓库
