Lottie組件提升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)畫能力。

一、Lottie介紹

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所示：

圖2 lottie繪制流程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、Lottie實(shí)戰(zhàn)

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

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

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

圖3 創(chuàng)建工程

2 添加依賴

成功創(chuàng)建項(xiàng)目后，接下來就是將Lottie組件下載至項(xiàng)目中。首先，我們需找到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并回車，此時(shí)Lottie組件會(huì)自動(dòng)下載至項(xiàng)目中。下載完成后工程根目錄下會(huì)生成node_modules/@ohos/lottie-ohos-ets目錄。

圖5 下載Lottie組件

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

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

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

圖6 json保存路徑

4 編寫邏輯代碼

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

importlottiefrom'@ohos/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%')  }}

(左右滑動(dòng)，查看更多)

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

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

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

審核編輯：湯梓紅