小程序使用svga

 svga 是一种动画格式。不仅可以在 ios,android,flutter,web 上使用，小程序也支持。设计师使用 after effects 或是 animate 进行动画设计。设计师导出工具给我们 svga 动画后。我们通过引入 svga 相关 lib 文件就可以在环境中执行动画了。

  将压缩包中的 svgaplayer.js 引入到小程序工程项目。在需要添加播放器的 wxml 文件内，添加 canvas 组件，注意 canvas 的 id 必填，下一步会用到，type 必须为 2d。在需要播放的时机，这里是 onLoad，执行以下代码，即可播放动画。

<view class="container">
  <canvas
    id="demoCanvas"
    type="2d"
    style="width: 300px; height: 300px; </canvas>
</view>

<script>
  const { Parser, Player } = require('../../libs/svgaplayer.weapp') // 此处替换为 svgaplayer.weapp.js 放置位置

  Page({
    data: {},
    async onLoad() {
      try {
        const parser = new Parser()
        const player = new Player()
        await player.setCanvas('#demoCanvas')
        const videoItem = await parser.load(
          'https://cdn.jsdelivr.net/gh/svga/SVGA-Samples@master/angel.svga'
        )
        await player.setVideoItem(videoItem)
        player.startAnimation()
      } catch (error) {
        console.log(error)
      }
    }
  })
</script>

  通过demoCanvas的样式我们可以改变画布的大小，定位。通过startAnimation来展示动画。常用的属性方法还有，设置播放次数，假如只有一次的播放。我们设置loops为1.执行动画完成调用onFinished。播放完视频清空画布。clearsAfterStop=true.

  官网文档更详细。https://github.com/svga/svgaplayer-weapp