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

原文地址：http://www.cnblogs.com/wlxll/p/16824605.html