展开之前的GIF那么长，为什么还可以这么高清和流畅？
每次精心制作的GIF，上传到公众号就秒变「糊图战士」，只能不断压缩、删减再调整……简直苦不堪言！
但为什么有的图文在展开之前的GIF时长那么长，但还可以这么高清和流畅？
之前给大家介绍过序列帧动效+展开的排版，优化GIF的呈现效果很有效，点击试试：
*素材来自大疆《大疆天空之城 8 周年影像大赛正式开启》
组合：点击-切换序列帧+展开
编号：11485（组合）
教程：《图文开头的动图，为什么苹果和大疆的总是那么高清又流畅？》
就是这么丝滑。下面是开头动效的部分排版素材，连贯的动效就是这近百张静态序列帧图片实现的：
今天再来揭秘一个优化小妙招——串联GIF动图+展开，让你面对长GIF又难以转化序列帧时也可以兼得流畅与清晰。
我们先来看两个案例，第1个是保时捷的案例：
*素材来自保时捷中国《抽一台“保时捷”》
组合：点击串联GIF动图+展开(设置触发区)
编号：10860（组合）
开头的长GIF其实由下面4张图串联起来合成的，使得GIF整体看着很长但播放时却流畅丝滑且清晰。
同款SVG交互的还有法拉利的这篇图文，看看效果：
*素材来自法拉利中国《跃启文化寻踪之旅》
组合：点击串联GIF动图+展开(设置触发区)
编号：10860（组合）
这篇开头动效也是有3张GIF串联成的。
大家在 iPaiban Pro 编辑器「组合」中搜索关键词「串联」，可以看到所有串联GIF动图+展开的组合，它们在展开的形式上稍有不同。
这些效果的制作方法差不多，以本文「点击串联GIF动图+展开」的效果为例，一起看下制作教程吧。
详细教程：
工具：iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com
组合：点击串联GIF动图+展开(设置触发区)
编号：10860（组合）
第1步：选择组合
登录 iPaiban Pro 编辑器后，点击编辑器左侧「组合」按钮，搜索组合编号10860或按照分类找到「点击串联GIF动图+展开(设置触发区)」组合，点击选择。
第2步：进入组合编辑模式
点击编辑区的「点击此处配置」，进入组合编辑模式。在组合编辑模式中，分为「展开前」和「展开后」两个区域。
第3步：上传展开前的图片
点击「展开前」区域，右侧会提示上传封面图、需要控制播放的GIF动图和最后一个GIF的最后一帧或新的图片。
封面图是我们打开图文第一眼看到的图片，GIF动图便是展开前播放的动图。
注意！想要实现完美的串联GIF动图效果，封面图、需要控制播放的GIF动图和最后一个GIF的最后一帧或新的图片最好尺寸一致。
第4步：调整点击触发区域
双击「展开前」的编辑区域，会看到一个红色色块，该色块代表了点击展开触发的区域，它的大小和位置可任意调整。
第5步：上传展开后的图片
「展开后」的内容支持嵌套各种组件，需要什么效果就在左侧「组件」分类中找到相应的组件拖动到组件位中，然后上传需要的素材即可。
添加组件位-拖动组件到组件位中-上传图片，每需要一个样式就按照这3步操作：
第6步：设置背景移动速度和展开时长
点击页面右侧红色小三角，会看到「所有动图播放结束后，停留时长」、「展开所需时长」、「点击后，第1个GIF播放时长」、「点击后，第2个GIF播放时长」等设置项。
根据所需效果，依次设置好参数。
点击下方「预览组合」按钮可随时预览效果并更改设置。
第7步：导入到公众号后台
内容编辑完毕后，点击左上角「保存并退出」退出组合编辑模式回到编辑器主页面。
继续点击最右侧「预览草稿」，效果满意后点击「同步至微信后台」就可以了。
使用同步功能无需频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码查看。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）