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

2025-06-30 23:30:12
106次阅读
0个评论

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

##鸿蒙开发能力 ##HarmonyOS SDK应用服务##鸿蒙金融类应用 (金融理财#

一、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画布进行清空处理,画布清空后再绘制动画。


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

收藏00

登录 后评论。没有帐号? 注册 一个。