GQ《红了》的自动展开效果是怎么做的？

原创赞收藏评论

举报 2022-08-26

扫描,分享朋友圈

在周二《白了红了蓝了又绿了，这7个案例都是用了「自动层层展开」的交互！》一文中，给大家整理了7个最近很火的自动展开式SVG图文案例，并提供了这些图文的素材免费领取。

这7个案例中，自动展开的效果分为两种，一种是自动层层展开，每展开一段会停顿一下再继续展开下一段；一种是自动平滑展开，从头到尾展开过程没有任何停顿。

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

自动层层展开和多变的文字动效因为较为复杂，目前用编辑器是实现不了的，需要专业的技术手写代码定制。
而如果交互是自动平滑展开，并且文字动效制作成了动图，比如新闻联播的《那一抹白！》和坦克SUV的《什么是越野？》，那我们用 iPaiban Pro 黑科技编辑器就能实现了。
目前在 iPaiban Pro 中有3种自动展开的效果组合：：自动展开（编号：10863）、自动切换GIF动图+展开（编号：10059）、自动切换GIF动图+从头展开（编号：10387），新闻联播和坦克SUV的用「自动展开」组合就可以，后面两个只是多了一个切换GIF动图的设置。
下面一起看下用 iPaiban Pro 还原坦克SUV《什么是越野？》案例的教程，大家也可以做起来了。

详细教程：
工具：iPaiban Pro黑科技编辑器，网址：x.iPaiban.com组合：自动展开编号：10863（组合）
第1步：选择组合
登录 iPaiban Pro 编辑器后，点击编辑器左侧「组合」按钮，在「花样展开」分类中找到「自动展开」组合，或者直接搜索组合编号10863，点击选择。

第2步：进入组合编辑模式，上传展开前的图片
点击编辑区的「点击此处配置」，进入组合编辑模式。在组合编辑模式中，分为「展开前」和「展开后」两个区域。
点击「展开前」区域，在右侧点击「换图」按钮上传展开前图片。

第3步：设置展开后的内容
展开后的内容可以嵌套各种组件。
所以首先要确认展开后的内容有哪些交互效果，会用到哪些交互组件，然后在左侧依次拖动相应组件到展开后区域组件位中。
因为《什么是越野？》中的文字动效都是动图，所以我们只需拖动一个「批量无缝图」组件到组件位中，然后上传图片即可。

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

「等待时长」是指用户打开图文后多久，图文会自动展开，「展开时长」即图文全部展开花费的时长。
预览如果发现没有完全展开或展开有多余空白，还可以通过「加减展开高度」进行调整。没有完全展开输入正数，展开有多余空白输入负数。
第5步：导入公众号后台
一切设置完毕后，点击页面左上角的「保存并退出」按钮退出组合编辑模式，再次预览没有问题，然后点击首页右侧「同步至微信后台」同步至自己的公众号就可以了。

局部导入可参考：《iPaiban Pro小助手v2.0安装和使用教程》
如果还想编辑展开的内容，可再次点击「点击此处配置」进入。

制作SVG交互图文认准 iPaiban Pro 黑科技编辑器，网址：x.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可开始注册并使用。
新用户在「新手礼包」可领取3天企业标准版会员体验权，以及22个常用必备组件的大礼包（1年）。随礼包附赠千元优惠券，每单最高立降500元。