微信小程序整合 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 中构建展示：

登录后复制

  开启动画

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

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

静止页面效果如下图：

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

登录后复制

// index.jsconst { 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 文件的时候，我们不需要开启一个专门的项目来预览，可以直接通过官方站点 进行预览即可。

【完✅】感谢捧场🌹