动画是UI界面的重要元素之一，精心设计的动画能使UI界面更直观，有助于改良应用程序的外观并改善用户体验。

ArkUI开发框架为开发者提供了丰盛的动画能力，如属性动画、转场动画及自定义动画等。这些动画能力帮忙开发者丑化了UI界面，但不适用于绘制某些比较复杂的动画，例如，属性动画次要针对动画的通用属性进行动态变化，内容动效不够丰盛，且变更时须要批改或重写代码；Gif动态图放大后锯齿显著，精度越高占用存储空间越大，间接影响安装包的大小；svg动画DOM节点多开销大，不足与用户的交互。因而，咱们引入了比拟成熟的Lottie组件，晋升了ArkUI开发框架的动画能力。

一、Lottie介绍

1、什么是Lottie？

Lottie是一款可能为利用增加动画的开源组件，它能够解析AE（After Effects）导出的json文件，让简单的动画资源轻松运行在应用程序中。如图1所示，动画文件通过AE的bodymovin插件转换成通用的json格局形容文件后，利用开发者只需应用Lottie解析json文件，就能将动画绘制进去。


图1 整体流程

2、Lottie绘制流程

Lottie解析json格局的动画形容文件后，会基于canvas 画布进行2D渲染，并联合原生组件Animator实现动画成果。具体绘制流程如下图2所示：


图2 lottie绘制流程
动画加载筹备，在应用Lottie加载动画前需先通过插件 bodymovin 将AE生成的动画文件转换为通用的 json 格局形容文件。开发者也能够从互联网获取适合的动画资源间接利用。
获取链接：https://lottiefiles.com/
获取json文件中的动画数据。

解析json文件中的动画数据。

创立动画实例，设置动画信息。

初始化布局宽高，设置绘制款式等信息。

启动动画，触发逐帧绘制。

更新动画进度。

返回动画实例，通过loadAnimation()接口返回动画实例AnimationItem。

管制动画，Lottie提供了一整套简洁易用API，如进行stop()、暂停pause()、播放play()、播放流转togglePause()、方向setDirection()、速度setSpeed()等。
3、Lottie长处

通过上文的介绍，咱们能够总结出Lottie的以下长处：

只需应用Lottie解析json文件就能实现动画的加载，基本上实现了0代码开发。

利用开发者能够通过批改json文件的参数，将动画运行到不同的应用程序中，实现动画的一次设计多端应用。

利用开发者可从网络间接下载json文件，实时更新动画资源。

Lottie基于canvas 画布进行根底的2D渲染，让动画晦涩度更高。

Lottie能够将UX设计师给出的简单动画成果100%还原到应用程序中 。

Lottie提供了丰盛的API，让开发者能轻松管制动画，大大提高了开发效率。

二、Lottie实战

通过上文对Lottie的介绍，置信很多小伙伴曾经感触到了Lottie组件的弱小，上面咱们将通过一个简略的动画示例来为大家展现ArkUI开发框架中Lottie组件的应用。
1、创立我的项目

如图3所示，在DevEco Studio中新建Lottis_Test我的项目，我的项目类型抉择Application，语言选择eTS，点击Finish实现创立。

图3 创立工程

2、增加依赖

胜利创立我的项目后，接下来就是将Lottie组件下载至我的项目中。首先，咱们需找到npm配置文件，并在.npmrc 配置文件中增加 @ohos 的scope仓库地址：@ohos:registry=https://repo.harmonyos.com/npm/，如图4所示：

图4 指定npm仓库地址

配置好npm仓库地址后，如图5所示，在DevEcoStudio的底部导航栏，点击“Terminal”（快捷键Alt+F12），键入命令：npm install @ohos/lottie-ohos-ets并回车，此时Lottie组件会主动下载至我的项目中。下载实现后工程根目录下会生成node_modules/@ohos/lottie-ohos-ets目录。


图5 下载Lottie组件
注：因为目前lottie组件正在开源筹备中，@ohos/lottie-ohos-ets仓库预计在3月底公布，敬请期待。
3、导出动画资源并保留

将After Effects 导出的json动画资源文件保留到我的项目中，如图6所示，保留门路如下：entry/src/main/ets/MainAbility/common/lottie/animation.json,


图6 json保留门路

4、编写逻辑代码

应用扩大的TS语言在工程的index.ets文件中编写业务逻辑代码 ，为了兼顾资源的及时开释，在组件@Component申明内的申明周期onDisappear()或onPageHide()中调用lottie.destory()开释资源。示例代码如下所示：

import lottie from '@ohos/lottie-ohos-ets'@Entry@Componentstruct Index {  private controller: RenderingContext = new RenderingContext();// 动画别名  private animateName: string = "animation";// 动画资源相对路径  private animatePath: string = "common/lottie/animation.json";  private onPageHide(): void {    // 随页面暗藏销毁动画    lottie.destroy();  }  build() {    Column() {      // 申明Animator与Canvas组件      Animator('__lottie_ets')      Canvas(this.controller)        .width('30%')        .height('20%')        .backgroundColor('#ff0000')        .onAppear(() => {          // 随Canvas布局主动加载动画          let anim = lottie.loadAnimation({            container: this.controller,            renderer: 'canvas',            loop: true,            autoplay: true,            name: this.animateName,            path: this.animatePath          })        })      Button('togglePause')        .onClick(() => {          // 申明button按键与设置点击事件，通过点击管制动画暂停与播放的切换          lottie.togglePause(this.animateName);        })    }    .width('100%')    .height('100%')  }}

成果如下所示：

以上就是ArkUI开发框架中Lottie组件的应用，心愿宽广开发者能利用这个弱小的开源组件开发出更多精美的利用。