Axure之手机屏保滑动效果的实现

首先说说最后要实现的效果吧：

界面首先看到的是屏保，然后从屏幕底端上滑（同时底端会出现一个等宽的灰条）之后能够看到主页面！当上滑之后释放的时候上滑的高度超过手机屏幕的1/3则自动滑到顶端，否则自动下滑到初始位置。

然后讲讲思路：

提个问题：只用动态面板能不能实现？
我的答案是能，但是如果只用动态面板的话，每次修改东西都需要在同一个界面，操作其实是过于复杂了，那有没有更好一点，更具有层次性的方法呢？答案是有的！借助框架，我们可以清晰并且有层次的完成。
首先是对各个界面的介绍：
1、主页中有一个框架，这个框架指向屏保的界面，另外点击home键可以重新加载屏保界面

2、屏保的界面中上层是屏保图片（该图片是一个动态面板，实现滑动效果最关键的操作还是在于对这个动态面板的处理，下面会讲到），底层是一个框架（图片没有显示出来，和屏保图片等宽等高），指向主屏，也就是说如果屏保图片被隐藏的话就能够显示出主屏

3、主屏中就是一张图片

其次讲讲交互
4、点击home键就相当于是重置页面，在主页的框架中重新打开屏保界面

5、最关键的屏保中动态面板的交互，其实也是很简单的，当拖动事件触发的时候，就去设置动态面板的size，使其宽度不变，高度为自身高度加上鼠标拖动的y轴的距离（上拖为负下拖为正）。同时移动灰条到相对位置：x=0，y=鼠标拖动距离y。当拖动结束事件触发的时候，去判断拖动的高度，如果多余框架高度的1/3就将动态面板的宽度高度设置为0，0，否则就将其恢复到原来的位置。