【鸿蒙开发】第3课,Lottie动画

187 阅读6分钟

鸿蒙开发中的Lottie动画库介绍

Lottie是一个开源的动画库,由Airbnb团队开发,支持将Adobe After Effects制作的动画导出为JSON格式,并在多平台应用上播放。在鸿蒙(HarmonyOS)开发中,Lottie同样得到了广泛应用,为开发者提供了一种高效且美观的方式来实现动画效果。本文将详细介绍在鸿蒙开发中使用Lottie动画库的相关内容,包括Lottie的属性、使用示例及注意事项。

1 Lottie在鸿蒙中的应用

Lottie动画库在鸿蒙开发中具有显著优势。它可以解析After Effects软件通过Bodymovin插件导出的JSON格式动画,并在鸿蒙设备上进行本地渲染。这意味着开发者无需为不同平台编写不同的动画代码,只需一份JSON文件即可实现跨平台动画效果。此外,Lottie还支持动画的交互性,通过添加触摸事件或其他用户交互操作,使动画更加生动和具有响应性。

2 Lottie的属性

Lottie动画库在鸿蒙开发中提供了丰富的属性设置,以满足不同场景下的动画需求。以下是一些常用的属性:

  • container:指定动画渲染的容器,通常是Canvas组件的渲染上下文。
  • renderer:指定渲染方式,如'canvas'、'svg'等。在鸿蒙开发中,常用的是'canvas'渲染方式。
  • loop:设置动画是否循环播放,默认为true
  • autoplay:设置动画是否自动播放,默认为false
  • name:为动画指定一个名称,便于后续管理和销毁。
  • contentMode:设置动画的填充模式,如'Contain'、'Cover'等。
  • path:指定JSON动画文件的路径。
  • frameRate:设置动画的帧率,默认为30帧/秒。
  • initialSegment:设置动画播放的起始和结束帧,以实现动画片段的播放。

此外,Lottie还支持动画的交互操作,如播放、暂停、停止、设置播放速度等,以及动画颜色的修改和动画填充模式的调整。

3 安装与配置

在鸿蒙开发中,使用Lottie动画库首先需要进行安装和配置。以下是具体的步骤:

3.1 安装Lottie库: 在鸿蒙项目中,可以通过ohpm(OpenHarmony Package Manager)来安装Lottie库。打开终端,输入以下命令:

ohpm install @ohos/lottie

image.png 3.2 配置项目: 安装完成后,需要在鸿蒙项目的配置文件中添加Lottie库的依赖。例如,在package.json文件中添加:

{
  "dependencies": {
    "@ohos/lottie": "最新版本号"
  }
}

image.png

3.3 导入Lottie模块: 在鸿蒙应用的源代码中,通过import语句导入Lottie模块:

import lottie, { AnimationItem } from '@ohos/lottie';

3.4 存放Lottie的JSON文件:路径仅支持entry/src/main/ets 路径下的相对路径:

image.png

'common/AndroidWave.json'

4 使用示例

以下是一个在鸿蒙应用中使用Lottie加载和播放动画的完整示例,并展示了如何设置动画属性:

动画.gif

import lottie, { AnimationItem } from '@ohos/lottie'; // 导入Lottie动画库及其AnimationItem类型

@Entry // 装饰器,标记为页面入口
@Component // 装饰器,定义为一个组件
struct Index {
  // 初始化渲染上下文设置,开启抗锯齿
  private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true);

  // 初始化一个2D画布上下文,传入渲染设置
  private canvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings);

  // 保存当前动画实例,初始值为null
  private animateItem: AnimationItem | null = null;

  private animateName: string = "animation"; // 定义动画的名称

  // 页面即将销毁时执行的生命周期方法,用于释放动画资源
  aboutToDisappear(): void {
    console.info('aboutToDisappear'); // 打印日志,表示页面即将销毁
    this.destroy(); // 调用销毁方法清理动画资源
  }

  // 构建UI的方法
  build() {
    Column() { // 使用垂直线性布局
      Row() { // 使用水平线性布局
        // 关联画布组件
        Canvas(this.canvasRenderingContext)
          .width(300) // 设置画布宽度为300像素
          .height(300) // 设置画布高度为300像素
          .backgroundColor(Color.Gray) // 设置画布背景色为灰色
          .onReady(() => {
            // 画布准备就绪时的回调
            if (this.animateItem != null) {
              // 如果动画实例已存在,调整动画尺寸
              this.animateItem?.resize();
            } else {
              // 如果动画实例不存在,初始化画布设置并加载动画
              // 开启画布的图像平滑处理(抗锯齿)
              this.canvasRenderingContext.imageSmoothingEnabled = true;

              this.canvasRenderingContext.imageSmoothingQuality = 'medium';
              // 设置平滑处理的质量为中等

              this.loadAnimation(); // 调用加载动画的方法
            }
          })
      }

      // 控制按钮区域
      Row() { // 使用水平线性布局
        Button('播放') // 播放按钮
          .onClick(() => {
            // 点击事件回调
            if (this.animateItem) {
              // 如果动画实例存在,播放动画
              this.animateItem.play();
            }
          })
        Button('暂停') // 暂停按钮
          .onClick(() => {
            // 点击事件回调
            if (this.animateItem) {
              // 如果动画实例存在,暂停动画
              this.animateItem.pause();
            }
          })
        Button('停止') // 停止按钮
          .onClick(() => {
            // 点击事件回调
            if (this.animateItem) {
              // 如果动画实例存在,停止动画
              this.animateItem.stop();
            }
          })
      }
    }
  }

  // 加载动画的方法
  loadAnimation() {
    this.animateItem = lottie.loadAnimation({
      // 设置动画渲染容器为画布上下文
      container: this.canvasRenderingContext,

      // 使用canvas渲染模式
      renderer: 'canvas',

      // 动画是否循环播放
      loop: true,

      // 动画是否自动播放
      autoplay: false,

      // 动画实例的名称
      name: this.animateName,

      // 设置动画内容的缩放模式为“包含”
      contentMode: 'Contain',

      // JSON动画文件的路径
      path: "common/AndroidWave.json",

      // 设置动画的帧率为60帧每秒
      frameRate: 60,

      // (注释掉)设置动画播放的起始帧和结束帧
      // initialSegment: [0, 100],
      
    });

    // 动画是异步加载的,需要在加载完成回调里对动画进行操作
    this.animateItem.addEventListener('DOMLoaded', (args: Object): void => {
      // 当动画DOM加载完成时触发事件
      // (注释掉)修改动画的颜色为红色
      // this.animateItem?.changeColor([255, 0, 0, 1]);

      // 动画加载完成后自动播放
      this.animateItem?.play();
      
    });
  }

  // 销毁动画实例并释放资源的方法
  destroy() {
    console.log("destroy"); // 打印日志,表示动画资源销毁

    // 移除动画的加载完成事件监听器
    this.animateItem?.removeEventListener("DOMLoaded");

    // 销毁指定名称的动画实例
    lottie.destroy(this.animateName);

    // 将动画实例变量置为null,释放内存
    this.animateItem = null;
  }
}

5 注意事项

在使用Lottie动画库时,需要注意以下几点:

  1. 动画加载时机: 建议在Canvas组件的onReady方法中加载动画,以确保动画在画布准备好后才开始播放。

  2. 动画销毁: 在页面销毁或卸载时,需要销毁动画以释放资源。可以使用lottie.destroy(name)方法来销毁指定名称的动画。

  3. 抗锯齿设置: 为减少动画边缘的锯齿状现象,建议添加抗锯齿设置,如imageSmoothingEnabledimageSmoothingQuality

  4. JSON文件路径: 确保JSON动画文件路径正确,且文件放置在项目的资源目录中。路径应为相对于pages父文件夹的基准路径。

  5. 混淆处理: 在使用混淆编译时,需要在obfuscation-rules.txt文件中添加配置以避免编译报错,如-keep ./oh_modules/@ohos/lottie

  6. 动画性能: 复杂的动画可能会消耗较多的系统资源,影响应用性能。因此,在设计和使用动画时,需要权衡动画效果和应用性能。

  7. 更多动画属性: 如需查看更详细的动画属性,可点击进入源码,内有详细的中文注释说明。

image.png