背景
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組合場景，例如：
如圖示識
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 |
使用說明
支援離屏渲染以及多執行緒播放; 多個動畫同時播放，UI操作也可以流暢的進行；
設定迴圈播放次數, loop: 3 迴圈播放3次，loop: true 迴圈播放；
播放到最後一幀暫停，clearAfterStop: true；
設定縮放模式resizeCanvas，'percent'---- width 100% height 100%, size---- 特效原尺寸；
文字替換， 支援同一個key，並排多個字串, 擴充套件：支援文字描邊；
圖片替換，支援同一個key，並列多個圖片， 擴充套件：支援置灰key圖片；
svga巢狀svga：在key上渲染svga.
效能體現
以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 成為開發者處理向量動畫的強大工具，適用於各種高效能和複雜動畫需求的場景。
