【Axure教程之高级交互原型6】实时响应动态交互：按住拖动实时改变界面元素、页面布局

【摘要·简介】

本次教程实现的是一个实时响应互动的交互原型——当按住拖动的时候，页面实时响应产生变化，比如元素的大小随着拖拽缩放、移动等。

关键技术点：

1、进一步学习灵活使用局部变量和全局变量；

2、灵活使用OnDrag、OnDragDrop操作；

3、学习使用实时变化的全局变量来影响其他部件的属性变化，从而实现“拖动 - 变化”的实时响应交互效果；

我们先来看一下完成后的效果：

高清操作录制视频见附件压缩包

【补充】：因为很多人说看不到附件，我把所有教程附件上传了百度云分享，有兴趣同学自取哈

百度网盘地址：https://pan.baidu.com/s/1_2sglDP_0TWoE-wwACkT5g

好了，让我们正式开始，继续探索Axure高级交互逻辑原型的世界~

——————————————————分割线———————————————

【Step1】建立所需要的全局变量

1、打开附件压缩包中的“教程初始状态的Axure工程文件.rp”工程文件

原型中，页面布局已经搭建完成, 还可以看到还有一个命名为“追踪器”的空白动态面板。注意追踪器的y轴位置必须等于0。

如下图1所示

图1：

2、我们来整理一下思路，如何实现随着拖动，页面元素实时变化。以缩放为例：

（1）拖动过程中，让空白动态面板“追踪器”在Y轴上跟随鼠标/手指拖动而运动；

（2）用一个全局变量实时记录下“追踪器”的Y轴位置变化；

（3）将该全局变量赋予其他页面元素的尺寸值，从而实现实时变化；

接下来我们先做背景banner图的大小随着上下拖动而缩放的效果。

3、选择“Dymp_总容器”，在右侧栏里选择OnDrag动作，双击打开case编辑窗口。如下图2所示：

图2：

4、选择添加一个Move动作，在右侧栏里选择“追踪器”，设置Move参数为“with drag y”，即动态面板部件“追踪器”仅限在Y轴方向上随着鼠标/手指拖动而移动。如下图3所示：

图3：

5、再添加一个Set Variable Value动作，在右侧点击蓝色下划线字体“Add variable”，在弹出的弹窗里新建一个命名为“TrackY”的全局变量，如下图4所示：

图4：

6、点击右下角的“fx”，在弹出的弹窗中，首先建立一个局部变量，用来定位所要记录移动值的部件名称，点击蓝色下划线字体“Add Local Variable”，建立一个局部变量，点击中间的下拉框选择“widget”，如下图5所示：

图5：

7、在最右侧的下拉框里，选择“追踪器”，如下图6所示：

图6：

8、点击上方的蓝色下划线字体“Insert Variable or Function…”，在弹出的下拉框中选择Widget下的y，即部件的y值，如下图7所示：

图7：

9、可以看到输入框内出现了[[This.y]]的表达式字符串，选择字符“This”，如下图8所示：

图8：

然后再次点击蓝色下划线字体“Insert Variable or Function…”，在弹出的下拉框内选择刚刚创建的局部变量LVAR1，如下图9所示：

图9：

这样，整个表达式的含义就变成了“部件’追踪器’的Y值”。

10、点击Ok，关闭弹窗，回到case编辑窗口点击OK。

运行一下原型，点击左侧栏里的“（x）CONSOLE”，可以看到原型中的所有全局变量值。尝试拖动一下，可以看到变量TrackY的值随着拖动不断变化，如下图10所示：

图10：

——————————————————分割线———————————————

【Step2】将变量用于部件尺寸的变化。

1、先制作向下拖动，图片随着放大的交互效果。

依然选择“Dymp_总容器”，在右侧栏里选择OnDrag动作，双击打开case编辑窗口。添加一个Set Size动作，在右侧栏选择动态面板“Dymp_总容器”下的“banner图”，然后点击Width（即宽度值）右侧的“fx”按钮打开宽度值编辑窗口，如下图11所示：

图11：

2、这里，因为图片的长宽比不是1：1，所以在将全局变量与当前值进行联动时，我们不能用加减法，需要用乘除法。框选输入框内的字符串750，点击色下划线字体“Insert Variable or Function…”，下拉框内选择刚刚创建的全局变量，如下图12所示：

图12：

这样先用全局变量值代替原有的值750，如下图13所示：

图13：

3、将鼠标光标定位到TrackY前（注意在[[之后），然后输入字符串“750*”，如下图14所示，当前表达式的含义为：“750 乘以 全局变量TrackY”。

图14：

4、直接相乘数值过大，会造成图片变化过于剧烈，所以我们需要将原始值750乘以一个1.x系数，也就是图片的变化尺寸是当前值的1.x倍，这样才能得到一个比较合理的图片缩放效果。那么如何将全局变量TrackY的数值变化转换成一个1.x的系数值呢？有一个方法是，将表达式编辑如下：

“[[750*(TrackY*0.003+1)]]”

这个表达式的含义是：TrackY乘以0.001再加上1，这样就得到了一个1.x的倍率系数，无论如何拖动，始终能将追踪器的y值变化映射为1.x倍数变化。例如向下拖动200px，则这个倍率系数是200x0.003+1=1.6。

附注：这里之所以定位乘以0.003，是我这边试验了几次不同数值之后所得到的效果较好的一个系数。大家也可以自己试试别的系数，看看效果~~

最后编辑Set Size的参数如下图15所示：

图15：

注意Anchor一定要设置为“center”，即中央为轴心缩放。

运行一下原型，可以看到随着拖动，已经实现了图片随拖动缩放的交互效果。

5、然后我们将页面下半部分也跟着拖动一起上下运动。选中Move动作，在右侧选中“Dymp_下半部分”，设置参数如下图16所示：

图16：

——————————————————分割线———————————————

【Step3】完善交互细节

1、目前的原型运行效果，虽然实现了随拖动缩放的交互，但是体验仍有问题：

一是往上拖动时图片缩小露出白边，视觉体验差；

二是页面下半部分会一直跟着拖动往下移动甚至移出画面范围。

这里还缺少两个限制条件：

第一，在往上拖动的时候，限制图片不能变小保持原始尺寸；

第二，往下拖动的时候，限制拖到一定位置，页面下半部分不再往下移动；

这里我们用“定义case的condition/条件”的方法来实现，也就是给case的运行定义一个前提条件。

2、依然选择“Dymp_总容器”的OnDrag动作并双击“Case 1”，打开“Case1”的case编辑窗口。点击Add condition（添加条件），弹出条件编辑窗口，如下图17所示：

图17：

Step2.1 从简入深，我们先设置往下移动最大极限的限制条件。

3、第一个下拉框选择“Value”，如下图18所示：

图18:

4、第二个输入框点击右侧的“fx”，编辑表达式如下图19中红色矩形框内所示，这个表达式的含义是：追踪器在y轴上移动的距离。如下图19所示：

图19：

5、第三个下拉框选择“is less than”，最后一个输入框输入“330”，含义是“值小于330”，如下图20：

图20：

所以整个条件语句的含义是：追踪器在y轴上的最大移动距离小于450。大于整个数值的，就不满足整个前提条件，也就无法往下继续拖动。

6、运行一下原型试试，可以看到向下拖动到一定距离后，就无法再移动了。这样，向下移动的限制就已经实现了。

Step2.2 制作松开鼠标/松手后，页面回弹恢复原始状态的下拉回弹动画

7、选中“Dymp_总容器”，在右侧栏里选择OnDragDrop动作，双击打开case编辑窗口。

回弹后，不仅被拖下去的页面下半部分要上弹回到原始位置，而且被放大的图片也要回到原始大小。所以添加一个Move动作和Set Size动作，分别在右侧选中动态面板“Dymp_下半部分”和动态面板“Dymp_上半部-大图”下的图片部件“banner图”，设置参数如下图21所示；

图21：

注意Set Size动作里的anchor参数一定要设置为“top left”，不能像前面那样设置为center，否则左上部可能露出底部白色区域。

8、同时还需要将图片的位置移动到初始的（0，0）位置，所以在Move动作上再在右侧选中动态面板“Dymp_上半部-大图”下的图片部件“banner图”，设置参数为（0，0）；

另外追踪器的位置也要回到y轴=0的起始位置。所有参数设置如下图22所示：

图22：

运行一下原型看看效果，下拉后松手，页面回弹回初始状态。Step2.3 制作第二个限制条件：向上拖拽，图片大小不变。

9、我们先来理一下思路，如何实现第二个限制条件？可能有很多种不同方法，这里我们依然用condition/条件来实现限制条件。

选中“Dymp_总容器”，在右侧栏里选择OnDrag动作，双击新增一个Case 2，同时也自动打开了case编辑窗口。如下图23所示：

图23：

点击Add condition按钮，打开条件编辑窗口。这里应该设置什么样的限制条件呢？

首先我们先搞清楚这样一点：在向上移动时，也就是追踪器的Y轴位置参数小于0为负数的时候。

这样的话，这个条件我们就应该知道怎么设置了。第一个下拉框选择“Value”，点击第二个输入框右侧的“fx”图标，在打开的表达式编辑弹窗中，设置如下图24所示：

图24：

 上面图中红色矩形内表达式的含义是：追踪器在y轴的的位置（即[[LVAR1.y]], LVAR1是局部变量代指部件“追踪器”）

后面的条件编辑为“值小于0”，即如下图25中所示的设置。

图25：

到了这里，我们需要把OnDrag动作的第一个case 1的条件稍作改动，设置为“值大于等于0，小于330”，如下图26所示。

图26：

点击绿色“+” 图标添加条件。

10、选中“Dymp_总容器”，在右侧栏里再次选择OnDrag动作下的Case 2，同打开Case 2的编辑窗口。添加一个Move动作，在右侧选中部件“Dymp_下半部分”，设置move方式为“with drag y”，即让页面下半部分随着拖拽往上移动，这时候我们不需要改变图片大小，所以也不需要添加设置Set Size动作了。如下图27所示：

图27：

往上移动的时候虽然不需要改变图片大小，但是为了让整个页面各部分在响应交互操作运动的时候，有联动的整体感，我们最好再添加一个图片向上移动的效果，但是图片的移动速度要慢于拖拽的速度。再添加一个Move动作，在右侧选中动态面板“Dymp_上半部分_大图”下的图片部件“banner图”，如下图28所示：

图28：

其中x设为0，也就是起始值。比较复杂的在于y。

在y轴上，图片的移动既要和拖拽同步，又要在速度上慢于拖拽，所以我们需要编辑一个表达式，点击右侧“fx”图标，打开表达式编辑窗口。如下图29所示：

图29：

11、设置表达式为“[[LVAR1.y*0.5]]”，如下图30所示。

图30：

其中LVAR1和前面一样，依然是作为代指部件“追踪器”的局部变量，*0.5代表这个值是真正拖拽移动距离的二分之一。所以整个表达式的含义是banner图在y轴上的移动距离是拖拽距离的1/2，时间一样，那么也就是速度慢了一倍。

12、不过前面我们还没在Case 2中添加追踪器的跟随拖拽移动。所以在上一个Move动作上，在右侧选中“追踪器”，设置move参数为“with drag y”，如下图31所示：

图31：

13、接下来，要把播放图标也要以相同的机制跟随移动。选中第二个Move动作，在右侧选中“播放Icon”，然后设置Move参数时：

（1）x设置为播放图标的x轴起始位置即316；

（2）y轴的参数，需要点击“fx”进行编辑。编辑表达式如下图32中所示。

图32：

这里表达式的含义是：

（1）200是播放icon的y轴上的起始位置，所以他的移动要在“y轴200px”这一位置值的基础上增加或者减少；

（2）*0.5的含义和前面“banner图”部件的一样，都是起到速度减慢一倍的作用；

（3）LVAR1同样也是代指追踪器，LVAR1.y也就是追踪器的y轴位置数值；

（4）所以整个表达式的含义是“播放icon”部件在当前位置（y轴200px）基础上以拖拽的1/2速度跟随向上移动。

运行一下原型，基本上效果OK。

14、接下来，还要完善补充松手后，播放icon回归起始位置。选中OnDragDrop双击case 1打开case编辑窗口，选中Move动作，在右侧选择“播放Icon”，设置参数为x316，y200，时长400ms，animate参数为“ease out cubic”，如下图33所示：

图33：

Step2.4 向下移动，播放icon也要随着拖拽联动。

15、向下移动，播放icon也要随着拖拽联动，当然速度还是拖拽的1/2。选中OnDrag动作的Case 1双击打开，选中move动作，在右侧选中“播放Icon”，设置参数如下图34所示：

图34：

这里表达式和前面所讲述的向上移动时候的播放icon的移动表达式含义完全相同。

Step2.5 完善第二个限制条件：向上拖拽到一定距离也不能再继续上移。

16、向上移动的时候，我们也需要设置一个极限值，移动到一定距离，就不能再往上继续移动。

选中OnDrag的Case 2双击打开编辑窗口，双击之前所编辑好的condition条件（或者点击按钮“Edit Condition”），如下图35所示：

图35：

17、点击绿色“+”图标，添加一个条件。

（1）前两个的下拉框/输入框和上一个条件完全一样，即追踪器（用LVAR1局部变量代指）的y轴微指数值；如下图36A所示。

（2）第三个下拉框选择“is greater than or equals ”（即大于或等于），如下图36B所示。

（3）第5个输入框内输入数值 -360，如下图36C所示。

图36A：

图36B：

图36C：

整个条件的含义是：当大于等于-360，小于0的条件下。

Step2.6 制作“播放图标的随着拖拽一边上移，一边降低透明度”的交互效果

17、依然选中OnDrag的Case 2并双击打开编辑窗口，先添加一个Set Variable Value动作，参考前面的banner图片随拖拽缩放的制作方法，也需要先用全局变量TrackY记录下追踪器的y轴位置。如下图37所示。

图37：

18、添加一个Set Opacity动作，在右侧栏选择播放Icon，编辑透明度值的表达式为：

“[[100-Math.abs(TrackY)*0.27]]”

（附注：这里表达式的含义：

（1）因为透明度值是百分比，所以需要用Math.%的函数；

（2）因为向上移动的时候TrackY是负数值，所以需要添加一个Math.abs(x)函数，这是一个绝对值函数，括号内x替换成任何数值，最后输出的都是正数绝对值；

（3）乘以0.27是为了将TrackY的数值缩小，之所以是0.27是我试验了几次之后选择的一个系数值；

（4）Math.abs(TrackY)*0.27再被100减去后，得到的数值即播放图标随着拖动变化的透明度值）

如下图38所示：

图38:

运行一下原型，看一下效果，可以看到播放图标透明度随着向上拖动，不断降低直至最后变成0，如下图39原型预览所示：

图39：

Step2.7 制作用户头像的“随着拖拽一边上移，一边缩小+透明度降低消失”的交互效果

20、这个原理基本上和上一步中的播放图标的拖拽交互效果是基本一样的。

OnDrag的Case 2的编辑窗口中，再添加一个Set Size的动作，在右侧选中部件“人物头像”，并参考前面banner图随拖拽缩放的表达式，编辑“人物头像”部件尺寸值的表达式为：

[[180*(TrackY*0.0024+1)]]

TrackY乘以的这个“0.00X”的系数大小，决定了拖拽时候部件缩放的速度，系数越小，缩放越慢；系数越大，缩放越快。这里由0.003改成了0.0024是我尝试了几次以后所认为的一个比较合适的效果。

另外注意设置Anchor为“center”，参数如下图40所示：

图40：

21、制作人物头像的透明度变化。再选中之前添加的那个Set Opacity，在右侧选中部件“人物头像”，复制之前制作的的“播放Icon”的透明度变化表达式粘贴到这里的Opacity值输入框内，注意将0.27的系数改为0.6，且将100改成200。

之所以这么改，是因为：

（1）由100改成200，则意味着在刚开始拖动的时候，大约前半段行程，表达式得出的数值是大于100的，透明度始终保持在最大值，看起来的效果就是在开始向上拖动的时候人物头像透明度暂时不降低，直至后半段才开始降低。

（2）0.27的系数改为0.6，是因为前半段透明度不变，后半段同样的时间，更短的距离内透明度需要降低到零，也就是透明度降低的速度需要变快。

表达式编辑如下：

[[200-(Math.abs(TrackY)*0.6)]]

如下图41所示：

图41：

运行一下原型，看一下效果。

——————————————————分割线———————————————

【Step4】为“向上/下拖拽松手事件”即OnDragDrop添加条件。

22、因为在预设的交互逻辑中：

第一、向下滑动或者向上滑动不超过一定高度时候松手，则页面回弹至初始状态；

第二、若继续向上滑动松手，则页面自动弹至第二个状态也就是向上滑动时候的极限状态（参见Step2部分的制作）。

所以我们需要设定——“当追踪器的y值大于X”的时候松手，页面回弹至初始状态；当追踪器的y值小于X的时候松手，则页面自动弹至第二状态；

选中OnDragDrop的Case 1双击打开，点击Add Condition，编辑条件如下图42所示：

图42：

24、选中case 1里的Set Size动作，在右侧选中部件“人物头像”，设置参数如下图43所示，即恢复初始大小。

图43：

25、选中case 1里的Set Opacity动作，在右侧选中部件“人物头像”，设置参数如下图44所示，即恢复初始透明度100%。

图44：

-240大概是向上滑动到图片banner高度一半的时候，这时候松手，页面回弹至初始状态。。

26、选中OnDragDrop双击，新建一个case 2并打开编辑窗口。如下图45所示：

图45：

27、点击Add Condition，编辑条件如下图46所示：

图46：

28、添加一个Set Size动作，在右侧选中“人物头像”和“banner图”，设置参数如下图47所示：

图47：

这个是松手后，将banner图回复原始大小，然后人物头像缩小到很小，与极限上滑时候的变化相似。

29、再添加一个Move动作，在右侧分别选中“Dymp_下半部分”、“播放Icon”、“banner图”三个部件，然后分别设置参数如下图48所示。

图48：

这个是将追踪器恢复到初始位置，将页面下半部分弹至最高极限距离。

30、最后再添加一个Set Opacity的动作，在右侧分别选中“人物头像”和“播放Icon”，透明度参数均设置为0，这是在松手后，人物头像和播放Icon均消失。如下图49所示：

图49：