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认证证书，欢迎加我的华为开发者学堂：

🔗 HarmonyOS第一课：官方认证培训

🔗 完整代码仓库