抽奖动画 - 播放svga动画

时间:2023-01-13 21:08:00

本文介绍的动画不是css,js动画,是使用插件播放svga文件。

1.需求

UI同学在做一个春节活动,活动中需要有个开场动画,原本想的简单,不涉及接口调用逻辑,就直接用做一个gif图片由前端来显示就好了,但是这个gif做出来之后图片太大了,页面加载慢,如下图1
抽奖动画 - 播放svga动画

gif图片还有一个问题,透明部分会显示成黑色,不符合预期。再者就是这个图片太大了,有1.3M。

后来UI同学换了一种格式,apng动画,APNG(Animated Portable Network Graphics)诞生于2004年,是PNG的位图动画扩展。可以简单地理解为PNG格式的动画版。但是UI同学做出来文件体积更大了,这个文件有2.9M,如下图2
抽奖动画 - 播放svga动画

最后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是播放配置,覆盖默认配置,参考官方文档。
最后效果如下:
抽奖动画 - 播放svga动画

参考:
https://baijiahao.baidu.com/s?id=1681715610129777960&wfr=spider&for=pc
https://github.com/svga/SVGAPlayer-Web-Lite