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

Lottie允许应用程序像使用静态图像一样轻松使用动画。目前在鸿蒙平台上，也进行了适配： 鸿蒙lottie动画三方库地址

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

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

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

"dependencies": {

    "@ohos/lottie": "2.0.14"

  }

1.

2.

3.

2.将lottie动画JSON文件放到项目文件夹中

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

-----------------------------------

©著作权归作者所有：来自51CTO博客作者GeorgePanda的原创作品，请联系作者获取转载授权，否则将追究法律责任

【HarmonyOS NEXT】鸿蒙应用使用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.创建画布容器承载lottie      Canvas(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的刷帧率为30            loop: 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画布进行清空处理，画布清空后再绘制动画。

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

-----------------------------------

©著作权归作者所有：来自51CTO博客作者GeorgePanda的原创作品，请联系作者获取转载授权，否则将追究法律责任

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