HarmonyOS Lottie动画库总结

✍️作者简介：小北编程（专注于HarmonyOS、Android、Java、Web、TCP/IP等技术方向）
🐳博客主页：开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、CSDN
🔔如果文章对您有一定的帮助请👉已关注✨、点赞👍、收藏📂、评论💬。
🔥如需转载请参考【转载须知】

HarmonyOS 开发中使用 Lottie 动画库

一、什么是 Lottie？

简介

Lottie 是由 Airbnb 团队开发并开源的跨平台动画库，支持在 iOS、Android、Web、React Native、Windows 和 HarmonyOS 等平台解析并播放使用 Adobe After Effects 制作、通过 Bodymovin 插件导出的 JSON 动画文件。

推荐使用lottie-turbo：声明式调用更加简洁，支持并行加载、内存缓存、子线程渲染，性能优化30%+，多动画/复杂动画场景下UI界面更流畅。

相比传统的帧动画或手动编写动画代码，Lottie 提供了更轻量、更流畅、更高效的动画解决方案，大幅提升了 UI 表现力和开发效率。

📌 Lottie 官网地址：
https://airbnb.design/lottie

注意：此地址为官方介绍页面，非 HarmonyOS 使用地址。

二、Lottie 的优势

🎨 高保真动画呈现：高度还原设计师在 AE 中的动画设计；
📦 资源体积小：相比 GIF 和视频，JSON 动画更轻量；
🔁 支持交互与循环：可控制播放、暂停、进度、循环等；
🧩 跨平台复用性强：一份动画 JSON 可在多个平台共用；
⚡ 性能优越：利用硬件加速渲染，播放流畅资源消耗低。

三、HarmonyOS 中如何使用 Lottie？

在 HarmonyOS ArkTS 项目中，可以通过官方或三方组件 @ohos/lottie 使用 Lottie 动画。

1. 安装依赖

使用命令安装：

ohpm install @ohos/lottie

或在 module.json5 中添加依赖：

"dependencies": {
   
   
            
  "@ohos/lottie": "1.0.0" // 请根据实际版本号填写
}

三方包地址（OpenHarmony 官方源）：
🔗 https://ohpm.openharmony.cn/#/cn/detail/@ohos/lottie

2. 动画 JSON 文件的放置与使用场景

场景	放置目录	加载方式	注意事项
✅ 本地加载	`entry/src/main/ets/common`	使用相对路径：`common/xxx.json`	推荐开发调试或轻量动画使用
✅ 网络加载	–	直接传入 URL，如 `http://...`	需声明权限（见下方）
✅ HSP 加载	`resources/rawfile/`	使用 `$rawfile('xxx.json')`	推荐正式发布使用（资源内置）

📌 网络资源加载需声明权限：

"reqPermissions": [
  {
   
   
             "name": "ohos.permission.INTERNET" },
  {
   
   
             "name": "ohos.permission.GET_NETWORK_INFO" }
]