一起做「连续点击切换图片+消失展开」交互效果！
上周直播教大家做连续点击切换图片+消失展开效果
????????动图演示教程效果????????
拆解
原文案例通过根据提示连续点击切换，实现模拟购票、出票、飞行、到站的情景：
????????截图分别是点击前和点击后的效果????????
通过研究案例效果，确定使用组件：小程序-图片(无角标)和组合：连续点击切换图片+消失展开(可设置触发区域)即可实现。
制作
1、添加组件：小程序-图片(无角标)，点击此处配置；
2、添加组合：连续点击切换图片+消失展开(可设置触发区域)，点击边距，调整组合上方外边距为10，这样就可以实现小程序组件与连续点击切换组合之间的空白间距了，之后点击此处配置；
3、点击此处配置后点击“展开前”，按顺序添加“切换图”；
4、双击图片调整触发区域位置，由于每张图片的触发区域位置不一样，所以需要每一张图片的触发区域，调整后点击组合上方隐藏触发区域；
5、添加组件批量无缝图，并按顺序添加图片“无缝图”；
6、点击空白区域，调整展开时长为1s；
7、点击保存并退出后，点击右侧“预览草稿”，可初步预览草稿效果（以导入公众号后台预览效果为准）。
导入公众号后台
8、在i排版编辑器后台完成SVG交互图文后，点击右侧“导入微信后台”→点击“复制”；
9、打开微信公众号后台新建图文，点击浏览器右上角iPaiban Pro 小助手图标→点击“导入代码”→粘贴代码→点击“清空导入”；
10、操作成功后，记得添加标题、封面和保存，最后发送到手机预览最终的效果。
↓动图演示还原后的效果↓
本文系作者授权数英发表，内容为作者独立观点，不代表数英立场。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
本文系作者授权数英发表，内容为作者独立观点，不代表数英立场。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本内容为作者独立观点，不代表数英立场。
本文禁止转载，侵权必究。
本文禁止转载，侵权必究。
本文系数英原创，未经允许不得转载。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）