影片是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組件的使用，希望廣大開發者能利用這個強大的開源組件開發出更多精美的應用，
掃碼添加開發者小助手微信
獲取更多HarmonyOS開發資源和開發者活動資訊
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/431043.html
標籤：其他