案例教学 | 宝姿PORTS用的「点击切换」效果是真的牛!

昨天直播分享给大家福虎迎春交互图文,想学更多知识的同学们可以预约下周三直播——虎年新创意案例分享。

拆解
原文案例使用组件:点击-切换GIF动图,实现点击探索勾勒文字的交互效果。

????????点击前、点击后的效果截图????????

制作
1、添加组件:点击-切换GIF动图(10086),分别添加图片“点击前”和“点击后”的图片,并将动画时间调整至3S;

2、重复添加两个组件:点击-切换GIF动图(10086),按顺序依次添加图片即可;
3、添加组件:超链接-图片(无角标)(10033),添加底图,复制跳转链接;
原文链接:https://mp.weixin.qq.com/s/pPCHg2kFLAvDAD1wiu-4Uw
(注:受订阅号权限影响,本示例中超链接用案例原文链接代替。)

4、点击右侧“预览草稿”,可初步预览草稿效果(以导入公众号后台预览效果为准)。


导入公众号后台
5、在iPaiban Pro编辑器后台完成SVG交互图文后,点击右侧“导入微信后台”→点击“复制”;

6、打开微信公众号后台新建图文,点击浏览器右上角iPaiban Pro 小助手图标→点击“导入代码”→粘贴代码→点击“清空导入”;

7、操作成功后,记得添加标题、封面和保存,最后发送到手机预览最终的效果。

完成预约后添加白露老师(微信 brandbailu)领取直播福利
本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
转载请在文章开头和结尾显眼处标注:作者、出处和链接。不按规范转载侵权必究。
转载请在文章开头和结尾显眼处标注:作者、出处和链接。不按规范转载侵权必究。
本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
未经授权严禁转载,授权事宜请联系作者本人,侵权必究。
未经授权严禁转载,授权事宜请联系作者本人,侵权必究。
本内容为作者独立观点,不代表数英立场。
本文禁止转载,侵权必究。
本文禁止转载,侵权必究。
本文系数英原创,未经允许不得转载。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权,侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权,侵权必究。




评论
评论
推荐评论
暂无评论哦,快来评论一下吧!
全部评论(0条)