可選的svga播放器有很多種，我就選其一SVGAPlayer-Web-Lite來試試，
SVGAPlayer-Web-Lite：
這是一個 SVGA 在移動端 Web 上的播放器，它的目標是 更輕量、更高效，
優點：
- 體積 < 60kb (gzip < 18kb)
- 兼容 Android 4.4+ / iOS 9+
- 更好的異步操作
- 多執行緒 (WebWorker) 決議檔案資料
- OffscreenCanvas / ImageBitmap
差異：
- 不支持播放 SVGA 1.x 格式
- 不支持聲音播放
首先我們使用前需要安裝：cnpm i svga
簡單使用：
html部分：
<template>
<div class="bg">
<canvas id="canvas" class="canvas"></canvas>
</div>
</template>
ts部分：
<script lang="ts" setup>
import { Parser, Player } from 'svga'
const startSvga = async function () {
const parser = new Parser()
const svga = await parser.load('./src/assets/1.svga')
const doc: any = document.getElementById('canvas')
const player: any = new Player(doc)
await player.mount(svga)
player.onStart = () => console.log('播放了')
// 開始播放影片
player.start()
}
startSvga()
</script>
style部分：
<style scoped>
.bg {
width: 100vw;
height: 100vh;
background-color: pink;
}
.canvas {
width: 100%;
height: auto;
}
</style>
效果圖：
（動效圖怕引起著作權問題，就不展示了）
然后我們發現這樣每次不管首次進入初始化還是重繪都需要重新下載，有一段頁面空白時間，達不到我們要的效果，那我們就考慮到用DB來優化加載效果，
ts部分：
import { Parser, Player, DB } from 'svga'
import url from '../assets/1.svga?url'
const startSvga = async function () {
try {
const db = new DB()
let svga = await db.find(url)
if (!svga) {
const parser = new Parser({ isDisableImageBitmapShim: true })
svga = await parser.load(url)
await db.insert(url, svga)
}
const doc: any = document.getElementById('canvas')
const player: any = new Player(doc)
await player.mount(svga)
player.onStart = () => console.log('播放了')
// 開始播放影片
player.start()
} catch (error) {
console.error(error)
}
}
startSvga()
對比：
之前是不管第一次進入還是重繪都需要重新加載決議影片，優化后，就可以減少相同 SVGA 下載和決議，頁面渲染完成更快了，
完整代碼：
<template>
<div class="bg">
<canvas id="canvas" class="canvas"></canvas>
</div>
</template>
<script lang="ts" setup>
import { Parser, Player, DB } from 'svga'
import url from '../assets/1.svga?url'
const startSvga = async function () {
try {
const db = new DB()
let svga = await db.find(url)
if (!svga) {
const parser = new Parser({ isDisableImageBitmapShim: true })
svga = await parser.load(url)
await db.insert(url, svga)
}
const doc: any = document.getElementById('canvas')
const player: any = new Player(doc)
await player.mount(svga)
player.onStart = () => console.log('播放了')
// 開始播放影片
player.start()
} catch (error) {
console.error(error)
}
}
startSvga()
</script>
<style scoped>
.bg {
width: 100vw;
height: 100vh;
background-color: pink;
}
.canvas {
width: 100%;
height: auto;
}
</style>
最后貼上檔案鏈接
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/356129.html
標籤：其他