微信小程序整合 SVGA

SVGA 是什么？

SVGA ，全称 Scalable Vector Graphics Animation，是一种全新的动画格式，带来高性能动画体验，该格式能够同时兼容 iOS，Android，Flutter，Web 等多个平台。

官网也列举出了它的好处，这里不进行赘述，感兴趣的可以戳 - 这里。

那么，在微信小程序上能够集成这么友好的动画呢？

整合到微信小程序

是的，我们能够将其集成到微信小程序上。下面，我们将一步步整合上来。

首先，我们可以参考之前的文章-为了管理日常，我写了个 TODO LIST 微信小程序，它可以教你从零开始创建小程序。

这里，我创建了一个名为 svga-demo，且不使用云服务功能的项目。

这里为了演示，模板选择，我们只是选择了官方的 JS-基础模版。

我们使用到 svgaplayer-weapp，这个专为微信小程序开发的 SVGA 播放器。

代码结构如下：

登录后复制

svga-demo
├── assets
│   └── js
│       └── svgaplayer.weapp.js
│   └── imgs
│       └── duck_svga.svg
├── pages
│   └── index
│       ├── index.js
│       ├── index.json
│       ├── index.wxml
│       └── index.wxss
├── app.js
├── app.json
├── app.wxss
├── project.config.json
├── project.private.config.json
└── sitemap.json

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.

我们将 svgaplayer.weapp.js 文件放在本地

svgaplayer.weapp.js 文件可以通过 github 仓库 svgaplayer-weapp 获取。

然后，我们在 pages/index/index.wxml 中构建展示：

登录后复制

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

  <view 
    style="border: 1px solid #000; padding: 6px 24px; border-radius: 4px;"
    ontap="loadSvgaAnimate"
  >开启动画</view>
</view>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.

这里，我们根据官网介绍使用 canvas 进行动画效果的绘制区域。然后，设定一个开启动画的按钮，当我们点击该按钮的时候，开启 svga 效果。

静止页面效果如下图：

我们在 pages/index/index.js 文件进行逻辑的编写：

登录后复制

// index.js
const { Parser, Player } = require("../../assets/js/svgaplayer.weapp.js");

Page({
  data: {

  },
  async loadSvgaAnimate() {
    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);
    }
  },
})

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.

在 index.js 文件中，我们引入了 assets/js/svgaplayer.weapp.js 开发包，新建一个 Player 来控制 canvas 画布，然后通过 Parser 加载远程的的 svga 图，之后设置 player 播放视频项，并开启动画。

当我们运行项目，点击 开启动画按钮，会报错❌

因为我们加载了远程服务的 svga - https://cdn.jsdelivr.net/gh/svga/SVGA-Samples@master/angel.svga，所有我们需要在微信后台配置相关的安全域名，并在对应的服务器根目录下设置微信要求的凭证。当然，引用的这个服务的 svga 服务器明显我们控制不了。

嗯，在本地调试的过程中，我们可以直接忽略域名的校验。可以通过在微信开发者工具上勾选 详情 -> 不校验合法域名、web-view(业务域名)，TLS 版本以及 HTTPS 证书。

此时，我们再次点击 开启动画 按钮，则可以看到如下的动效👇

当然，我们也可以直接引入项目中的 svga 文件。

比如，我们使用 assets/imgs/duck_svga.svg 文件：

登录后复制

async loadSvgaAnimate() {
  try {
    const parser = new Parser;
    const player = new Player;
    await player.setCanvas('#indexSvgaCanvas');
    const videoItem = await parser.load("assets/imgs/duck_svga.svg");
    await player.setVideoItem(videoItem);
    player.startAnimation();
  } catch (error) {
    console.log(error);
  }
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.

和之前的 loadSvgaAnimate 不同的点是 parser.load 资源是本地的资源。我们看看效果图，如下👇

咦，不错哦，比帧动画顺畅，比 GIF 清晰~

当然，在拿到 svga 文件的时候，我们不需要开启一个专门的项目来预览，可以直接通过官方站点 进行预览即可。

【完✅】感谢捧场🌹