点击一下,图片就像大风车一样旋转切换为另一张。
*素材来自Weekend Max Mara《把秋天分享给你》
组件:连续点击-图片顺时针旋转切换(下、有触发区)
编号:11283(组件)
这是之前给大家介绍过的一种连续点击旋转切换玩法,点击后图片以下边中点为圆点旋转切换,看着很有意思。
更有意思的来啦!今天给大家推荐的是连续点击旋转切换的一个升级玩法。
再看下下面两个案例:
*素材来自奔驰铸星培训《想去哪儿就去哪儿,云旅游安排!》
组件:连续点击-图片顺时针旋转切换同时切换背景(下)
编号:11715(组件)
*素材来自五菱商用车《五菱E10「致富小精灵」超级变身show!》
组件:连续点击-图片顺时针旋转切换同时切换背景(下)
编号:11715(组件)
有没有发现有什么区别?
奔驰和五菱这两个案例,点击后不仅图片旋转切换,而且背景图也随之切换,交互效果非常巧妙,让场景变换更加真实具有沉浸感。
这种效果用 iPaiban Pro 黑科技编辑器的「连续点击-图片顺时针旋转切换同时切换背景(下)」组件(编号:11715)轻松实现。
除了以图片下边中点旋转切换的,还有以上、左、右3个方向的,都支持调整触发区和旋转快慢。
组件:连续点击-图片顺时针旋转切换同时切换背景(上)
编号:11719(组件)
组件:连续点击-图片顺时针旋转切换同时切换背景(左)
编号:11720(组件)
组件:连续点击-图片顺时针旋转切换同时切换背景(右)
编号:11721(组件)
以五菱的效果为例,一起来看看教程吧!
详细教程:
工具:iPaiban Pro 黑科技编辑器
组件:连续点击-图片顺时针旋转切换同时切换背景(下)
编号:11715(组件)
第1步:选择组件
登录 iPaiban Pro 编辑器后,点击编辑器右侧「组件」按钮,在「点击」-「旋转切换」分类中找到「连续点击-图片顺时针旋转切换同时切换背景(下)」组件,或者直接在搜索框中搜索组件编号11715,点击选择。
第2步:上传图片素材
①上传图片:点击右侧「+」号分别上传背景图和切换图。每张图片尺寸保持一致,切换图数量需要与背景图保持一致,切换图可以为GIF动图。
②调整图片顺序:上下拖动图片可调整图片顺序。
第3步:设置触发区域
双击编辑区的图片,在弹出的窗口中红色色块表示触发区域,可任意调整位置和大小。
第4步:调整动画参数
右侧滑动滑杆调整图片旋转切换的时间,下方可选择不同的旋转角度。
第5步:导入公众号后台
该组件不支持在编辑器内直接预览,内容编辑完成后继续点击最右侧「预览草稿」扫描二维码在手机预览,效果满意后接着点击「同步至微信后台」就可以了。
使用同步功能无需频繁在编辑器和微信后台切换,同步成功后可以立即扫描二维码查看。