评论

SVG公众号排版 | GIF动图如何禁止循环播放?PS设置了也没用!

在SVG公众号排版中,我们经常使用到GIF动图,有些排版需求是想让GIF动图一直无限循环播放,也有其他排版需求是只想让GIF动图播放一次就停止了

在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插入动图,这样会比较靠谱一些!


最后一次编辑于  2022-12-16  
点赞 1
收藏
评论
登录 后发表内容