axure8 中如何处理APP中长内容页面的拖动

教程记录原因

---

         Axure作为产品工作中不可缺少的可视化原型工具，虽然我们每天都在用，但是大多数人也只是在做堆积木的过程，这其中也包括我~一些产品界经验丰富的老咖面对原型图，可能觉得只要能够表达出需求的意思就可以了，没有必要做很多的动态效果，添加很多的变量。我刚入行时，我的经理也说过这样的话。直到有一次，涉及到一个新的项目，需要尽可能的让所有的需求都可视化。正好这个项目又落到我的头上时，我轻轻松松的去做了，结果当然被K了。页面重复的做了很多，客户看的很复杂，很麻烦，没有丝毫动态效果，更不要提什么变量了~所以，我深深的总结了，新人还是要做好基础，老咖之所以说不重要是因为人家都会了，自然知道什么时候该做，什么时候不做了。

教程说明

---

本次教程只说明APP原型设计中遇到长界面需要拖动时，如何做到上下拖动，都可以控制在一定范围内。

教程开始

---

1、打开Axure8，Axure经过更新后界面更加符合现代潮流了，很像WPS的界面风格，功能应用大致没有什么变化、元件库里多了默认的ICON图标、概要页面中更加具体，一目了然啊~很方便（舒服脸）

2、找到元件库中的内联框架，拖动到工作区域内；

内联框架

设置内联框架的尺寸为宽：300，高500；（随便设置的，为了下面计算方便），这里放置内联框架时最好贴着坐标系的（0,0）

3、在另外1个页面上放置动态面板；

放置动态面板

设置动态面板的尺寸为宽300，高800；（说好的长尺寸来了）在动态面板中放好内容物，我放了2张美女图片（呵呵呵~），同样放置在坐标系的（0,0）处；

4、设置动态面板的拖动规则，设置结束后的状态如下，如果不想看详解就直接对着做哦~

设置完成后

详细说明：

首先将动态面板和内联框架连接，双击内联框架，在出现的弹窗中点击需要连接的动态面板即可；

其次回到设置动态面板属性设置；

设置动态面板（图片集）垂直拖动

垂直拖动设置

完成上一步，就能够实现动态面板上下滑动了，但是还不能实现在固定范围内滑动；

接下来设置“拖动结束时”的情况；

拖动结束时有2种情况，1种是用户向下滑动，需要动态面板自动弹回到初始状态；另外1种是用户向上滑动，超出了框架的底部一定范围时，动态面板会弹回到和框架平齐的状态；

第1种向下滑动，只要在动态面板的Y值大于0时，将动态面板弹回初始状态就可以了；

设置向下滑动时的情况

第2种需要计算坐标值；

计算坐标系

假设，我们需要判断拖动内容超过内联框架100的时候弹回，也就是说当动态面板的Y值小于-400的时候，才可以弹回；条件有了，目标是什么，也就知道了。只要将动态面板的Y值调回-300就可以实现。

就酱~需要一些动态效果，比如弹跳神马的，也可以自己设置哦~~