网站开发报价表,网站设计与开发实例,济南网络优化网址,免费咨询服务合同范本前言 最近在微信小程序开发时遇到了一个非常复杂的动画#xff0c;如果要手搓的话需要用canvas一点点弄#xff0c;比较麻烦#xff0c;于是打算做一个gif来实现动画效果 根据需求#xff0c;动画只需播放一次即可#xff0c;并且设置了一个重播按钮#xff0c;点击即可重…前言 最近在微信小程序开发时遇到了一个非常复杂的动画如果要手搓的话需要用canvas一点点弄比较麻烦于是打算做一个gif来实现动画效果 根据需求动画只需播放一次即可并且设置了一个重播按钮点击即可重新播放动画 为了实现这样的效果需要搞明白两个问题 如何设置gif的播放次数循环or仅一次如何重新加载gif 如何设置GIF的播放次数
按理来说应该可以在微信小程序/web中实现GIF动画的定格但我尝试了this.animate动画的使用等多种方法都没有实现这个功能于是把目光放在了gif动画本身上使用PS进行编辑 如果大家知道如何实现请一定在评论区留言感谢 打开PS并导入需要编辑的GIF我的版本是2022在窗口中开启时间轴 在页面的最下方找到时间轴即可设置该GIF的播放次数 选择“文件——导出——存储为Web所用格式 在右侧可以调整一些设置然后点击“存储”即可导出 注意这样导出的GIF使用电脑自带的看图工具或WPS看图打开的话还是会重复播放我也不知道为什么但是导入到微信小程序中是正常的 附一个PS2022的安装包 链接百度网盘 请输入提取码 提取码WHY6 微信小程序如何重新加载GIF
GIF图片放在本地或上传到服务器上均可建议上传到服务器上如果GIF图比较大的话
加载方式使用image标签即可和加载图片的方式一模一样
如何重新加载
将GIF图片上传到服务器上使用随机数拼接的方法将GIF链接拼接上一个随机数这样每次获取的时候都是请求了一个新的GIF图片不会保留原先GIF图的状态
链接格式url? Math.random()js语法
这样想要重新加载添加一个bing:tap事件每点击一次就重置gif的链接即可、
