在本教程中,你将学习如何制作一个轮播图,横幅或内容幻灯片,并且可以在移动设备上通过左滑右滑进行浏览。【原型预览】
1、元件设置
创建第一屏
- 打开一个新的RP文件,并在画布中打开Page 1。
- 从元件面板中拖拽一个矩形元件到画布中,然后在样式面板或样式工具栏中,使用填充颜色选择器将它填充为蓝色。
- 在矩形上点击鼠标右键,在弹出的右键菜单中选择转换为动态面板。
创建第二屏
- 双击动态面板以编辑它的状态。
- 在画布的顶部,点击State1,然后在弹出的下拉列表中点击添加状态,然后按回车键创建State2。
- 拖拽一个矩形元件到State2的画布中,将它放在坐标(0,0)的位置,然后设置它的填充色为红色。
创建第三屏
- 重复以上步骤来创建State3,并将它的矩形元件用绿色填充。
- 点击画布右上角的关闭或按ESC键退出状态编辑模式。
注意:当你创建自己的轮播图时,你可以在动态面板的状态中放入任何你想要的元件。
2、添加左滑交互
- 选中动态面板,点击交互面板中的新建交互。
- 在弹出的列表中选择向左拖动结束时事件,然后选择设置面板状态动作。
- 在目标下拉列表中选择当前元件。
- 在STATE下拉列表中选择下一项,然后选中向后循环。
- 在进入动画下,选择向左滑动。注意退出动画会自动选择与之匹配的选项。
- 点击确定按钮保存操作。
3、添加右滑交互
参照步骤2,使用向右拖动结束时事件,设置面板状态为上一项,然后选择进入动画的方式为向右滑动。
4、预览交互
预览页面,向左或向右滑动幻灯片来观看它的每一屏。
提示:如果想在移动设备上预览交互,将你的RP文件上传到Axure云平台上,然后在你的移动设备上打开它的分享链接。你也可以使用Axure Share APP。