移动互联网业务 Axure RP 88-1 Axure RP的案例一——屏幕滑动效果.ppt

EDITED BY CHENYU * 移动互联网业务 《移动互联网业务》课程 Mobile Internet Service 主讲教师 陈煜 移动通信技术专业教学资源库 深圳信息职业技术学院电子与通信学院 Axure RP案例一 ——屏幕滑动效果 实现目标： （1）屏幕里的内容（画布）跟随手势移动； （2）当移动手势过大时，画布返回至紧贴屏幕的上/下边缘（阻尼效果）。 案例：屏幕滑动效果 目录 01 第一步 02 第二步 Keynote 03 第三步 第一步： 将图片或文字组件放在动态面板里。 之所以放在动态面板里，是因为将这个动态面板看作一层薄薄的屏幕玻璃，手在上面滑动的时候，玻璃本身不动，是其下面的画布在动。 案例：屏幕滑动效果 目录 01 第一步 02 第二步 Keynote 03 第三步 第二步：为动态面板的ondrag手势添加用例 先选中触发用例的物体。 因为有时候点击了A 物体，可能引发B物体的出现/消失/移动， 而整个事件是A触发的， 所以用例是写在A上面的； 找到“控件交互与注释”面板。如下图，如果找不到的话，就在View - Panes - Widget Interactions and Notes 菜单里面把他打开； 案例：屏幕滑动效果 第二步：为动态面板的ondrag手势添加用例 在交互面板里面，找到鼠标拖动OnDrag事件，点击 add case增加用例。 意思是，你所写的用例，是一个鼠标拖动事件，由鼠标拖动引发。 其他的事件包括：鼠标点击(OnClick)、鼠标悬浮在控件上方（OnMouseEnter）、鼠标移开（OnMouseOut）。 案例：屏幕滑动效果 第二步：为动态面板的ondrag手势添加用例 案例：屏幕滑动效果 在弹出的 case editor用例编辑器里面选择你想要触发的动作 注意,对于一个没有加过任何用例的控件而言，axure会默认帮你把动作放在case1（第一个用例）之下。 大概分三个column （三个竖栏）： 第一个竖栏是动作的类型，全是树形结构，可以尽情的探索有没有你需要用的动作； 第二个竖栏是具体动作的表达式的预览； 第三个竖栏是选择操作的对象以及操作的方式，比如移动谁、移动的时候的耗时/速度。 都配置好以后，点击OK完成。 第二步：为动态面板的ondrag手势添加用例 案例：屏幕滑动效果 用例添加完成之后，会显示在“控件交互与注释”面板当中 用例可以再次修改（点Edit case或直接双击 case1）； 用例实际看起来，像数学表达式一样，Move something with drag y。 实际的原理是：动态面板检测到光标在上面移动 y像素时，将其里面的内容也移动y像素。 目录 01 第一步 02 第二步 Keynote 03 第三步 第三步： 阻尼效果 向上移动画布时，画布的y轴坐标值会减小。因为不能将内容拖出屏幕之外，所以这个y值会有一个最小值。同样，向下移动画布时，y轴坐标值会增大，会有一个最大值。我们先处理向上拖动的情况。 案例：屏幕滑动效果 计算y值的最小值： -(画布的高度 – 屏幕高度)：本例中，可以这样计算，是因为内容组件（image）的Y值，初始值为0。 为内容组件（image）添加用例：当拖拽结束鼠标释放时，如果image没有与底部操作栏交叠，则将image 向下移动至y值最小值（具体设置看右边的截图， -361 即为image向上拖拽的最小值）。 计算y值的最大值（本例中为0），处理内容组件向下拖动超出界限然后回弹的阻尼效果。 move 函数，是可以控制移动一个对象移动的速度的。在本例中使用匀速（linear 线性）即可。 小结：屏幕滑动效果 01 将图片或文字组件放在动态面板里 02 为动态面板的ondrag手势添加用例 Keynote 03 设置阻尼效果 谢 谢 主讲教师 陈煜 移动通信技术专业教学资源库 深圳信息职业技术学院电子与通信学院 * * * * * * * * EDITED BY CHENYU * 移动互联网业务 * * * * * * * *