切換語言為:簡體
高效能動畫效果播放器實現-ESVGA

高效能動畫效果播放器實現-ESVGA

  • 爱糖宝
  • 2024-07-01
  • 2131
  • 0
  • 0

背景

SVGA (Scalable Vector Graphics Animation) 是一種向量動畫技術,通常用於移動應用和網頁設計中。它使用向量圖形來建立動畫,使得動畫在不同解析度的裝置上都能保持清晰度和質量。

存在問題

  • 不支援 渲染引擎 WebWorker 渲染播放

  • 業務支撐豐富性受限

E-Svga 更符合業務需求的實現

官網地址:svga.yy.com/

  • 支援多 Web Worker、離屏播放,效能直接拉滿

  • 智慧識別播放環境,並根據專案編譯環境進行程式碼適配

  • 支援 Image Key 以及 Svga Key [svga裡面插入svga]

  • 經歷超大型專案、高頻多個動畫同時播放的高效能需求驗證 DEMO

使用

01 安裝
npm i e-svga

02 使用
import svgaPlayer, {type SvgaPlayerType} from 'e-svga'
 const div = useRef<HTMLDivElement>(null)
 //<div className="svgaPlayer" ref={div}></div>
 const url = 'https://.../xxx.svga'
 
 const svga: SvgaPlayerType = await svgaPlayer({
      url,
      container: div,
      loop: 1, // true: 迴圈播放, 2:迴圈2次後停止,3:迴圈3次後停止,...
      onEnd(e) {
        // play end.
      },
    })
  svga.start()

03 svga巢狀svga

這個情況應用在比較複雜的svga組合場景,例如:

高效能動畫效果播放器實現-ESVGA

如圖示識
  • 1是特效背景,有8個等級

  • 2有十多個效果,

  • 3有3個效果

每處都是一個動效,如果組合成一起,將有8x10x3=240以上的組合情況,大大增加了設計的工作量,透過組合svga特效的方式,減少了設計的工作量,各個子特效也能保持幀同步。

 // 連送特效
  let url = getUrl(`svga/bg_11-2_0.svga`)
  let imageKey = 'hitsBannerEffect'
  await svga.addSwapSvga(url, {
    imageKey,
  })
  url = getUrl(`svga/perfect-2_0.svga`)
  imageKey = 'appraiseEffect'
  await svga.addSwapSvga(url, {
    imageKey,
  })
  
  svga.start()

配置
Name Type Default Description
container HTMLElement 必填 div html 容器
url string 必填 svga地址, 或資源base64
loop number、boolean true: 迴圈播放 迴圈播放次數
urlType 'http'、'base64' http url 型別
startFrame number 0 開始播放幀
endFrame number 最後一幀 結束播放幀
swapTexts CanvasFontParams[] undefined
swapImages CanvasImageParams[] undefined
useFrameCache boolean false 啟用幀快取
useIntersectionObserver boolean true 監聽容器是否處於瀏覽器視窗內 會根據實際環境自動判斷, 開啟時:容器不顯示時,不渲染
useWebworker boolean true 啟用多程序 會根據實際環境自動判斷,useOffscreenCanvas為true時才能開啟
useDBCache boolean false 儲存svga 資料
useOffscreenCanvas boolean true 啟用離屏注意:worker模式下必須true 會根據實際環境自動判斷
logLevel 'debug'、'info'、'warn'、'error' 'info' 日誌列印級別
fetchOption any
fetch請求額外選項
checkTimeout boolean false 播放超時開關
clearAfterStop boolean true 播放結束後 是否刪除畫面, 如果為false, 需要外部擇時呼叫destroy()釋放資源
showPlayerInfo boolean true 是否顯示播放狀態
smooth boolean true 是否平滑處理
resizeCanvas 'percent'、'percentW'、'percentH'、'size' 、 'percent' percent 為 width 100% height 100%percentW 為 width 100%percentH 為 height 100%size 為 特效原尺寸
delayDestroyGap number 0 延遲釋放時間,單位ms
使用說明
  1. 支援離屏渲染以及多執行緒播放; 多個動畫同時播放,UI操作也可以流暢的進行;

  2. 設定迴圈播放次數, loop: 3 迴圈播放3次,loop: true 迴圈播放;

  3. 播放到最後一幀暫停,clearAfterStop: true;

  4. 設定縮放模式resizeCanvas,'percent'---- width 100% height 100%, size---- 特效原尺寸;

  5. 文字替換, 支援同一個key,並排多個字串, 擴充套件:支援文字描邊;

  6. 圖片替換,支援同一個key,並列多個圖片, 擴充套件:支援置灰key圖片;

  7. svga巢狀svga:在key上渲染svga.

效能體現

高效能動畫效果播放器實現-ESVGA 

svga.yy.com/performance頁面為例,同時渲染12個年獸特效,效能資料如下:


max CPU 記憶體(JS heap size) 備註
PC web 2.7% 7.6MB Win10 i7-8700CPU 32G記憶體
Android 3.2% 5.3MB Huawei Nova 5 pro 8G記憶體
總結

E-Svga 提供了一個強大的工具集來處理向量動畫,解決了傳統 SVGA 技術的一些侷限性。它不僅支援多 Web Worker 和離屏播放,還能智慧識別播放環境,並根據需求進行程式碼適配。透過支援巢狀的 SVGA 動畫,為複雜動畫場景提供瞭解決方案,極大地減少了設計的工作量。

以下是 E-Svga 的主要優點:

  • 效能最佳化:多 Web Worker 和離屏播放顯著提升了動畫效能。

  • 智慧適配:根據專案編譯環境自動進行程式碼適配。

  • 靈活性:支援巢狀 SVGA 動畫,適用於複雜動畫場景。

  • 高效能驗證:經過大規模專案的實際使用驗證,確保了穩定性和可靠性。

透過這些特性,E-Svga 成為開發者處理向量動畫的強大工具,適用於各種高效能和複雜動畫需求的場景。

0則評論

您的電子郵件等資訊不會被公開,以下所有項目均必填

OK! You can skip this field.