HarmonyOS 鸿蒙Next应用如何使用lottie动画？

一、结论

https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie 进入鸿蒙三方库中心仓，选择lottie三方库，查看最新版本号，进行集成。

二、代码实现和详细解释

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

  "dependencies": {
    "[@ohos](/user/ohos)/lottie": "2.0.25"
  }

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

3.调用lottie动画依赖库

// TODO 1. 引入lottie三方库。
import lottie from '[@ohos](/user/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画布进行清空处理，画布清空后再绘制动画。

以上示例代码，运行效果如下：（https://lottiefiles.com/     lottie动画资源免费网站）