【鸿蒙开发】第3课，Lottie动画【鸿蒙开发】第3课, 本文将详细介绍在鸿蒙开发中使用Lottie动画库的相关内容，包

鸿蒙开发中的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

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

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

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

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

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

'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动画库时，需要注意以下几点：

动画加载时机：建议在Canvas组件的onReady方法中加载动画，以确保动画在画布准备好后才开始播放。
动画销毁：在页面销毁或卸载时，需要销毁动画以释放资源。可以使用lottie.destroy(name)方法来销毁指定名称的动画。
抗锯齿设置：为减少动画边缘的锯齿状现象，建议添加抗锯齿设置，如imageSmoothingEnabled和imageSmoothingQuality。
JSON文件路径：确保JSON动画文件路径正确，且文件放置在项目的资源目录中。路径应为相对于pages父文件夹的基准路径。
混淆处理：在使用混淆编译时，需要在obfuscation-rules.txt文件中添加配置以避免编译报错，如-keep ./oh_modules/@ohos/lottie。
动画性能：复杂的动画可能会消耗较多的系统资源，影响应用性能。因此，在设计和使用动画时，需要权衡动画效果和应用性能。
更多动画属性：如需查看更详细的动画属性，可点击进入源码，内有详细的中文注释说明。