案例教学 | 用「连续点击切换图片+消失展开」发个大红包！
前天直播分享给大家红包交互图文，想学更多知识的同学们可以点击预约本周三直播——除夕案例分享。
点击预约下一期直播
????学更多知识????
今天这篇文字教程，
总结了之前直播的操作要点，
以海瑞温斯顿HarryWinston的案例为例：
点此查看原文案例：“牛”来运转，祝福将至
拆解
原文案例使用组合：连续点击切换图片+消失展开，嵌套搭配组件无缝图、超链接、点击切换超链接，实现点击牛牛领红包，点击光点收福运的交互效果。
????????拆红包动图演示????????
制作
1、添加组合：连续点击切换图片+消失展开(可设置触发区域)（10469），添加图片“1-1、1-2展开前”；
调整触发区域并隐藏；
2、在展开后编辑器拖拽添加组件：全能无缝图（10028），添加图片“2展开后-无缝图”；
3、添加组件：全能无缝图（10028），添加图片“3-1无缝图”；
4、添加组件位，并拖拽添加组件：超链接-图片(默认角标)（10034），添加图片“3展开后-超链接”，并添加原文链接：https://mp.weixin.qq.com/s/KpaR8GGcS_18CmdcDF-32g。
（注：受订阅号权限影响，本示例中超链接用案例原文链接代替。）
5、添加组件位，并拖拽添加组件：全能无缝图（10028），添加图片“4展开后-无缝图”；
6、添加2个组件位，并依次拖拽添加组件：点击-切换GIF动图(无角标超链接)（10154），分别添加图片“切换前、切换后”，并添加原文链接：https://mp.weixin.qq.com/s/KpaR8GGcS_18CmdcDF-32g。
（注：受订阅号权限影响，本示例中超链接用案例原文链接代替。）
7、添加组件位，并拖拽添加组件：全能无缝图（10028），添加图片“7展开后-无缝图”；
8、点击右侧“预览草稿”，可初步预览草稿效果（以导入公众号后台预览效果为准）。
导入公众号后台
9、在iPaiban Pro编辑器后台完成SVG交互图文后，点击右侧“导入微信后台”→点击“复制”；
10、打开微信公众号后台新建图文，点击浏览器右上角iPaiban Pro 小助手图标→点击“导入代码”→粘贴代码→点击“清空导入”；
11、操作成功后，记得添加标题、封面和保存，最后发送到手机预览最终的效果。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）