纯血鸿蒙APP第三方库——Lottie

介绍

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

效果图预览

使用说明：

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

实现思路

1. 添加Lottie模块。

{
  "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",
  }
}

2. 将Lottie的资源文件data.json文件放置到Entry目录下的common文件夹下(放置本模块中，使用相对路径无法读取)。

3. 进入页面，通过Canvas的onReady函数加载动画，点击播放动画，动画执行播放，文本刷新。

  // 加载动画
  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.lottie_view_canvas_size'))
        .height($r('app.integer.lottie_view_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

鸿蒙全栈开发全新学习指南

也为了积极培养鸿蒙生态人才，让大家都能学习到鸿蒙开发最新的技术，针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线【包含了大厂APP实战项目开发】。

本路线共分为四个阶段：

第一阶段：鸿蒙初中级开发必备技能

第二阶段：鸿蒙南北双向高工技能基础：gitee.com/MNxiaona/733GH

第三阶段：应用开发中高级就业技术

第四阶段：全网首发-工业级南向设备开发就业技术：gitee.com/MNxiaona/733GH

《鸿蒙 (Harmony OS)开发学习手册》（共计892页）

如何快速入门？

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识:gitee.com/MNxiaona/733GH

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

鸿蒙开发面试真题（含参考答案）:gitee.com/MNxiaona/733GH

鸿蒙入门教学视频：

美团APP实战开发教学：gitee.com/MNxiaona/733GH

写在最后

• 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
• 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
• 想要获取更多完整鸿蒙最新学习资源，请移步前往小编：gitee.com/MNxiaona/733GH