共计 2828 个字符，预计需要花费 8 分钟才能阅读完成。
动画是 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
@Component
struct 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 组件的应用，心愿宽广开发者能利用这个弱小的开源组件开发出更多精美的利用。
