微信小程序中使用GIF

前言

最近在微信小程序开发时遇到了一个非常复杂的动画，如果要手搓的话需要用canvas一点点弄，比较麻烦，于是打算做一个gif来实现动画效果

根据需求，动画 只需播放一次 即可，并且设置了一个 重播 按钮，点击即可重新播放动画

为了实现这样的效果，需要搞明白两个问题：

1. 如何设置gif的播放次数（循环or仅一次）
2. 如何重新加载gif

如何设置GIF的播放次数

按理来说应该可以在微信小程序/web中实现GIF动画的定格，但我尝试了 this.animate 动画的使用等多种方法，都没有实现这个功能，于是把目光放在了gif动画本身上：使用PS进行编辑：

如果大家知道如何实现请一定在评论区留言，感谢！

1. 打开PS并导入需要编辑的GIF（我的版本是2022）
2. 在 窗口 中开启 时间轴 ：

1. 在页面的最下方找到时间轴，即可设置该GIF的播放次数：

   

2. 选择“文件——导出——存储为Web所用格式：

   

3. 在右侧可以调整一些设置，然后点击“存储”即可导出

   

注意：这样导出的GIF使用电脑自带的看图工具或WPS看图打开的话还是会重复播放（我也不知道为什么），但是导入到微信小程序中是正常的

附一个PS2022的安装包：

链接：

提取码：WHY6

微信小程序如何重新加载GIF

GIF图片放在本地或上传到服务器上均可（建议上传到服务器上，如果GIF图比较大的话）

加载方式：使用 <image> 标签即可，和加载图片的方式一模一样；

如何重新加载：

将GIF图片上传到服务器上，使用随机数拼接的方法：将GIF链接拼接上一个随机数，这样每次获取的时候都是请求了一个新的GIF图片，不会保留原先GIF图的状态；

链接格式： 'url?' + Math.random() （js语法）

这样想要重新加载，添加一个 bing:tap 事件，每点击一次就重置gif的链接即可；、