偶看新闻物流仓库控制器的设计:实现前后滚动效果
来源：百度文库 编辑：偶看新闻 时间：2024/05/09 07:24:44
实现前后滚动效果-axure设计实例
效果说明：
通过点击向前向后的按钮实现某模块中的内容前后移动。这个设计可以应用在有限的空间内显示众多内容时候，且内容并不是非常重要的。它的缺点是由于隐藏了后面的内容，点击率肯定没有第一屏显示的内容点击率高，因此重要的信息需要传达给用户时不宜采用此方法。
效果图示：
实现使用到的action:
1、move panel(s) /*根据绝对坐标或相对坐标来移动动态面板 */
2、wait time(s) /*等待多少毫秒(ms)后再进行这个动作*/
实现思路：
1、使用到两个动态面板，一个动态面板用来显示用户看到的第一屏内容，第二个动态面板用来显示所有的内容。这里第二个动态面板肯定比第一个动态面板要长。
2、动作只要在向前和向后按钮中去设置，想让用户单击时滚动，就在OnClick中添加，想让用户鼠标移到按钮上时滚动，就在OnMouseEnter中添加。本次例子是OnClick.
3、在OnClick中，添加action，首先当单击的时候要移动第二个面板中的内容，使用move panel(s)动作，移动的时候有两个选项 "to"和“by”，这里使用by,x轴填写你要移动距离，如果是点击向后按钮，这里的距离要加上负号，如果点击的是向前按钮，这里填的就是正数。
4、接着使用wait time(s)动作，为了实现移动中有动感，那么在这里可以使用等待200ms后再向前移动一点。再向前移动一点。（你要让用户单击按钮后看到的内容的最前的那个位置）
5、最后再使用move panel(s)移动到你想让用户点击按钮时看到内容的最前位置。（如我例子中，当用户点击向后时让他看到“以2方块开始”的内容）
要点：
1、为了实现动作流畅，在用户完成一次点击的时候，可以先让界面移动一点，等待一会时间，再移动到最终的位置。
要点截图：
图1：使用到的动态面板
图2：点击向右移动
图3：点击向右移动
下载原型：
/Files/05341/axure案例/实现前后滚动效果.rar