明明弄的单次播放，公众号中GIF还是一直循环怎么办？

因为一直有小伙伴来问，还是决定给大家用一篇文章详细介绍一下。

在公众号长图文中插入GIF，不可避免会遇到GIF播放次数的选择——单次or循环。

关于如何设置一张GIF单次播放还是一直循环播放，很早就给大家介绍过。SVG交互排版中的 GIF播放次数并不是由代码或编辑器控制的，需要我们在前期制作GIF时直接设置好，详细教程戳：GIF单次或循环播放到底是怎么设置的？

那么有小伙伴遇到了新的问题：明明已经提前设置的GIF单次播放，为什么上传到文章中预览还是一直循环呢？

其实这个问题与用了什么编辑器、使用的什么组件没有关系，它主要出现在安卓手机上，是受系统故障影响导致的。

接下来用下面一张GIF教大家4种用 iPaiban Pro 黑科技编辑器解决这个问题的排版方法。

串联GIF播放

这一方法适用于独立插入的单次播放的GIF，通常以「无缝图」组件的形式放在文章开头。

我们可使用「自动-串联播放GIF动图」组件（编号：10466）来解决循环播放的问题。

首先我们将这张单次播放的GIF提取为3个素材：GIF的第一帧图片、GIF的最后一帧图片以及这张单次播放的GIF本身。

接着，选择10466组件后：

在右侧「第一张GIF首帧」处上传这张GIF的第一帧图片，设置「延迟播放时间」0.1s；

在「第一张GIF」处上传这张单次播放的GIF本身，将GIF的时长填写在「第一张GIF时长」处；

在「第二张GIF」处上传这张GIF的最后一帧图片，时长无需调整设置。

点击GIF过渡切换

这一方法适用于点击播放GIF的效果。

如果你发现点击后播放的GIF没能单次播放的话，可使用「点击-GIF过渡切换」组件（编号：11553）代替「点击-切换GIF动图」组件。

同样也是将这张单次播放的GIF提取为3个素材：GIF的第一帧图片、GIF的最后一帧图片以及这张单次播放的GIF本身。

接着，选择11553组件后：

在右侧「单击前」处上传这张GIF的第一帧图片；

在「过渡GIF」处上传这张单次播放的GIF本身；

在「单击后」处上传这张GIF的最后一帧图片；

将GIF的时长填写在「GIF时间」处。

该组件其他玩法戳：GIF播放完，最后的画面不清晰怎么办？

序列帧动效

之前给大家介绍过，因为微信平台对GIF的压缩加大，可能会导致GIF在文章中非常模糊。为了让GIF动效在文章中高清展现，可以使用序列帧动效的形式排版。

安卓系统影响GIF的单次播放，但不会影响序列帧的单次播放，所以为了避免GIF的循环播放问题，我们也可以直接选用合适的序列帧组件来排版。

想要替代自动单次播放GIF的序列帧，就在 iPaiban Pro 黑科技编辑器搜索关键词「单次 序列帧」，搜索出来的10375、11631、11632等组件都可以：

想要替代点击单次播放GIF的序列帧，就在 iPaiban Pro 黑科技编辑器搜索关键词「点击 序列帧」，搜索出来的11247、11642、11643等组件都可以：

关于如何生成序列帧图片，教程戳：“苹果、星巴克那些连贯高清的序列帧图片，都是怎么弄的啊？”

定时消失遮罩

这一方法适用于「点击展开」效果中，展开前的图片需要GIF单次播放的情况。

这里要额外用到的一个组件是「加载提示(定时消失遮罩)」组件（编号：11327）。

这个组件本身是在图文内容较多时，用来提醒用户图文正在加载的。防止用户在点进图文时因看不到内容而跳出，提升阅读体验。

而按照下面方式排版，使用这一组件也可解决点击展开前的GIF不能单次播放的问题。

如下将「点击展开」组合与「加载提示(定时消失遮罩)」组件上下排列：

「点击展开」组合中展开前的图片，上传GIF的最后一帧图片，展开后的内容正常排版：

「加载提示(定时消失遮罩)」组件上传这张单次播放的GIF，「停留时间」填写GIF的播放时长，「消失动画时间」填0.1即可：

这样就完成了。

当然，「点击展开」组合我们也可以直接选择序列帧动效相关的组合替代，如11511、11662、11663等：

● SVG 黑科技交互排版👇🏻

 

iPaiban 团队可提供运营服务、创意策划、多种风格设计、SVG交互开发等服务，如需定制，请添加玉兔微信（ID：playhudong15）沟通咨询。