威士忌案例教学 | SVG创意排版之「点击消失+从头展开」
昨天直播教大家做年终总结交互图文，想学更多知识的同学们可以点击预约下周三直播——圣诞和元旦创意案例分享。
今天这篇文字教程，
总结了之前直播的操作要点，
来一起跟着练吧！
以宾三得利威士忌的案例为例：
点此查看原文案例：匠心传世 非凡1964
????????动图演示教程效果????????
拆解
原文案例使用组合：点击消失+从头展开，嵌套组件：批量无缝图+横板视频，实现展开前的历史发展时间节点GIF图，展开后详细介绍无缝图+视频的交互效果。
????????截图分别是展开前与展开后效果截图????????
通过研究案例效果，确定使用组件：批量无缝图(不可弹出)、组合：点击消失+从头展开(设置触发区域,宽屏) 、组件：视频-横版无缝拼接(宽屏)即可实现。
制作
1、添加组件：批量无缝图，添加图片“展开前-无缝图”；
2、添加组合：点击消失+从头展开，点击编辑组合，添加展开前GIF图；调整触发区域并隐藏；
3、在展开后编辑区拖拽添加组件批量无缝图，并添加图片“3-1至3-9展开后-无缝图”；
4、在展开后编辑区添加组件位，并拖拽添加组件横板视频(10038)，粘贴提取得到的视频vid（视频vid：wxv_2168944695303782408）；
视频vid提取：先将视频上传到公众号后台，然后新建一篇图文，添加刚上传的视频，点击iPaiban Pro小助手插件，点击“提取视频-本地上传”，获得视频vid，复制后粘贴到编辑器后台视频组件中即可；
5、在展开后编辑区添加组件位，并拖拽添加组件批量无缝图，并添加图片“5-1至5-3展开后-无缝图”；
导入公众号后台
6、在i排版编辑器后台完成SVG交互图文后，点击右侧“导入微信后台”→点击“复制”；
7、打开微信公众号后台新建图文，点击浏览器右上角iPaiban Pro 小助手图标→点击“导入代码”→粘贴代码→点击“清空导入”；
8、操作成功后，记得添加标题、封面和保存，最后发送到手机预览最终的效果。
↓动图演示还原后的效果↓
下期直播预告
12月15日（周三）直播教学圣诞和元旦创意案例
????扫码预约学习SVG交互效果????
完成预约后添加白露老师（微信 brandbailu）领取直播福利
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）