当前位置：首页 > news >正文

【HarmonyOS】鸿蒙应用使用lottie动画

news 2025/7/2 15:14:19

【HarmonyOS】鸿蒙应用使用lottie动画

一、lottie动画是什么？

https://airbnb.design/lottie
在这里插入图片描述

Lottie是由Airbnb团队开发的一个适用于iOS、Android、React Native、Web和Windows的开源动画库，用于解析使用Bodymovin导出为JSON的Adobe After Effects动画，实时渲染AE动画并在设备上呈现它们！

Lottie允许应用程序像使用静态图像一样轻松使用动画。目前在鸿蒙平台上，也进行了适配：鸿蒙lottie动画三方库地址
在这里插入图片描述
目前支持以下动画播放和控制API能力：

若没有lottie动画资源，可以去以下网站下载：
lottie动画资源免费网站

二、鸿蒙应用使用lottie动画步骤：

1.添加lottie动画依赖库
在模块的oh-package.json5配置中，添加一下库版本依赖：（2.0.14为当前最新版本，以动画三方库地址的版本为准）

  "dependencies": {"@ohos/lottie": "2.0.14"}

2.将lottie动画JSON文件放到项目文件夹中
建议放置到Entry目录下，创建common文件夹下，其中创建lottie文件夹，存放动画资源。(放置本模块中，使用相对路径无法读取)。
在这里插入图片描述

3.调用lottie动画依赖库

// TODO 1. 引入lottie三方库。
import lottie from '@ohos/lottie';@Entry
@Component
struct LottiePage {// 动画资源路径和名字private mPath: string = "common/lottie/robotYoga.json"// TODO 相当于key，并非资源配置的名字，可以任意private mName: string = "test";// TODO 2. 使用RenderingContext在Canvas组件上进行绘制，声明CanvasRenderingContext2D变量，RenderingContextSettings用来配置CanvasRenderingContext2D对象的参数表明canvas是否开启抗锯齿。private mRenderingSettings: RenderingContextSettings = new RenderingContextSettings(true);private mCanvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.mRenderingSettings);// TODO 6.实现动画播放方法。lottieController(): void {lottie.stop();lottie.play(this.mName);}build() {Column() {// TODO 4.创建画布容器承载lottieCanvas(this.mCanvasRenderingContext).width(px2vp(1000)).height(px2vp(1000)).backgroundColor(Color.Gray).onReady(() => {//抗锯齿的设置this.mCanvasRenderingContext.imageSmoothingEnabled = true;this.mCanvasRenderingContext.imageSmoothingQuality = 'medium'// 加载动画前先销毁之前加载的动画lottie.destroy(this.mName);// TODO 5.加载lottie动画lottie.loadAnimation({container: this.mCanvasRenderingContext,renderer: 'canvas',frameRate: 60,                               //设置animator的刷帧率为30loop: true,autoplay: false,name: this.mName,path: this.mPath,});}).onDisAppear(() => {// 组件移除时，可销毁动画资源lottie.destroy(this.mName);})Text("点击播放动画").fontSize(50).fontWeight(FontWeight.Bold).onClick(()=>{// TODO 7.在组件事件中调用播放方法this.lottieController();})}.height('100%').width('100%').justifyContent(FlexAlign.Center)}
}// TODO 3.定义所需数据类型的接口，初始化变量，接口中需要包含资源路径信息和CanvasRenderingContext2D。
interface TabBarOption {index: number;text: ResourceStr;name: string;path: string;canvasRenderingContext: CanvasRenderingContext2D;
}

注意：
(1) canvas设置的宽高比例建议和动画json资源里面的宽高比例一致，如：json动画资源里的宽高比例是 1:2 ，则canvas设置的宽高也是 1:2
(2) 想要的抗锯齿效果：mainCanvasRenderingContext.imageSmoothingEnabled = true 与 mainCanvasRenderingContext.imageSmoothingQuality = ‘medium’
(3) 动画绘制前会对canvas画布进行清空处理，画布清空后再绘制动画。

以上示例代码，运行效果如下：
在这里插入图片描述