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

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

article 2024/12/4 11:47:42

【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.创建画布容器承载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画布进行清空处理，画布清空后再绘制动画。

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