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

【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为当前最新版本，以动画三方库地址的版本为准）

1.   "dependencies": {
2.     "@ohos/lottie": "2.0.14"
3.   }

复制代码

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

3.调用lottie动画依靠库

1. // TODO 1. 引入lottie三方库。
2. import lottie from '@ohos/lottie';
4. @Entry
5. @Component
6. struct LottiePage {
8.   // 动画资源路径和名字
9.   private mPath: string = "common/lottie/robotYoga.json"
10.   // TODO 相当于key，并非资源配置的名字，可以任意
11.   private mName: string = "test";
13.   // TODO 2. 使用RenderingContext在Canvas组件上进行绘制，声明CanvasRenderingContext2D变量，RenderingContextSettings用来配置CanvasRenderingContext2D对象的参数表明canvas是否开启抗锯齿。
14.   private mRenderingSettings: RenderingContextSettings = new RenderingContextSettings(true);
15.   private mCanvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.mRenderingSettings);
17.   // TODO 6.实现动画播放方法。
18.   lottieController(): void {
21.     lottie.stop();
22.     lottie.play(this.mName);
23.   }
25.   build() {
26.     Column() {
27.       // TODO 4.创建画布容器承载lottie
28.       Canvas(this.mCanvasRenderingContext)
29.         .width(px2vp(1000))
30.         .height(px2vp(1000))
31.         .backgroundColor(Color.Gray)
32.         .onReady(() => {
33.           //抗锯齿的设置
34.           this.mCanvasRenderingContext.imageSmoothingEnabled = true;
35.           this.mCanvasRenderingContext.imageSmoothingQuality = 'medium'
37.           // 加载动画前先销毁之前加载的动画
38.           lottie.destroy(this.mName);
39.           // TODO 5.加载lottie动画
40.           lottie.loadAnimation({
41.             container: this.mCanvasRenderingContext,
42.             renderer: 'canvas',
43.             frameRate: 60,                               //设置animator的刷帧率为30
44.             loop: true,
45.             autoplay: false,
46.             name: this.mName,
47.             path: this.mPath,
48.           });
49.         })
50.         .onDisAppear(() => {
51.           // 组件移除时，可销毁动画资源
52.           lottie.destroy(this.mName);
53.         })
55.       Text("点击播放动画")
56.         .fontSize(50)
57.         .fontWeight(FontWeight.Bold)
58.         .onClick(()=>{
59.           // TODO 7.在组件事件中调用播放方法
60.           this.lottieController();
61.         })
62.     }
63.     .height('100%')
64.     .width('100%')
65.     .justifyContent(FlexAlign.Center)
66.   }
67. }
69. // TODO 3.定义所需数据类型的接口，初始化变量，接口中需要包含资源路径信息和CanvasRenderingContext2D。
70. interface TabBarOption {
71.   index: number;
72.   text: ResourceStr;
73.   name: string;
74.   path: string;
75.   canvasRenderingContext: CanvasRenderingContext2D;
76. }

复制代码

---

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

---

以上示例代码，运行结果如下：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。