微信小程序整合 SVGA

SVGA 是什么?

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

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

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

整合到微信小程序

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

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

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

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

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

代码结构如下:

bash 复制代码
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

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

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

然后,我们在 pages/index/index.wxml 中构建展示:

html 复制代码
<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>

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

静止页面效果如下图:

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

javascript 复制代码
// 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);
    }
  },
})

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 文件:

javascript 复制代码
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);
  }
}

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

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

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

【完✅】感谢捧场🌹

相关推荐
江城开朗的豌豆几秒前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆1 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆1 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆2 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er9 分钟前
【前端工程化】前端组件模版构建那些事
前端
前端 贾公子10 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆14 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山22 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45331 分钟前
css模块化以及rem布局
前端·javascript·css
小熊哥^--^33 分钟前
条件渲染 v-show与v-if
前端