Axure RP这款软件的强大众所周知,笔者也处于探索期间。
特意将自己学习的过程记录下来,以便巩固。如果有初学者需要更是利己利人。
下面直接进入主题。
1.分析
分析需要轮播的图片数量,这里拿3张轮播图片来举例。分析完毕后来到“线框图”中找到“动态面板”选项,拖动动态面板到编辑区,并设置好动态面板的尺寸大小,和轮播的图片一致。
2.双击你拖出的动态面板,进入“动态面板状态管理”页面,点击“+”添加子集,子集的数量和你需要轮播的数量一致(这里需要提到的是,在新建动态面板和添加子集的时候最好为它们命名,这样方便后期的管理和编辑,这点真的很重要)
3.放入图片,在右下角“部件管理”中,双击你添加的子集,将图片放入子集对应的面板框中。(如果你添加了图片发现下面没显示,那么检查一下Widget Filter这个选项下是不是选的“所有部件”)
4.回到首页界面,你会发现你添加的图片的第一张已经显示在动态面板中了。然后选中动态面板,在右侧“部件交互和注释”中双击“载入时”用例进入用例编辑器
5.在用例编辑器中先选择“杂项”-“等待”输入等待毫秒数,这里用系统默认的1000毫秒。这么做的原因是防止轮播图在载入时就开始轮播,而导致第一张图片的显示效果不好,造成的用户体验不佳。然后选择“动态面板”选项下的“设置动态面板”选项,在“配置动作”中勾选刚刚我们设置的轮播图动态面板,选择状态选择“下一步”,勾选上“从最后一个到第一个自动跳转”实现无限轮播效果,勾选上“repeat every”并设定数值,这个选项设定的数值就是一张图片到下一张图片之间的等待时间。为了让过渡更加平滑,所以进入、退出动画都选择向左滑动,这个根据自己的需求决定。设置完毕后点击确定退出用例编辑器。另外需要提到的一点就是用例执行的顺序是由上到下的,所以“等待”用例需要在第一位才可以。
6.此时可以按F5预览一下效果,可以发现图片已经可以开始轮播了,但是还是缺少一部分东西。因为我们在网页中看到的轮播图效果,下面对应的点。这个轮播图圆点的制作方式完全和我们上面制作的过程一样,用例的添加也是一样的。
这里我是之间选择“线框图”中的矩形,换成了爱心。并填充了颜色以对应轮播的图片
这里的轮播图圆点的动态面板的用例我将动画修改为了“淡入淡出”,当然用向右滑动也是可以的,看个人需求
7.这个简单的轮播效果到这里就完成了,希望对初学者有所帮助。如果有人喜欢的话,我以后会多发些简单的教程上来,简书新开,希望和大家多多交流。