小程序使用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.
