ArkUI開發(fā)框架的動(dòng)畫能力

動(dòng)畫是 UI 界面的重要元素之一，精心設(shè)計(jì)的動(dòng)畫能使 UI 界面更直觀，有助于改進(jìn)應(yīng)用程序的外觀并改善用戶體驗(yàn)。

ArkUI 開發(fā)框架為開發(fā)者提供了豐富的動(dòng)畫能力，如屬性動(dòng)畫、轉(zhuǎn)場(chǎng)動(dòng)畫及自定義動(dòng)畫等。這些動(dòng)畫能力幫助開發(fā)者美化了 UI 界面，但不適用于繪制某些比較復(fù)雜的動(dòng)畫，例如，屬性動(dòng)畫主要針對(duì)動(dòng)畫的通用屬性進(jìn)行動(dòng)態(tài)變化，內(nèi)容動(dòng)效不夠豐富，且變更時(shí)需要修改或重寫代碼；Gif 動(dòng)態(tài)圖放大后鋸齒明顯，精度越高占用存儲(chǔ)空間越大，直接影響安裝包的大??；svg 動(dòng)畫 DOM 節(jié)點(diǎn)多開銷大，缺乏與用戶的交互。因此，我們引入了比較成熟的 Lottie 組件，提升了 ArkUI 開發(fā)框架的動(dòng)畫能力。

1. Lottie介紹

Lottie 組件效果如下所示：

1.1 什么是Lottie？

Lottie 是一款能夠?yàn)閼?yīng)用添加動(dòng)畫的開源組件，它可以解析 AE（After Effects）導(dǎo)出的 json 文件，讓復(fù)雜的動(dòng)畫資源輕松運(yùn)行在應(yīng)用程序中。如圖 1 所示，動(dòng)畫文件通過 AE 的 bodymovin 插件轉(zhuǎn)換成通用的 json 格式描述文件后，應(yīng)用開發(fā)者只需使用 Lottie 解析 json 文件，就能將動(dòng)畫繪制出來。

1.2 Lottie繪制流程

Lottie 解析 json 格式的動(dòng)畫描述文件后，會(huì)基于 canvas 畫布進(jìn)行 2D 渲染，并結(jié)合原生組件 Animator 實(shí)現(xiàn)動(dòng)畫效果。具體繪制流程如下圖 2 所示：

1．動(dòng)畫加載準(zhǔn)備，在使用 Lottie 加載動(dòng)畫前需先通過插件 bodymovin 將 AE 生成的動(dòng)畫文件轉(zhuǎn)換為通用的 json 格式描述文件。開發(fā)者也可以從互聯(lián)網(wǎng)獲取合適的動(dòng)畫資源直接應(yīng)用， 比如：

https://lottiefiles.com/https://lottiefiles.com/https://lottiefiles.com/ 。

2. 獲取 json 文件中的動(dòng)畫數(shù)據(jù)。

3. 解析 json 文件中的動(dòng)畫數(shù)據(jù)。

4. 創(chuàng)建動(dòng)畫實(shí)例，設(shè)置動(dòng)畫信息。

5. 初始化布局寬高，設(shè)置繪制樣式等信息。

6. 啟動(dòng)動(dòng)畫，觸發(fā)逐幀繪制。

7. 更新動(dòng)畫進(jìn)度。

8. 返回動(dòng)畫實(shí)例，通過 loadAnimation() 接口返回動(dòng)畫實(shí)例 AnimationItem。

9. 控制動(dòng)畫，Lottie 提供了一整套簡潔易用 API，如停止 stop()、暫停 pause()、播放 play()、播放流轉(zhuǎn) togglePause()、方向 setDirection()、速度 setSpeed() 等。

1.3 Lottie優(yōu)點(diǎn)

通過上文的介紹，我們可以總結(jié)出 Lottie 的以下優(yōu)點(diǎn)：

1. 只需使用 Lottie 解析 json 文件就能實(shí)現(xiàn)動(dòng)畫的加載，基本上實(shí)現(xiàn)了 0 代碼開發(fā)。

2. 應(yīng)用開發(fā)者可以通過修改 json 文件的參數(shù)，將動(dòng)畫運(yùn)行到不同的應(yīng)用程序中，實(shí)現(xiàn)動(dòng)畫的一次設(shè)計(jì)多端使用。

3. 應(yīng)用開發(fā)者可從網(wǎng)絡(luò)直接下載 json 文件，實(shí)時(shí)更新動(dòng)畫資源。

4. Lottie 基于 canvas 畫布進(jìn)行基礎(chǔ)的 2D 渲染，讓動(dòng)畫流暢度更高。

5. Lottie 可以將 UX 設(shè)計(jì)師給出的復(fù)雜動(dòng)畫效果 100% 還原到應(yīng)用程序中 。

6. Lottie 提供了豐富的 API，讓開發(fā)者能輕松控制動(dòng)畫，大大提高了開發(fā)效率。

2. Lottie實(shí)戰(zhàn)

通過上文對(duì) Lottie 的介紹，相信很多小伙伴已經(jīng)感受到了 Lottie 組件的強(qiáng)大，下面我們將通過一個(gè)簡單的動(dòng)畫示例來為大家展示 ArkUI 開發(fā)框架中 Lottie 組件的使用。

2.1 創(chuàng)建項(xiàng)目

如圖 3 所示，在 DevEco Studio 中新建 Lottis_Test 項(xiàng)目，項(xiàng)目類型選擇 Application，語言選擇 eTS，點(diǎn)擊 Finish 完成創(chuàng)建。

2.2 添加依賴

成功創(chuàng)建項(xiàng)目后，接下來就是將 Lottie 組件下載至項(xiàng)目中。首先，我們需找到 npm 配置文件，并在 .npmrc 配置文件中添加 @ohos 的 scope 倉庫地址：@ohos:registry=https://repo.harmonyos.com/npm/，如圖 4 的 scope 倉庫地址：@ohos:registry=https://repo.harmonyos.com/npm/，如圖 4 的 scope 倉庫地址：@ohos:registry=https://repo.harmonyos.com/npm/，如圖 4 所示：

圖4 指定npm倉庫地址

配置好 npm 倉庫地址后，如圖 5 所示，在 DevEco Studio 的底部導(dǎo)航欄，點(diǎn)擊“Terminal”（快捷鍵 Alt+F12）， 鍵入命令：npm install @ohos/lottie-ohos-ets 并回車，此時(shí) Lottie 組件會(huì)自動(dòng)下載至項(xiàng)目中。下載完成后工程根目錄下會(huì)生成 node_modules/@ohos/lottie-ohos-etsnode_modules/@ohos/lottie-ohos-etsnode_modules/@ohos/lottie-ohos-ets 目錄。

2.3 導(dǎo)出動(dòng)畫資源并保存

將 After Effects 導(dǎo)出的 json 動(dòng)畫資源文件保存到項(xiàng)目中，保存路徑如下：entry/src/main/ets/MainAbility/common/lottie/animation.json

圖6 json保存路徑

2.4 編寫邏輯代碼

import lottie from 'lottie-ohos-ets'

@Entry@Componentstruct Index {  private controller: RenderingContext = new RenderingContext();// 動(dòng)畫別名  private animateName: string = "animation";// 動(dòng)畫資源相對(duì)路徑  private animatePath: string = "common/lottie/animation.json";  private onPageHide(): void {    // 隨頁面隱藏銷毀動(dòng)畫    lottie.destroy();  }  build() {    Column() {      // 聲明Animator與Canvas組件      Animator('__lottie_ets')      Canvas(this.controller)        .width('30%')        .height('20%')        .backgroundColor('#ff0000')        .onAppear(() => {          // 隨Canvas布局自動(dòng)加載動(dòng)畫          let anim = lottie.loadAnimation({            container: this.controller,            renderer: 'canvas',            loop: true,            autoplay: true,            name: this.animateName,            path: this.animatePath          })        })      Button('togglePause')        .onClick(() => {          // 聲明button按鍵與設(shè)置點(diǎn)擊事件，通過點(diǎn)擊控制動(dòng)畫暫停與播放的切換          lottie.togglePause(this.animateName);        })    }    .width('100%')    .height('100%')  }}