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; // 火种向上飞 }) }