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

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