Lottie是一款能够为应用新增动画的开源元件,它可以解析AE(After Effects)汇出的json档案,让复杂的动画资源轻松执行在应用程式中。

动画是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绘制流程

1)动画载入准备,在使用Lottie载入动画前需先通过插件 bodymovin 将AE生成的动画档案转换为通用的 json 格式描述档案。开发者也可以从网际网路获取合适的动画资源直接应用。 获取连结:https://lottiefiles.com/

2)获取json档案中的动画资料。

3)解析json档案中的动画资料。

4)建立动画例项,设定动画资讯。

5)初始化布局宽高,设定绘制样式等资讯。

6)启动动画,触发逐帧绘制。

7)更新动画进度。

8)返回动画例项,通过loadAnimation()介面返回动画例项AnimationItem。

9)控制动画,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元件的使用,希望广大开发者能利用这个强大的开源元件开发出更多精美的应用。