SVG创意排版 | 学会了「点击切换展开」做推文多有趣！
上周直播分享给大家虎年新创意交互图文，想学更多知识的同学们可以点击预约本周三直播——多图排版案例分享。
拆解
原文案例使用组件：连续点击-切换和组合：点击切换图片+展开，实现选择如何迎接春节的交互效果。
????????点击切换前后展示????????
制作
1、添加组件：批量无缝图(全能)（10009），添加图片“无缝图”；
2、添加2个组件：连续点击-切换多张图片（10055），重复添加5次（即10张）“2-1至2-2切换图”，第2个连续切换组件重复添加5次“3-1至3-2切换图”（即10张），并调整动画时间为0.1S。重复添加多次图片可以模拟出点击勾选后还能取消、取消后还能再次勾选的交互效果；
3、添加组件：全能无缝图（10028），添加图片“无缝图”；
4、添加组合：点击切换图片+展开(设置触发区域,宽屏)（10057），点击配置组合，添加展开前图片“切换前”、“切换后”，调整触发区域并隐藏，并调整组合切换时长为0S，展开时长为0.1S；
5、在组合展开后编辑区拖拽添加组件：超链接-图片(无角标)（10033），添加图片“展开后超链接”，粘贴跳转链接链接：
https://mp.weixin.qq.com/s/PBZu8lyvztkq7Pjpu6xi2Q（注：受订阅号权限影响，本示例中超链接用案例原文链接代替。）；
6、添加组合：点击切换图片+展开(设置触发区域,宽屏)（10057），点击配置组合，添加展开前图片“切换前”、“切换后”，调整触发区域并隐藏，并调整组合切换时长为0S，展开时长为0.1S；
7、在组合展开后编辑区拖拽添加组件：全能无缝图（10028），添加图片“无缝图”；添加组件位并拖拽添加组件：淘口令-图片(可调字体大小)（10194），添加图片“展开后淘口令”，粘贴淘口令：hi:/????1aWAcuEucDk✔，调整字体大小为14，并将淘口令调整至合适位置；
8、添加组件：全能无缝图（10028），添加图片“7无缝图”；
9、点击右侧“预览草稿”，可初步预览草稿效果（以导入公众号后台预览效果为准）。
导入公众号后台
6、在iPaiban Pro编辑器后台完成SVG交互图文后，点击右侧“导入微信后台”→点击“复制”，打开微信公众号后台新建图文，点击浏览器右上角iPaiban Pro 小助手图标→点击“导入代码”→粘贴代码→点击“清空导入”；
7、操作成功后，记得添加标题、封面和保存，最后发送到手机预览最终的效果。
下期直播预告
1月5日（周三）直播教学多图排版创意案例????扫码预约学习SVG交互效果????
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）