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