GQ《红了》相似效果，自动平滑展开是怎么做的？
在《GQ〈红了〉刷屏，蓝了绿了白了也来了！》一文的7个自动展开式SVG图文案例中，自动展开的效果分为两种：
一种是自动层层展开，每展开一段会停顿一下再继续展开下一段；
一种是自动平滑展开，从头到尾展开过程没有任何停顿。
另外在展开过程中我们还会看到文字不同的动效，从素材中可以看出这些动效有的是代码实现的，而有的其实是动图。
多变的文字动效因为较为复杂，目前用编辑器是实现不了的，需要专业的技术手写代码定制。
而如果仅仅是自动层层展开或自动平滑展开交互，并且文字动效制作成了动图，用 iPaiban Pro 黑科技编辑器就能实现。
自动层层展开的教程见今天的头条，自动平滑展开比如新闻联播的《那一抹白！》和坦克SUV的《什么是越野？》，在这里看教程就可以了。
目前在 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元。
● SVG 黑科技交互排版????????·
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）