svga动画
本文介绍的动画不是css，js动画，是使用插件播放svga文件。
1.需求
UI同学在做一个春节活动，活动中需要有个开场动画，原本想的简单，不涉及接口调用逻辑，就直接用做一个gif图片由前端来显示就好了，但是这个gif做出来之后图片太大了，页面加载慢，如下图1
gif图片还有一个问题，透明部分会显示成黑色，不符合预期。再者就是这个图片太大了，有1.3M。
后来UI同学换了一种格式，apng动画，APNG（Animated Portable Network Graphics）诞生于2004年，是PNG的位图动画扩展。可以简单地理解为PNG格式的动画版。但是UI同学做出来文件体积更大了，这个文件有2.9M，如下图2
最后UI同学尝试使用svga动画，这种格式动画体积小，只有33kb，但是有个问题svga文件不能在浏览器中直接播放，需要引用第三方插件，就诞生了这个需求。
2.思路
说是思路，其实就是使用svga插件来播放这个动画文件，官方已经有说明文档，只要照着这个文档来写就可以实现。
3.实现过程
这个项目是使用svelte来实现的，这个框架和vue有些类似，这里不展开说明，只介绍如何实现这个播放功能。
3.1 canvas容器
svga播放使用canvas容器来播放，html代码如下图：
<!-- svga播放器 -->
<canvas class="{['play-canvas', className].join(' ')}" on:click={onClick} bind:this={svgaCanvasEl}></canvas>
3.2 播放器
初始化播放器参考官方文档照葫芦画瓢了，代码如下：
<script>
import { onMount, onDestroy, createEventDispatcher } from 'svelte'
import { Parser, Player } from 'svga'
import {regExp} from '@/shared/internal/constants'
//事件转发
const dispatch = createEventDispatcher()
//svg容器
let svgaCanvasEl = null
//svg播放器
let player = null
//解析
let parser = null
//组件样式
export let className = ''
//svga图片地址
export let svgaUrl = ''
//暴露svga动画配置
export let playerConfig = {
loop: 0, //循环次数，默认值 0（无限循环）
}
//样式
export { className as class }
const initSvgAnimation = async () => {
if (svgaUrl) {
try {
if (!regExp.svgaSuffix.test(svgaUrl)) {
throw 'inaccurate file format'
}
parser = new Parser()
const svga = await parser.load(svgaUrl)
player = new Player({
container: svgaCanvasEl,
fillMode: 'backwards', // 最后停留的目标模式，默认值 forwards
playMode: 'forwards', //播放顺序顺序播放
loop: 1,
startFrame: 0,
endFrame: svga.frames,
isUseIntersectionObserver: false,
isCacheFrames: false,
...playerConfig
})
await player.mount(svga)
player.onStart = () => console.log('svg play onStart')
player.onResume = () => console.log('svg play onResume')
player.onPause = () => console.log('svg play onPause')
player.onStop = () => console.log('svg play onStop')
player.onProcess = () => {}
player.onEnd = () => console.log('onEnd')
await player.start()
} catch (e) {
console.error('svg play error:', e)
}
}
}
function onClick() {
dispatch('click')
}
onMount(() => {
initSvgAnimation()
})
onDestroy(() => {
// 清空动画
player && player.clear() && player.destroy()
// 销毁
parser && parser.destroy()
})
</script>
3.3调用方式
调用方式如下：
<SvgaPlayer svgaUrl={popUpImg} playerConfig={playerConfig} class={"pageload-pop-svg"}></SvgaPlayer>
注意传入两个参数中第一个是svga文件地址，可以是本地或者远程cdn地址，第二个参数playerConfig是播放配置，覆盖默认配置，参考官方文档。
最后效果如下：
参考：
https://baijiahao.baidu.com/s?id=1681715610129777960&wfr=spider&for=pc
https://github.com/svga/SVGAPlayer-Web-Lite