【鸿蒙优选三方库】@ohos/lottie-turbo：让 AE 动画在鸿蒙上飞起来

设计师在 After Effects 里做的动画，Bodymovin 导出 JSON，前端一行代码渲染——这是 Lottie 的魔力。但一代鸿蒙 Lottie 库多动画同屏会卡死主线程。@ohos/lottie-turbo 用子线程渲染 + 并行加载解决了这个问题，实测性能提升 30%+。

📦 仓库地址 ｜ ohpm install @ohos/lottie-turbo ｜ v1.0.14-rc.2 ｜ Apache-2.0

---

它解决什么问题

Lottie 让设计师和开发者解耦：设计师产出 JSON，开发者不用逐帧写动画代码。这套流程在 Web/iOS/Android 上早就是标配。

鸿蒙上一代方案 @ohos/lottie 能用，但有三个瓶颈：

1. 多动画同屏卡顿：渲染在主线程，几个动画一起跑 UI 就掉帧
2. 加载排队：多个动画资源串行解析
3. 没有内存缓存：滑回去的动画要重新解析

lottie-turbo 基于 Airbnb 的 lottie-ios 深度优化，声明式 API + 并行加载 + 内存缓存 + 子线程渲染，正好把三个瓶颈全解决了。

---

核心能力

能力	说明
声明式调用	ArkUI 组件风格，LottieView 一行加载
并行加载	多动画同时加载不排队
内存缓存	重复使用的动画自动缓存
子线程渲染	帧计算不占主线程
Texture 渲染模式	API 18+ 硬件加速
contentMode 自适应	AdaptiveHeight / AdaptiveWidth
完整播放控制	播放、暂停、停止、跳转、速度、方向、片段
零权限	纯渲染，无任何权限要求

---

30 秒上手

ohpm install @ohos/lottie-turbo

1.0.2 起兼容 API 12+；Texture 渲染模式需 API 18+。

import { LottieController, LottieView } from '@ohos/lottie-turbo'

@Entry
@Component
struct Load {
  // ✅ 一个 LottieView 配一个独立 controller
  private controller: LottieController = new LottieController()

  build() {
    LottieView({
      lottieId: 'lottie1',                       // 唯一 id
      resource: $rawfile('anim.json'),           // AE 导出的 JSON
      loop: true,
      autoplay: true,
      controller: this.controller,
      contentMode: 'AdaptiveHeight',
    })
      .width(300).height(300)
  }

  aboutToDisappear() {
    this.controller.stop()   // ✅ 先停动画再销毁
  }
}

播放控制：

this.controller.start()
this.controller.pause()
this.controller.stop()
this.controller.setProgress(0.5)      // 跳到 50%
this.controller.setSpeed(1.5)         // 1.5 倍速
this.controller.setDirection(-1)      // 倒放
this.controller.playSegments([[0, 30]])   // ✅ 片段播放，注意嵌套数组格式

---

社区已解决的典型问题

多 LottieView 共享 controller 导致内存泄漏（#223）
多个 LottieView 共享同一个 controller 时，销毁只处理了单个动画，其余的泄漏。规则很简单：一个 View 配一个独立 controller。列表场景用 Map 管理，页面销毁时统一 stop + clear。

DisposeLottieNode 从 NAPI 异步回调触发概率崩溃（#229 / #230）
动画正在渲染时组件被销毁，异步回调回来发现节点已释放。已修复。业务侧配合在 aboutToDisappear 里先 stop() 更稳，同时避免频繁创建销毁组件。

Tint 对描边未生效、Drop Shadow 显示不正确（#224）
两个设计稿里最常用的 AE 特效还原有问题。已修复。升级后要肉眼重新验收特效——这类渲染问题只有对着设计稿比对才能发现。

Stroke All Masks、Set Matte、复杂文字渲染（#225）
遮罩效果和 Devanagari（天城文）等复杂文字图层的渲染问题。已修复。做多语言或含特殊字符的动画时要专门测。

渲染效果、表达式实现及多线程崩溃（#226）
一批综合性的渲染与稳定性修复。

部分 JSON 动画资源播放显示异常（#227）
已修复。素材上线前逐个预览验收，别假定所有 JSON 都能正确渲染。

playSegments 不支持平铺数组格式（#221）
参数格式要用嵌套数组 [[startFrame, endFrame]]，不是平铺的 (start, end)。已修复兼容性。

---

AE 特效验收清单

Lottie 的坑多在"看起来在动，但细节不对"。上线前照这张表过一遍：

✅ 基础：播放 / 暂停 / 循环 / 跳转 / 倍速
✅ 着色：Tint 对填充生效、对描边也生效
✅ 阴影：Drop Shadow 位置、模糊半径、透明度
✅ 遮罩：Set Matte（Alpha / Luma）、Stroke All Masks
✅ 文字：中文字体、Emoji、特殊字符（天城文等）、逐字动画时序
✅ 表达式：AE 表达式驱动的动画
✅ 多动画：同屏多个 LottieView 是否流畅
✅ GIF 类素材：帧播放节奏是否准确

---

与一代 @ohos/lottie 的差别

维度	@ohos/lottie	@ohos/lottie-turbo
多动画同屏	❌ 主线程卡	✅ 子线程渲染
加载方式	⚠️ 排队	✅ 并行
内存缓存	❌	✅
API 风格	⚠️ 偏命令式	✅ 声明式
自适应尺寸	❌	✅ AdaptiveHeight/Width
Texture 硬件加速	❌	✅ API 18+
性能	基准	✅ +30%

新项目直接选 turbo。

---

适合谁用

• 启动页 / 引导页：品牌动画、产品介绍
• 加载状态：骨架屏、加载圈、成功/失败趣味动效
• 微交互反馈：点赞、收藏、支付成功
• 活动促销页：节日运营的复杂交互动画
• 动效素材库：多动画同屏预览
• 多动画场景：Tab 切换动画 + 内容加载动画同框

221 个 Issue 已关闭，其中相当一部分是 AE 特效还原的细节修复。如果你的设计师对动效有要求，这个库的打磨程度会让你省心很多。