GQ《红了》自动层层展开效果，可以弹性展开了！
阅读量400W+，点赞和在看是平时的约40倍，GQ实验室2022年阅读最高的文章。
这是GQ《红了！》图文的数据成绩。
它的爆火肯定是多方面原因造成的，其中自动层层展开的排版效果肯定是一个重要因素，之前老沙给大家介绍过多次自动层层展开及其进阶效果的实现方法，没看过的可以戳：
《GQ〈红了〉自动层层展开效果炸裂，我们又推出2种升级模板！》
现在可以抖动的自动层层展开效果也来了！我们以《红了！》原文的图片为素材，来看看效果，点击图片：
展开前先抖动一下，可以更好的提示用户注意到展开效果，如果搭配合适的文字动效和文案内容，带抖动的展开具有更强的节奏感。
示例为「点击+自动层层展开(有抖动)」组件效果，另外 iPaiban Pro 编辑器中还有无需点击的「自动层层展开(有抖动)」组件，这两个组件都有对应的组合，组合的特别之处是可以在最后一层展开中嵌套其他交互效果。
大家在组件和组合分类中分别搜索关键词「自动层层展开」就可以看到所有相关效果。
以「点击+自动层层展开(有抖动)」组件效果为例，一起看下怎么制作的吧：
详细教程：
工具：iPaiban Pro黑科技编辑器，网址：x.iPaiban.com
组件：点击+自动层层展开(有抖动)
编号：11427（组件）
第1步：选择组件
登录 iPaiban Pro 编辑器后，点击编辑器左侧「组件」按钮，直接搜索组件名称或编号11427，点击选择。
第2步：上传图片素材
我们不需要调整展开高度，每一张图片系统会自动识别展开一次，展开高度由图片高度决定。
点击右侧「+」号可批量上传准备好的图片素材。
如果发现图片顺序错误，可上下拖动图片进行调整。
第3步：调整触发区域
双击编辑区的图片，调出触发区域调整窗口。红色色块代表触发区的范围和大小，拖动即可调整。注意不要让红色色块超出图片边缘，否则可能影响交互效果。
第4步：调整展开效果参数
在上传图片下方，提供有「每张停留时间」、「动画时间」和「抖动程度」的设置。「动画时间」为每张图片的抖动展开时间，拖动滑杆即可调整。
第5步：导入公众号后台
点击页面最右侧「预览草稿」可随时预览效果，效果满意后点击「同步至微信后台」同步到自己的公众号就可以了。
使用同步功能不用频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码查看。
如需局部导入可参考：《iPaiban Pro小助手v2.0安装和使用教程》
制作SVG交互图文认准 iPaiban Pro 黑科技编辑器，网址：x.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可开始注册并使用。
新用户在「新手礼包」可领取3天企业标准版会员体验权，以及22个常用必备组件的大礼包（1年）。随礼包附赠千元优惠券，每单最高立降500元。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）