【鸿蒙优选三方库】@ohos/lottie：让 After Effects 动画在 HarmonyOS 上稳定播放

鸿蒙开源三方库

40人浏览 · 2026-08-11 09:28:03

鸿蒙开源三方库 · 2026-08-11 09:28:03 发布

【鸿蒙优选三方库】@ohos/lottie：让 After Effects 动画在 HarmonyOS 上稳定播放

想在鸿蒙应用里播放设计师用 After Effects + Bodymovin 导出的精美动画？@ohos/lottie（基于 lottieArkTS 仓库）是 OpenHarmony 上一线主力 Lottie 方案，完整的动画引擎 + 丰富的播放控制 + 稳定的边界场景处理，久经大量应用打磨。

包名：@ohos/lottie
当前版本：v2.0.32（v2.0.31 ✅ 推荐最新稳定版）
协议：MIT
安装：ohpm install @ohos/lottie
仓库：https://gitcode.com/CPF-ApplicationTPC/lottieArkTS

💡 选型提示

新项目/极致性能场景推荐使用 @ohos/lottie-turbo：

声明式调用更简洁

支持并行加载、内存缓存、子线程渲染

性能优化 30%+

多动画/复杂动画场景下 UI 更流畅

@ohos/lottie（本文）更适合：存量项目维护 + 稳定性优先的场景。

一、它解决了什么问题？

Lottie 是 Airbnb 开源的动画方案，让设计师在 After Effects 里做的动画，通过 Bodymovin 插件导出 JSON，再由 Lottie 库在 App/Web 里原生渲染——设计师产出零成本触达终端，是设计师与开发协作的"梦幻联动"。

@ohos/lottie 是把这一能力完整带到 OpenHarmony 的成熟方案：

完整支持 Bodymovin JSON 规范；
提供播放/暂停/停止/跳转/速度/方向等完整控制；
支持动画片段、颜色修改、填充模式、帧率控制等高级特性；
支持不可见时自动跳过绘制，省电省资源；
完善的外部图片资源管理与缓存。

二、核心特点

特性	说明
完整动画解析	支持 AE 通过 Bodymovin 导出的 JSON 格式
多种加载方式	本地文件、JSON 数据、网络 URL 全支持
完整播放控制	播放、暂停、停止、跳转、速度、方向
高级特性	动画片段、颜色修改、填充模式、帧率控制
性能优化	不可见时自动跳过绘制
资源管理	外部图片资源加载、缓存、内存优化
健壮性增强	空 `canvasShadow`、空 `dynamicProperties`、空 `assetData` 等边界场景防崩

三、适用场景

应用启动动画：启动屏、品牌展示。
加载动画：骨架屏、加载圈、上拉加载动画。
微交互反馈：点赞、收藏、支付成功、消息已读。
节日/活动页面：运营 H5 风格的活动落地页。
教育/娱乐：故事化内容、教学动画。
数据可视化：图表入场动画。
存量维护项目：已使用 @ohos/lottie 的项目继续升级维护。

四、快速上手

1. 安装

ohpm install @ohos/lottie

2. 播放一个本地动画

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

@Entry
@Component
struct Load {
  private controller: LottieController = new LottieController()

  build() {
    Column() {
      LottieView({
        source: $rawfile('lottie/anim.json'),
        controller: this.controller,
        loop: true,
        autoplay: true
      })
        .width(300).height(300)
    }
  }
}

3. 加载网络 JSON

LottieView({
  source: 'https://example.com/anim.json',
  controller: this.controller
})

4. 加载 JSON 数据（动态内容）

const jsonData = '{"v":"5.7.0","fr":30,"ip":0,"op":60,"w":300,"h":300, ...}'
LottieView({
  source: jsonData,  // 直接传 JSON 字符串
  controller: this.controller
})

5. 播放控制

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)  // 倒放

6. 高级特性

// 播放动画片段（指定起止帧）
this.controller.playFromFrame(0, 60)

// 修改颜色
this.controller.setColor('shape1', '#FF0000')

// 设置填充模式
LottieView({
  source: 'anim.json',
  resizeMode: 'cover',
  controller: this.controller
})

五、亮点能力速览

不可见时自动跳过绘制：页面退到后台、组件不可见时自动暂停渲染，省电省资源。
三种加载方式：本地文件 / 网络 URL / JSON 字符串，覆盖所有场景。
完整高级特性：动画片段、颜色修改、填充模式、帧率控制。
健壮性持续打磨：v2.0.31 增强了对空 canvasShadow、空 dynamicProperties、空 assetData 等边界场景的防护，避免空指针崩溃。
生态成熟：被大量鸿蒙应用采用，久经考验。