在鸿蒙（HarmonyOS）应用开发中，集成和渲染由 After Effects 导出的 Lottie 动画，开发者可以根据项目的 API 版本、业务复杂度以及对动画控制的需求，选择以下三种主流方案：

方案一：使用官方 @ohos/lottie 库（Canvas 渲染）

这是鸿蒙生态中最经典且官方推荐的 Lottie 集成方式。它基于 Canvas 渲染，支持丰富的动画控制接口，适用于绝大多数常规业务场景。

核心优势：

• 多源加载：支持从本地路径（path）、网络 URL（uri）、甚至直接传入 JSON 数据对象（animationData）进行加载。
• 精细控制：提供 play()、pause()、stop()、setSpeed() 等方法，并支持通过 initialSegment 指定播放的起止帧。
• 资源管理：支持在页面退出时调用 destroy() 销毁动画，有效防止内存泄漏。

快速接入与基础用法：

bash

编辑

ohpm install @ohos/lottie

typescript

编辑

import lottie from '@ohos/lottie'

// 在 Canvas 的 onReady 回调中加载
Canvas(this.canvasRenderingContext)
  .onReady(() => {
    lottie.loadAnimation({
      container: this.canvasRenderingContext,
      renderer: 'canvas',
      loop: true,
      autoplay: true,
      name: 'myAnimation',
      path: 'common/lottie/data.json' // 本地资源路径
    })
  })

方案二：使用原生 Lottie 组件（声明式极简渲染）

在较新的鸿蒙版本中，系统提供了高度封装的原生 Lottie 组件。如果你只需要基础的播放、暂停和循环，且希望代码极其简洁，这是最佳选择。

核心优势：

• 声明式语法：无需手动管理 Canvas 上下文和生命周期，直接作为 UI 组件使用。
• 控制器支持：通过绑定 LottieController，可以轻松实现播放、暂停、调速和进度拖拽。
• 事件监听：内置 onStart、onEnd、onPause 等回调，方便与业务状态联动。

快速用法：

typescript

编辑

Lottie({
  src: $rawfile('animations/loading.json'), // 加载 rawfile 目录下的 JSON
  autoPlay: true,
  loop: true
})
.width(200)
.height(200)

方案三：早期版本兼容 @ohos/lottieETS（npm 方式）

如果你的项目基于较老的 API 版本（如 API 8），或者由于历史原因必须使用 npm 而非 ohpm，可以使用 @ohos/lottieETS 库。

核心优势：

• 兼容旧版鸿蒙工程的依赖管理方式。
• 提供与官方库类似的 loadAnimation 和 destroy API。

快速接入：

bash

编辑

npm install @ohos/lottieETS --save

typescript

编辑

import lottie from '@ohos/lottieETS';
// 注意：在声明式范式下，需提前声明 Animator('__lottie_ets') 对象

---

💡 选型决策总结：

• 新项目 / 现代 ArkUI 开发：首选 方案二（原生 Lottie 组件），开发效率最高。
• 需要复杂控制 / 动态加载网络 JSON / 老项目维护：选择 方案一（@ohos/lottie）。
• API 8 等老旧工程：使用 方案三（@ohos/lottieETS）。

⚠️ 开发避坑指南：

1. 资源路径：使用 @ohos/lottie 时，JSON 文件建议放在与 pages 同级的目录下或 rawfile 中，放在 ets 目录外可能导致动画无法正常展示。
2. 内存释放：无论使用哪种 Canvas 方案，务必在组件的 aboutToDisappear 或页面的 onPageHide 生命周期中调用 lottie.destroy()。
3. 网络权限：如果通过 uri 加载网络 Lottie 资源，必须在 module.json5 中申请 ohos.permission.INTERNET 权限。