微信小程序中使用GIF

news2024/11/26 14:30:02

前言

最近在微信小程序开发时遇到了一个非常复杂的动画,如果要手搓的话需要用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的链接即可;、

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1167191.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

mysql-面试题

1. 这里我们可以看出有两种情况&#xff0c;要么活跃&#xff0c;要么不活跃&#xff0c;我的思路是统计出不活跃的&#xff0c; 并计算出他们所占比例&#xff0c;再用1减去他们所占比例&#xff0c;就可以得到留存率。大致思路就这样&#xff0c;具体代码后面补。下面代码为老…

TrafficWatch 数据包嗅探器工具

TrafficWatch 是一种数据包嗅探器工具&#xff0c;允许您监视和分析 PCAP 文件中的网络流量。它提供了对各种网络协议的深入了解&#xff0c;并可以帮助进行网络故障排除、安全分析等。 针对 ARP、ICMP、TCP、UDP、DNS、DHCP、HTTP、SNMP、LLMNR 和 NetBIOS 的特定于协议的数据…

PMI-ACP(103:17-56)

巩固复习&#xff1a;SCRUM Scrum是目前敏捷项目管理的经典框架&#xff0c;在2020年最新版的《Scrum指南》中&#xff0c;Scrum之父对迭代目标和完成的定义进行了更为清晰的阐释。 在Scrum里比较重要的是Sprint冲刺。一个Sprint长度一般是2&#xff5e;4周&#xff0c;固定&…

【C/C++】C++中重载、重写和隐藏的区别

重载 函数重载满足条件&#xff1a; 同一个作用域下函数名称相同函数参数类型不同 或者 个数不同 或者 顺序不同 注意: 函数的返回值不可以作为函数重载的条件。 #include<bits/stdc.h>using namespace std;class A {void fun() {};void fun(int i) {};void fun(int …

pytest自动化测试框架Allure功能特性介绍

前言 Allure框架是一个灵活的轻量级多语言测试报告工具&#xff0c;它不仅以web的方式展示了简介的测试结果&#xff0c;而且允许参与开发过程的每个人从日常执行的测试中最大限度的提取有用信息 从dev/qa的角度来看&#xff0c;Allure报告简化了常见缺陷的统计&#xff1a;失…

C# list<T>去重

文章目录 C# list<T>去重值类型去重List<object>object is intobject is decimalobject is charobject is boolobject is string List<int>List<string> 引用类型去重 C# list去重 值类型去重 List object is int //object is intList<object&g…

【华为数通HCIP | 网络工程师】821-BGP高频题、易错题(1)

个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名大二在校生&#xff0c;喜欢编程&#x1f38b; &#x1f43b;‍❄️个人主页&#x1f947;&#xff1a;落798. &#x1f43c;个人WeChat&#xff1a;hmmwx53 &#x1f54a;️系列专栏&#xff1a;&#x1f5bc;️ 零…

如何进行有效的成本控制?

如何进行有效的成本控制&#xff1f; 接下来我会通过一些例子为大家深入浅出的讲讲生产制造业是如何进行成本控制的&#xff0c;下面用到的图片和系统都来自简道云的生产管理系统 这也是我们公司目前正在用的生产管理系统&#xff0c;是我们团队自己搭建的&#xff0c;在这里…

经典二叉树试题(一)

文章目录 一、相同的树1、题目介绍2、思路讲解3、代码演示 二、对称二叉树1、题目介绍2、思路讲解3、代码演示 三、二叉树的最大深度1、题目介绍2、思路讲解3、代码演示 四、左子树之和1、题目介绍2、思路讲解3、代码演示 五、平衡二叉树1、题目介绍2、思路讲解3、代码演示 六、…

使用C++的QT框架实现五子棋

最近有点无聊正好想玩五子棋&#xff0c;那就实现一下这个游戏吧&#xff0c;网上的五子棋逻辑又长又复杂&#xff0c;我这个逻辑还是蛮简单的&#xff0c;展示如下 这是一个简单的五子棋&#xff0c;今天就了解一下这个游戏的思路&#xff0c;使用的是QT框架&#xff0c;只要思…

企业寄件平台一站式管理教程

企业寄件管理平台的诞生&#xff0c;有两大影响因素&#xff1a; 1、企业寄件管理在企业管理体系中越发重要 随着互联网和快递业的发展&#xff0c;企业对外业务开始依托网络、快递。因公寄件在企业中已经是常事&#xff0c;这几年疫情的影响下&#xff0c;越发明显。寄合同、…

活动回顾|OpenTiny 参与线下大会:共创开源未来,助力低代码技术创新

前言 10月下旬 OpenTiny 社区有幸参与了中国开源年会 COSCon’23及华为云开发者日南京站活动。中国开源年会 COSCon’23活动于2023年10月28日至29日在成都菁蓉汇举行&#xff0c;以“科技向善”为指引&#xff0c;旨在推动开源技术和社区的发展&#xff0c;加强产学研合作&…

基于单片机的无线报警系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 技术交流认准下方 CSDN 官方提供的联系方式 文章目录 概要 一、整体设计方案二、 系统的总体方案论证与设计2.1系统的功能要求2.2 系统的技术要求2.3 系统的方案论证及设计2.3.…

PHP进销存ERP系统源码

PHP进销存ERP系统源码 系统介绍&#xff1a; 扫描入库库存预警仓库管理商品管理供应商管理。 1、电脑端手机端&#xff0c;手机实时共享&#xff0c;手机端一目了然。 2、多商户Saas营销版 无限开商户&#xff0c;用户前端自行注册&#xff0c;后台管理员审核开通 3、管理…

更快更准 | YOLOv3算法超详细解析(包括诞生背景+论文解析+技术原理等)

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。YOLOv3是一种基于深度学习的目标检测算法&#xff0c;它可以快速而准确地在图像中检测出多个目标。它是由Joseph Redmon和Ali Farhadi在2018年提出的&#xff0c;是YOLO&#xff08;You Only Look Once&#xff09;系列算法…

写了上千篇文章总结出来的高质量文章内容要点

文章目录 &#x1f50a;博主介绍&#x1f964;本文内容&#x1f34a; 1. 确定文章主题&#x1f34a; 2. 确定目标读者&#x1f34a; 3. 研究资料和信息&#x1f34a; 4. 制定写作计划&#x1f34a; 5. 确定文章结构&#x1f389; 5.1引言&#x1f389; 5.2主体&#x1f389; 5.…

学习笔记|正负偏态的转换方法|对数转换|正态得分法|适用条件|《小白爱上SPSS》课程:加餐 | 如何将非正态分布数据转换为正态分布的?手把手教你SPSS操作

目录 学习目的软件版本原始文档将非正态分布数据转换为正态分布一、正负偏态的转换方法&#xff08;一&#xff09;正偏态数据转换方法&#xff08;二&#xff09;负偏态数据转换方法 三、正态性检验&#xff08;一&#xff09;操作如下&#xff08;二&#xff09;结果解读四、…

CTF工具PDF隐写神器wbStego4open安装和详细使用方法

wbStego4open安装和详细使用方法 1.wbStego4open介绍&#xff1a;2.wbStego4open下载&#xff1a;3.wbStego4open原理图&#xff1a;4.wbStego4open使用教程&#xff1a;第一步&#xff1a;第二步&#xff1a;第三步&#xff1a;第四步&#xff1a;第五步&#xff1a; 5.wbSteg…

电脑版WPS怎么将更新目录加到快速访问栏

效果 步骤 开启首页的“标签”、快速访问、在最近置顶展示然后选择好目录点击右边的设置 》 添加标签选中“快速访问”&#xff0c;确定并关闭完成 相关 WPS怎样设置快速访问工具栏 WPS怎样设置快速访问工具栏-百度经验WPS怎样设置快速访问工具栏,WPS怎样设置快速访问工具栏…