Lottie組件提升ArkUI開發(fā)框架的動畫能力

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

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

一、Lottie介紹

1 什么是Lottie?

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

圖1 整體流程

2 Lottie繪制流程

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

圖2 lottie繪制流程

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

獲取json文件中的動畫數(shù)據(jù)。

解析json文件中的動畫數(shù)據(jù)。

創(chuàng)建動畫實例，設(shè)置動畫信息。

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

啟動動畫，觸發(fā)逐幀繪制。

更新動畫進(jìn)度。

返回動畫實例，通過loadAnimation()接口返回動畫實例AnimationItem。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、Lottie實戰(zhàn)

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

1 創(chuàng)建項目

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

圖3 創(chuàng)建工程

2 添加依賴

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

? ???

圖4 指定npm倉庫地址

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

圖5 下載Lottie組件

注：由于目前l(fā)ottie組件正在開源準(zhǔn)備中，@ohos/lottie-ohos-ets倉庫預(yù)計在3月底發(fā)布，敬請期待。

3 導(dǎo)出動畫資源并保存

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

圖6 json保存路徑

4 編寫邏輯代碼

使用擴(kuò)展的TS語言在工程的index.ets文件中編寫業(yè)務(wù)邏輯代碼 ，為了兼顧資源的及時釋放，在組件@Component聲明內(nèi)的聲明周期onDisappear()或onPageHide()中調(diào)用lottie.destory()釋放資源。示例代碼如下所示：

复制importlottiefrom'@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按鍵與設(shè)置點(diǎn)擊事件，通過點(diǎn)擊控制動畫暫停與播放的切換复制          lottie.togglePause(this.animateName);复制        })复制    }复制    .width('100%')复制    .height('100%')复制  }复制}

(左右滑動，查看更多)

以上就是ArkUI開發(fā)框架中Lottie組件的使用，希望廣大開發(fā)者能利用這個強(qiáng)大的開源組件開發(fā)出更多精美的應(yīng)用。

原文標(biāo)題：Lottie組件，讓動畫繪制更簡單

文章出處：【微信公眾號：HarmonyOS開發(fā)者】歡迎添加關(guān)注!文章轉(zhuǎn)載請注明出處。

審核編輯：湯梓紅