诶？石头科技的这篇图文点击展开后怎么还有文字落下？
「点击展开」的SVG交互效果很多品牌都在图文里应用过，那么如何推陈出新，让普通的展开效果也能出彩吸睛？
石头科技的这篇图文《新品｜好轻好用好看，A20 Air 轻盈上市！》或许可以带给你答案，点击展开后，图片上方的文字也随之落下，更有动态感。
我们先来看下效果：
诶？为什么同样都是使用了「点击展开」的SVG交互，石头科技的这篇图文里还有文字下落的动效？
▲GIF演示
首先，我们我们通过「iPaiban Pro 小助手浏览器插件」来下载素材进行参考学习，可以看到总共有3张静态图，3张图的尺寸一致。
素材展示
其中第1、2张图是「点击展开」的素材图，而第3张透明底的png图是「遮罩」的素材图。
这里的素材设计很有巧思，在点击展开前，第1张图和第3张图是重合的，并不会被用户察觉。随着点击展开后高度的延申，遮罩图才会被展开推动到第2张图上，有下落的动态感。其实原理和我们之前分享的这篇教程一样《小人、汽车跟着展开走，这篇 City Walk 图文是怎么制作的？》。
下面拆解下排版步骤????????，一起看下如何制作的吧。
详细教程：
工具：iPaiban Pro黑科技编辑器，网址：SVG.iPaiban.com
组合：点击展开(有触发区)
编号：10051（组合）
组件：遮罩
编号：10829（组件）
第1步：选择组合
登录 iPaiban Pro 黑科技编辑器后，点击编辑器左侧「组合」按钮，在「花样展开=基础展开」分类中找到「点击展开(有触发区)」组合，或者直接搜索组合编号10051，点击选择。
第2步：进入组合编辑模式
如下所示，点击「点击此处配置」，进入组合编辑模式。
在组合编辑模式中，我们需要分别设置展开前和展开后的内容。
第3步：设置展开前内容
上传图片：点击右侧换图上传图片，若图片上传错误，还可点击换图进行调整。
第4步：设置触发区域
双击图片可调整触发区域，将触发区域调整至「点击查看更多」的位置上，然后点击隐藏触发区域。
第5步：设置展开后内容
想要设置展开后内容，拖动一个「全能无缝图」组件到组件位中，然后上传图片即可。
第6步：设置展开时长
点击右侧红色小三角符号，可直接输入数值设置展开时长。
展开高度一般无需调整，但当大家在手机上预览时，如果发现展开后有多余的空白或者没有展现出全部内容，这时候可以通过调整展开高度使其恰好展开。
第7步：退出组合编辑
内容编辑完毕后，我们点击左上角「保存并退出」编辑模式来到首页。
第8步：选择组件
点击编辑器左侧「组件」按钮，在「特殊」分类中找到「遮罩」组件，或者直接搜索组件编号10829，点击选择。
第9步：上传图片素材
点击「换图」替换遮罩图。
第10步：导入公众号后台
点击最右侧「预览草稿」扫码预览效果，效果满意后接着点击「同步至微信后台」就可以了。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）