Lottie动画库：加载After Effects导出的动画（250）

在鸿蒙HarmonyOS应用开发中集成和渲染由 After Effects 导出的 Lottie 动画开发者可以根据项目的 API 版本、业务复杂度以及对动画控制的需求选择以下三种主流方案方案一使用官方ohos/lottie库Canvas 渲染这是鸿蒙生态中最经典且官方推荐的 Lottie 集成方式。它基于 Canvas 渲染支持丰富的动画控制接口适用于绝大多数常规业务场景。核心优势多源加载支持从本地路径path、网络 URLuri、甚至直接传入 JSON 数据对象animationData进行加载。精细控制提供play()、pause()、stop()、setSpeed()等方法并支持通过initialSegment指定播放的起止帧。资源管理支持在页面退出时调用destroy()销毁动画有效防止内存泄漏。快速接入与基础用法bash编辑ohpm install ohos/lottietypescript编辑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/lottieETSnpm 方式如果你的项目基于较老的 API 版本如 API 8或者由于历史原因必须使用 npm 而非 ohpm可以使用ohos/lottieETS库。核心优势兼容旧版鸿蒙工程的依赖管理方式。提供与官方库类似的loadAnimation和destroyAPI。快速接入bash编辑npm install ohos/lottieETS --savetypescript编辑import lottie from ohos/lottieETS; // 注意在声明式范式下需提前声明 Animator(__lottie_ets) 对象 选型决策总结新项目 / 现代 ArkUI 开发首选方案二原生 Lottie 组件开发效率最高。需要复杂控制 / 动态加载网络 JSON / 老项目维护选择方案一ohos/lottie。API 8 等老旧工程使用方案三ohos/lottieETS。⚠️ 开发避坑指南资源路径使用ohos/lottie时JSON 文件建议放在与pages同级的目录下或rawfile中放在ets目录外可能导致动画无法正常展示。内存释放无论使用哪种 Canvas 方案务必在组件的aboutToDisappear或页面的onPageHide生命周期中调用lottie.destroy()。网络权限如果通过uri加载网络 Lottie 资源必须在module.json5中申请ohos.permission.INTERNET权限。