在SVG公众号排版中,我们经常使用到GIF动图,有些排版需求是想让GIF动图一直无限循环播放,也有其他排版需求是只想让GIF动图播放一次就停止了,这种情况我们可以通过Photoshop软件来设置GIF动图的播放次数,详见下图。
但是呢,也有一种情况,即使在Photoshop软件设置了GIF动图只播放一次,公众号图文中的GIF动图还是出现一直无限循环播放,没错,就是这么奇葩!我们来看如下案例。
提示:案例中的动图在Photoshop已设置只播放一次。
使用img插入动图
<section style="overflow: hidden;font-size: 0;line-height: 0;weixin: dong_dian_jun;pointer-events: none;user-select: none;-webkit-user-select: none;-webkit-tap-highlight-color: transparent;" powered-by="懂点君">
<img style="display: block;" src="https://mmbiz.qpic.cn/mmbiz_gif/ID0w88CyC2pYdykLLj0gv1TGVUIsibIKbYRov65PvJk0OPDGP5h5B4xFM2GxphMVWxCIAQl4LCYH7OJHh7u5Imw/0?wx_fmt=gif" alt="" />
</section>
点击查看效果(多刷新几次或者关掉再打开)
展示结果:有些手机(安卓/苹果)看到的GIF动图是无限循环播放,而不是只播放一次。
使用svg插入动图(动图作为svg的背景)
<section style="overflow: hidden;font-size: 0;line-height: 0;weixin: dong_dian_jun;pointer-events: none;user-select: none;-webkit-user-select: none;-webkit-tap-highlight-color: transparent;" powered-by="懂点君">
<svg viewBox="0 0 800 963" style="display: block;margin-top: -1px;background: url(https://mmbiz.qpic.cn/mmbiz_gif/ID0w88CyC2pYdykLLj0gv1TGVUIsibIKbYRov65PvJk0OPDGP5h5B4xFM2GxphMVWxCIAQl4LCYH7OJHh7u5Imw/0?wx_fmt=gif) 0 0 / 100% auto no-repeat;WeChat: dong_dian_jun;pointer-events: none;-webkit-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent;"></svg>
</section>
展示结果:安卓手机和苹果手机看到的GIF动图是只播放一次,这个展示的效果是正常的了,符合我们的预期设置。
最后总结
1、根据排版需求,先在Photoshop软件里面设置GIF动图的播放次数;
2、如果GIF动图是无限循环播放的,使用img或者svg插入动图都是可以的,如果是只要播放一次,建议使用svg插入动图,这样会比较靠谱一些!
考古来了!!2年后的今天,有更好的解决方法了吗?