HarmonyOS：三方庫的基本使用（2）

为敢技术發表於2024-10-27

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤部落格園地址：為敢技術（https://www.cnblogs.com/strengthen/ ）
➤GitHub地址：https://github.com/strengthen
➤原文地址：https://www.cnblogs.com/strengthen/p/18508470
➤如果連結不是為敢技術的部落格園地址，則可能是爬取作者的文章。
➤原文已修改更新！強烈建議點選原文地址閱讀！支援作者！支援原創！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

如何獲取三方庫

目前提供了兩種途徑獲取開源三方庫：

  1. 透過訪問Gitee網站開源社群獲取

    在Gitee中，搜尋OpenHarmony-TPC倉庫，在tpc_resource中對三方庫進行了資源彙總，可以供開發者參考。

  2. 透過OpenHarmony三方庫中心倉獲取

    進入OpenHarmony三方庫中心倉，根據型別或者直接搜尋尋找需要的三方庫。

常用三方庫介紹

常用的三方庫可以分為UI、動畫、網路、圖片、多媒體、資料儲存、安全、工具等。

  • UI庫：
    • @ohos/textlayoutbuilder：可以定製任一樣式的文字構建工具，包括字型間距、大小、顏色、富文字高亮顯示等。
    • @ohos/roundedimageview：可以生成圓角矩形、或者橢圓形等圖片形狀。
  • 網路庫：
    • @ohos/axios：可以執行在node.js 和瀏覽器中，基於Axios 原庫v1.3.4版本進行適配，並沿用其現有用法和特性。
  • 動畫庫：
    • @ohos/lottie：可以解析Adobe After Effects軟體透過Bodymovin外掛匯出的json格式的動畫，並在移動裝置上進行本地渲染。
    • @ohos/svg：可以解析SVG圖片並渲染到頁面上。

其他類別不單獨介紹，感興趣的可以前往Gitee或者三方庫中心倉瞭解更多。

三方庫在系統能力的基礎上，提供了更加方便的使用，在許多場景下，能夠極大提升開發者的開發效率，下面將以@ohos/lottie為例介紹三方庫的基本使用。

使用開源三方庫@ohos/lottie

本節介紹@ohos/lottie定義、安裝、解除安裝與使用。

什麼是@ohos/lottie

@ohos/lottie是基於lottie-web開發，整合在三方庫社群內的開源版本，是HarmonyOS系統中複雜動畫的一種解決方案。

動畫是傳達想法和創造更好的使用者互動體驗的工具，常見使用動畫的場景如下：

  • 啟動動畫：APP logo動畫的播放。
  • 載入動畫：網路請求的loading動畫。
  • 上下拉重新整理動畫：請求更多資源時的重新整理動畫。
  • 按鈕動畫：切換按鈕、編輯按鈕、播放按鈕等按鈕的切換過渡動畫。
  • 檢視轉場動畫：一些場景的轉場新增動畫能夠提升使用者體驗。

@ohos/lottie提供了使用JSON動畫檔案的解決方案，開發者可以在原生應用中像使用靜態影像一樣使用動畫，而不用關注動畫的實現過程，並且@ohos/lottie具有一套完整的API控制動畫的行為，可以讓動畫更具有互動性。接下來將介紹@ohos/lottie的安裝和基本使用。

@ohos/lottie的安裝與解除安裝

  • 安裝@ohos/lottie

    透過ohpm執行對應的指令，將lottie安裝到專案中。

    ohpm install @ohos/lottie
  • 解除安裝@ohos/lottie
    透過ohpm執行解除安裝指令，將lottie從專案中刪除，其程式包和配置資訊將會從專案中移除。 
    ohpm uninstall @ohos/lottie

使用@ohos/lottie

  • @ohos/lottie的引入

    透過import指令在專案中引入@ohos/lottie到檔案中。

    import lottie from '@ohos/lottie'
  • 構建Canvas畫布

    @ohos/lottie解析JSON動畫檔案的資料需要基於Canvas 畫布進行2D渲染，所以在載入JSON動畫之前，要先初始化渲染上下文，並在畫面中建立Canvas畫布區域，將對應的渲染上下文renderingContext傳遞給Canvas。

    // 初始化渲染上下文  
private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true) // 設定開啟抗鋸齒
private renderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings)  // 建立2D渲染上下文

// 載入Canvas畫布   
Canvas(this.renderingContext)
  ...
  • 使用@ohos/lottie載入JSON動畫

    載入JSON動畫需要用到loadAnimation方法，在方法中需配置相應的初始設定，包括渲染上下文、渲染方式以及JSON動畫資源的路徑等。可以直接使用lottie.loadAnimation方法，也可以用一個animationItem例項來接收返回的animationItem物件。 

    // 用animationItem例項接收
let animationItem = lottie.loadAnimation({
            container: this.renderingContext,            // 渲染上下文
            renderer: 'canvas',                          // 渲染方式
            loop: true,                                  // 是否迴圈播放,預設true
            autoplay: true,                              // 是否自動播放，預設true
            path: 'common/lottie/data.json',             // json路徑
          })      
    lottie.loadAnimation({                               // 或者直接使用
            container: this.renderingContext,            // 渲染上下文
            renderer: 'canvas',                          // 渲染方式
            loop: true,                                  // 是否迴圈播放,預設true
            autoplay: true,                              // 是否自動播放，預設true
            path: 'common/lottie/data.json',             // json路徑
          })
  • @ohos/lottie控制動畫

    @ohos/lottie內封裝了包括狀態控制，進度控制，播放設定控制和屬性控制等多個API，使用者可以利用這些API完成對動畫的控制，實現更加靈活的互動效果。

    // 播放、暫停、停止、銷燬  可以使用lottie，也可以使用animationItem例項進行控制
lottie.play();        // 從目前停止的幀開始播放
lottie.stop();        // 停止播放，回到第0幀
lottie.pause();       // 暫停該動畫，在當前幀停止並保持
lottie.togglePause(); // 切換暫停/播放狀態
lottie.destroy();     // 刪除該動畫，移除相應的元素標籤等。在unmount的時候，需要呼叫該方法

// 播放進度控制
animationItem.goToAndStop(value, isFrame); // 跳到某個時刻/幀並停止。isFrame(預設false)指示value表示幀還是時間(毫秒)
animationItem.goToAndPlay(value, isFrame); // 跳到某個時刻/幀並進行播放
animationItem.goToAndStop(30, true);       // 例：跳轉到第30幀並停止
animationItem.goToAndPlay(300);            // 例：跳轉到第300毫秒並播放

// 控制幀播放
animationItem.setSegment(5,15);             // 限定動畫資源播放時的整體幀範圍，即設定動畫片段
animationItem.resetSegments(5,15);          // 重置播放的動畫片段
animationItem.playSegments(arr, forceFlag); // arr可以包含兩個數字或者兩個數字組成的陣列，forceFlag表示是否立即強制播放該片段
animationItem.playSegments([10,20], false); // 例：播放完之前的片段，播放10-20幀
animationItem.playSegments([[5,15],[20,30]], true); //例： 直接播放5-15幀和20-30幀

// 動畫基本屬性控制
lottie.setSpeed(speed);         // 設定播放速度，speed為1表示正常速度
lottie.setDirection(direction); // 設定播放方向，1表示正向播放，-1表示反向播放

// 獲取動畫幀數屬性
animationItem.getDuration();    //獲取動畫時長
  • 事件訂閱

    在一些特殊場景下，比如開始載入動畫或者動畫播放結束時，可能需要執行相應的操作，在@ohos/lottie中提供了事件訂閱和取消訂閱的功能，當觸發對應的event，會執行傳入的回撥函式，使用者可以在回撥函式中完成要實現的功能。

    // 訂閱事件
animationItem.addEventListener(event,function(){
    // TODO something
})

// 取消訂閱事件
animationItem.removeEventListener(event,function(){
    // TODO something
})

    常見的event事件型別如下：

    // event事件型別
'enterFrame'   // 每進入一幀就會觸發
'loopComplete' // 當前迴圈下播放（迴圈播放/非迴圈播放）結束時觸發
'complete'     // 播放完成時觸發
'segmentStart' // 播放指定片段時觸發，playSegments、resetSegments等方法剛開始播放指定片段時會發出，如果playSegments播放多個片段，多個片段最開始都會觸發。
'destroy'      // 銷燬動畫時觸發
'data_ready'   // 資料準備完成
'DOMLoaded'    // 動畫相關dom已經被新增
'error'        // 出現錯誤
'data_failed'  // 資料載入失敗
  ...
    參考連結
  • 三方庫資源彙總：https://gitee.com/openharmony-tpc/tpc_resource
  • OpenHarmony三方庫中心倉：https://ohpm.openharmony.cn
  • @ohos/lottie的使用：https://gitee.com/openharmony-tpc/lottieETS

相關文章