案例教学 | IDo官方的爱情「闯关游戏」！
之前直播分享给大家冬奥会交互图文，想学更多知识的同学们可以点击预约下周三直播——女神节案例分享。
今天这篇文字教程，
总结了之前直播的操作要点，
以IDo官方的案例为例：
点此查看原文案例：七夕｜给爱情解解“蜜”
????????案例动图演示????????
拆解
原文案例使用无缝图、开门滑动、前景左滑、长按切换、解锁展开等多个交互组件和组合，实现爱情谜题通关解密的交互效果。
????????原文动图演示????????
制作
1、添加组件：批量无缝图(全能)（10009），按顺序添加“1-1至1-3无缝图”；
2、添加组件：开门滑动-左右开门(适配深色模式)（10047），按顺序添加“底图”和“左开门”、“右开门”的滑动图；
3、添加组件：组件：全能无缝图（10028），添加图片“3无缝图”；
4、添加组件：双层滑动-前景左滑（10018），分别添加“底图”和“滑动图”；
5、添加组件：全能无缝图（10028），添加图片“3无缝图”；
6、添加组件：长按-长按淡入,松手淡出（10026），分别添加图片“长按前”和“长按后”，点击显示触发区域并调整，之后隐藏触发区域；
7、添加组件：批量无缝图(全能)（10009），按顺序添加“7-1、7-2无缝图”
8、添加组合：解锁展开(可设置点击动画&触发区域)（10473），点击配置组合，按顺序添加展开前“8-1至8-7切换图”，点击显示触发区域，按顺序调整“5201314”触发区域，之后隐藏触发区域；
9、在展开后编辑区，拖拽添加组件：全能无缝图（10028），添加图片“8-8展开后-无缝图”；
10、保存并退出组合，添加组件：全能无缝图（10028），添加图片“9-无缝图”。
11、若最后一个组件无缝图与上一个组合密码解锁之间有空白间隙，可选中组件无缝图，点击边距，调整外边距，预览查看效果，本案例调整为-5即可。
12、点击右侧“预览草稿”，可初步预览草稿效果（以导入公众号后台预览效果为准）。
导入公众号后台
13、在iPaiban Pro编辑器后台完成SVG交互图文后，点击右侧“导入微信后台”→点击“复制”；
14、打开微信公众号后台新建图文，点击浏览器右上角iPaiban Pro 小助手图标→点击“导入代码”→粘贴代码→点击“清空导入”；
15、操作成功后，记得添加标题、封面和保存，最后发送到手机预览最终的效果。
↓视频教学↓
↓查看还原后的效果↓
下期直播预告
2月23日（周三）直播教学女神节案例????扫码预约学习SVG交互效果????
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）