GQ《红了》相似效果，自动平滑展开是怎么做的？

原标题：GQ《红了》相似效果，自动平滑展开是怎么做的？

在《GQ〈红了〉刷屏，蓝了绿了白了也来了！》（原文链接：https://mp.weixin.qq.com/s/DLyanuxnFWbPdSL2atOwTA)一文的7个自动展开式SVG图文案例中，自动展开的效果分为两种：

一种是自动层层展开，每展开一段会停顿一下再继续展开下一段；

一种是自动平滑展开，从头到尾展开过程没有任何停顿。

另外在展开过程中我们还会看到文字不同的动效，从素材中可以看出这些动效有的是代码实现的，而有的其实是动图。

多变的文字动效因为较为复杂，目前用编辑器是实现不了的，需要专业的技术手写代码定制。

而如果仅仅是自动层层展开或自动平滑展开交互，并且文字动效制作成了动图，用 iPaiban Pro 黑科技编辑器就能实现。

自动层层展开的教程见今天的头条，自动平滑展开比如新闻联播的《那一抹白！》（原文链接：https://mp.weixin.qq.com/s/n2y3NcB9x7L1wIHSX1vWFw）和坦克SUV的《什么是越野？》（原文链接：https://mp.weixin.qq.com/s/rEk0FNMZE5W9VDttorQnbQ），在这里看教程就可以了。

目前在 iPaiban Pro 中有3种自动展开的效果组合：：自动展开（编号：10863）、自动切换GIF动图+展开（编号：10059）、自动切换GIF动图+从头展开（编号：10387），新闻联播和坦克SUV的用「自动展开」组合就行，后面两个只是多了一个切换GIF动图的设置。

详细教程：

工具：iPaiban Pro黑科技编辑器，网址：x.iPaiban.com

组合：自动展开

编号：10863（组合）

第1步：选择组合

登录 iPaiban Pro 编辑器后，点击编辑器左侧「组合」按钮，在「花样展开」分类中找到「自动展开」组合，或者直接搜索组合编号10863，点击选择。

第2步：进入组合编辑模式，上传展开前的图片

点击编辑区的「点击此处配置」，进入组合编辑模式。在组合编辑模式中，分为「展开前」和「展开后」两个区域。

点击「展开前」区域，在右侧点击「换图」按钮上传展开前图片。

第3步：设置展开后的内容

展开后的内容可以嵌套各种组件。

所以首先要确认展开后的内容有哪些交互效果，会用到哪些交互组件，然后在左侧依次拖动相应组件到展开后区域组件位中。

因为《什么是越野？》（原文链接：https://mp.weixin.qq.com/s/rEk0FNMZE5W9VDttorQnbQ）中的文字动效都是动图，所以我们只需拖动一个「批量无缝图」组件到组件位中，然后上传图片即可。

第4步：设置展开参数

点击右侧红色小三角符号，可设置「等待时长」和「展开时长」。

「等待时长」是指用户打开图文后多久，图文会自动展开，「展开时长」即图文全部展开花费的时长。

预览如果发现没有完全展开或展开有多余空白，还可以通过「加减展开高度」进行调整。没有完全展开输入正数，展开有多余空白输入负数。

第5步：导入公众号后台

一切设置完毕后 ，点击页面左上角的「保存并退出」按钮退出组合编辑模式，再次预览没有问题，然后点击首页右侧「同步至微信后台」同步至自己的公众号就可以了。

局部导入可参考：《iPaiban Pro小助手v2.0安装和使用教程》（原文链接：https://mp.weixin.qq.com/s/0OjjcDQYPfubmcyYhJZ_2w）

如果还想编辑展开的内容，可再次点击「点击此处配置」进入。

现在新用户注册登录iPaiban Pro 黑科技编辑器，在「新手礼包」可领取3天企业标准版会员体验权，以及22个常用必备组件的大礼包（1年）。

认准编辑器网址：x.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可开始创作SVG交互排版（又称公众号交互图文、互动图文、黑科技排版、互动式排版）返回搜狐，查看更多

责任编辑：