動畫是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 格式描述檔案。開發者也可以從網際網路獲取合適的動畫資源直接應用。 獲取連結：

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元件的使用，希望廣大開發者能利用這個強大的開源元件開發出更多精美的應用。

掃碼新增開發者小助手微信

獲取更多HarmonyOS開發資源和開發者活動資訊