效果说明:(1)页面载入后定时4s自动循环轮播;(2)图片向左滑动,原点指示随图片滑动变化;(3)鼠标移入原点可切换到对应的图片。
制作前准备:Axure8+3张图片
动效制作:
1.将page1命名为“图片轮播”——拖入“图片”控件,将其命名为“pic",并调整其样式大小为“375*200”。
2.双击“pic"控件添加图1,调整图片大小为375*200,将其转换为“动态面板”,再分别添加两个状态,在状态2,3添加图2和图3。
3.回到图片轮播页,拖入”椭圆“控件,调整大小及样式,复制2个,平行排列对齐。将原点1灰色填充,原点2,3白色填充。将3个原点组合并将其转换为"动态面板”,添加状态2(命名为2),状态3(命名为3),分别在状态2,3填充第2和第3个原点为灰色,其余为白色。
4.拖入3个“热区”控件,分别覆盖在原点1,2,3上(热区大小与圆大小一致),分别命名为point1,point2,point3。
5.添加用例——自动循环轮播:
(1)用例1,选中“图片轮播”页面,选择交互“页面载入时”,添加动作“设置面板状态”,在配置动作做选择“pic动态面板”,选择状态为Next,向后循环,循环间隔4000毫秒(4s定时自动循环轮播),添加进入和退出动画为向左滑动。同样的,设置“point动态面板”,选择状态为Next,向后循环,循环间隔4000毫秒(4s定时自动循环轮播),添加进入和退出动画为逐渐。
步骤5基本上就完成了图片定时自动循环轮播的效果了👍👍。
6.添加用例——鼠标移入原点切换至对应的图片
(1)选中热区“point1",添加交互“鼠标移入时”,添加动作“设置面板状态,配置动作,设置“pic动态面板”状态为state1,进入和退出动画为淡入淡出。同样的,设置“point动态面板”状态为1,进入和退出状态为逐渐。
(2)选中热区“point1",添加交互“鼠标移出时”,添加动作“设置面板状态”,在配置动作做选择“pic动态面板”,选择状态为Next,向后循环,循环间隔4000毫秒(4s定时自动循环轮播),添加进入和退出动画为向左滑动。同样的,设置“point动态面板”,选择状态为Next,向后循环,循环间隔4000毫秒(4s定时自动循环轮播),添加进入和退出动画为逐渐。在这里一定特别注意要勾选“首个状态延时4000毫秒后切换,如果没有勾选,则会出现鼠标一移出,效果混乱的现象。
The end. 常见的图片轮播效果就完成了,超级简单,只需要5分钟的时间搞定!
附上原型链接,希望大家指正不正确的地方。跪谢。
链接: https://pan.baidu.com/s/1eS1Brpw 密码: rqrj