HarmonyOS 5 极致动效实验室：粒子动画与高性能特效 - 指南
大家好，我是不想掉发的鸿蒙开发工程师城中的雾。
不知不觉，我们的《极致动效实验室》系列已经来到了最后一期。在之前的文章中，我们学会了控制一个组件、一群组件甚至手绘图形的运动。
但如果产品经理提了这样一个需求：“我要直播间那种漫天飞舞的点赞气泡，要有几百个，还要不卡顿！最好还能像烟花一样炸开！”
这时候，传统的 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认证证书，欢迎加我的华为开发者学堂：
浙公网安备 33010602011771号