如何在滑动到一张GIF时正好播放？
让GIF跟随阅读播放，阅读体验会高出一截。
那么该如何实现这种效果？
控制GIF播放，之前讲过两种方法，一个是点击播放，一个是划动播放，注意是划动不是滑动。
点击播放GIF使用的是 iPaiban Pro 编辑器的「点击-切换GIF动图」组件（编号：10086），点击试试：
划动播放GIF使用的是 iPaiban Pro 编辑器的「手势-切换GIF动图」组件（编号：10122），在图片上划一下：
制作这两种效果准备的素材一样，都是需要GIF的第一帧图片和整张GIF。
GIF播放次数有两种，一种是单次播放，一种是循环播放，受控制播放的GIF一般选择单次播放的。Ps导出GIF时可以设置播放的次数。
我们通过点击和划动这两种不同的触发方式来让第一帧图片切换到整张GIF，当切换的时间足够快（0.1s），就有了一种播放GIF的效果。
但是，无论点击还是划动，都需要引导读者刻意的进行触发操作，而想让读者滑动到一张GIF正好播放，就需要另一种触发方式——触摸。
下面左边是点击播放GIF，右边是触摸播放GIF，大家可以感受下两者的不同。
可以发现，右侧GIF只要手指轻轻碰到就会播放，使用这种方式我们在阅读图文时就会有GIF跟随播放的感觉了。
「平安人寿」的很多图文都使用了这种效果，大家可以点击链接进原文体验下。
制作时同样需要准备好GIF的第一帧图片和整张GIF，下面是详细教程。
工具：iPaiban Pro黑科技编辑器，网址：x.iPaiban.com
组件：特殊-GIF动图跟随阅读播放
编号：10052（组件）
第1步：选择组件
点击编辑器左侧「组件」按钮，在「特殊」分类中找到「特殊-GIF动图跟随阅读播放」组件，或者直接搜索编号10052，点击选择。
第2步：上传图片素材
点击第1个「换图」按钮上传GIF的第一帧图片，点击第2个「换图」按钮上传整张GIF。
第3步：调整触发区域和延迟触发时间
双击编辑区的图片，在弹出的窗口中红色色块表示触发区域，通过拖动可任意调整位置和大小，一般覆盖整张图片但不要超出图片边缘。
延迟触发时间一般为0即可。如果GIF高度较长，为避免读者触发后来不及看到后面的GIF播放，可以适当增加延迟触发时间。
点击右侧「预览草稿」可随时预览效果，根据效果随时进行调整。
第4步：导入公众号后台
效果满意后继续点击「导入微信后台」就能开始导到公众号了。
导入时使用 iPaiban Pro 小助手更方便哦，最新v2.0版本的小助手还支持一键打包下载图文图片素材，非常方便，安装教程戳：《iPaiban Pro小助手v2.0来啦！》
好的标题可以获得更多的推荐及关注者
制作SVG交互图文认准 iPaiban Pro 黑科技编辑器，网址：x.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可开始注册并使用。
新用户在「新手礼包」可领取3天企业标准版会员体验权，以及22个常用必备组件的大礼包（1年）哦。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）