HarmonyOS NEXT应用开发—Lottie

介绍

Lottie是一个适用于OpenHarmony的动画库，它可以解析Adobe After Effects软件通过Bodymovin插件导出的json格式的动画，并在移动设备上进行本地渲染， 可以在各种屏幕尺寸和分辨率上呈现，并且支持动画的交互性，通过添加触摸事件或其他用户交互操作，使动画更加生动和具有响应性。

效果图预览

使用说明：

1.进入页面，点击动画卡片，动画播放并且文本发生变化。

实现思路

1. 添加Lottie模块，源码参考oh-package.json5。

{
  "name": "lottieview",
  "version": "1.0.0",
  "description": "Please describe the basic information.",
  "main": "Index.ets",
  "author": "",
  "license": "Apache-2.0",
  "dependencies": {
    // Lottie模块
    "@ohos/lottie": "2.0.0",
  }
}

1. 将Lottie的资源文件data.json文件放置到Entry目录下的common文件夹下(放置本模块中，使用相对路径无法读取)。数据参考politeChicky.json
2. 进入页面，通过Canvas的onReady函数加载动画，点击播放动画，动画执行播放，文本刷新。源码参考LotieView.ets

  // 加载动画
  loadAnimation(autoplay: boolean) {
    if (this.animateItem !== null) {
      this.animateItem.destroy();
      this.animateItem = null;
    }
    // TODO:知识点:lottie.loadAnimation将json数据生成动画
    this.animateItem = lottie.loadAnimation({
      container: this.politeChickyController,
      renderer: 'canvas',
      loop: false,
      autoplay: autoplay,
      name: this.politeChicky,
      path: this.politeChickyPath,
      initialSegment: [FRAME_START, FRAME_END]
    })
  }

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      // 动画
      Canvas(this.politeChickyController)
        .width($r('app.integer.canvas_size'))
        .height($r('app.integer.canvas_size'))
        .backgroundColor($r('app.color.ohos_id_color_palette2'))
        .borderRadius($r('app.string.ohos_id_corner_radius_default_m'))
        .onReady(() => {
          this.loadAnimation(false);
        })
        .onClick(() => {
          this.loadAnimation(true);
          this.times++;
        })
      // 响应动画的文本
      Text(this.textArray[this.times % TEXT_DATA_LENGTH])
        .fontSize($r('app.string.ohos_id_text_size_headline'))
        .margin($r('app.string.ohos_id_elements_margin_vertical_m'))
        .fontColor(Color.White)
    }.margin({ top: $r('app.string.ohos_id_elements_margin_vertical_l') })
  }
}

高性能知识点

不涉及。

工程结构&模块类型

lottieview                                         // har类型
|---view
|   |---LottieView.ets                             // 视图层-应用主页面

模块依赖

本实例依赖common模块来实现日志的打印、资源 的调用、动态路由模块来实现页面的动态加载以及Lottie模块，版本为2.0.0。

参考资料

Lottie

最后分享一份鸿蒙（HarmonyOS）开发学习指南需要的可以扫码免费领取！！！

《鸿蒙（HarmonyOS）开发学习指南》

第一章 快速入门

1、开发准备

2、构建第一个ArkTS应用（Stage模型）

3、构建第一个ArkTS应用（FA模型）

4、构建第一个JS应用（FA模型）

5、…

第二章 开发基础知识

1、应用程序包基础知识

2、应用配置文件（Stage模型）

3、应用配置文件概述（FA模型）

4、…

第三章 资源分类与访问

1、 资源分类与访问

2、 创建资源目录和资源文件

3、 资源访问

4、…

第四章 学习ArkTs语言

1、初识ArkTS语言

2、基本语法

3、状态管理

4、其他状态管理

5、渲染控制

6、…

第五章 UI开发

1.方舟开发框架（ArkUI）概述

2.基于ArkTS声明式开发范式

3.兼容JS的类Web开发范式

4…

第六章 Web开发

1.Web组件概述

2.使用Web组件加载页面

3.设置基本属性和事件

4.在应用中使用前端页面JavaScript

5.ArkTS语言基础类库概述

6.并发

7…

11.网络与连接

12.电话服务

13.数据管理

14.文件管理

15.后台任务管理

16.设备管理

17…

第七章 应用模型

1.应用模型概述

2.Stage模型开发指导

3.FA模型开发指导

4…