【原创Axure教程8】用Axure做复杂动效——实例8：随着拖拽跟手伸缩滚动指示条的长度

【摘要·简介】

本次教程探索了一种常见的拖拽跟手动效：在拖拽/滚动页面的同时，侧面的指示滚动条同时跟手伸缩改变长度。

关键技术点：

1、进一步掌握set size事件的使用实践；

2、复习下局部变量的使用；

3、进一步练习实践case的条件设置

4、进一步练习复杂的表达式编写

PS1：

这次的教程最终完成的效果不是很完美，经常拖动中出现bug、跳动等，我探索了一番，最终只能实现这样的效果啦！

不过在实际工作应用中，我认为不用在交互原型中不影响主要体验模拟的细节完善上花太多时间，精益设计所谓MVP，即“最低可行性产品”，只要实现和模拟了最终体验的主要框架性的部分，就已经达到了原型的制作目的。

制作交互原型的真正目的不是为了做出一个多么精确完美的原型，原型的目的永远是为“沟通”和“验证”服务的，其主要作用是用足够低的成本，提前模拟和验证最终形态产品体验，让开发、测试、产品、设计各方都能在此基础上进行有效的沟通，从而最终趋向达成一致，在精益设计中，“在多伦迭代中快速达成一致”，以及MVP，是反复强调的重点。

PS2:

此次教程可能含较多复杂数学公式，有些枯燥，提示一下大家哦！但是放心，不会有很复杂的函数，仅仅还是四则运算的组合

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

同样所有工程文件资源包（包含完成后的效果高清视频、完成后的工程文件、初始工程文件）还是在百度网盘共享：

链接: https://pan.baidu.com/s/10MfZSM4khrB96zBOWGMAsw 提取码: 1r75

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

【Step1】搭建场景，建立最基础的第一步交互操作：拖动页面

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

可以看到所需的UI元素已经都摆放好了；

图1：

（2）接下来就是先建立一个最基础的交互：拖拽页面。

与一般的IOS页面拖动到底/到顶的回弹效果不同，这里要实现的效果是拖动到底/到顶后，除了有回弹效果，页面左侧的滚动指示条还会随着拖拽而压缩或者延伸长度。

所以，拖拽页面的范围要有一个限定，也就是OnDrag事件的限定条件。选中“dymp_主内容”，并选中OnDarg事件双击打开case编辑窗口，添加一个Move动作，在右侧选中“dymp_主内容”，设置move方式为 with drag y，如下图2所示：

图2:

然后我们再来给这个OnDarg事件编辑条件。点击Add Condition，在弹出的条件编辑窗口，第一个下拉菜单选择“value”，然后点击第二个输入框右侧的“fx”，弹出编辑值的窗口，如下图3所示：

图3：

点击下方的蓝色链接Add local variable，添加一个局部变量，设置参数如下图4所示：

图4:

如此设置的含义是局部变量LVAR1 = widget，指定为“dymp_主内容”，然后点击上面的输入框上的蓝色链接insert variable or function，添加表达式，在出现的下拉菜单里选择“widget”下属的“y”，即widget的y值，如下图5所示：

图5:

表达式中的文字框选“This”，然后再点击蓝色链接insert variable or function，在下拉菜单里选择刚刚添加的局部变量“LVAR1”，这样整个表达式的含义就变成了“widget部件 - dymp_主内容的y值”，如下图6ABC所示：

图6A：

图6B：

图6C：

我们需要将dymp_主内容的滚动范围限定在它自己的页面长度内，所以可以自己试着在工程文件里手动拖动一下看滚动到最顶部和最底部时候dymp_主内容的y值分别是多少，然后在此y值基础上再加一定数值，即最多可以拖拽到超过顶部/底部多少y值。

可以设置条件图下图7所示：

图7:

即当dymp_主聂内容小于等于（less than or equals）600，且大于等于（greater than or equals）-1300的时候。 

（3）接下来制作回弹动画效果。

双击OnDragDrop事件进入case编辑窗口，添加条件，当dymp_主内容的y值（这里同样需要设置局部变量，方法同上）小于-1300时候，如下图8所示：

图8:

然后再添加一个move动作，在右侧选中dymp_主内容，设置参数为to“201，-1204”，即自动回到底部位置，如下图9所示：

图9:

然后再次选中OnDragDrop再添加一个case，设置当拖到顶部时候自动弹回的机制，双击弹出新的case编辑窗口，编辑条件如下图10所示：

图10:

条件含义当dymp_主内容的y值大于526的时候。

然后同样设置move参数如下图11所示，自动回弹到顶部

图11:

（4）优化回弹效果。

试运行一下效果，我们发现似乎回弹高度还不够，在交互体验上拖拽的感觉不是很“爽”，而且还有可能出现拖拽速度过快导致一下子脱离可正常数值范围而不自动回弹的情况。我们调整参数如下图12红色矩形内所示：

图12:

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

【Step2】制作左侧栏里的指示条跟着拖拽伸缩的动画

（1）选中部件“dymp_主内容”，然后我们来添加一个set size动作，在右侧选中部件“随拖拽可伸缩条”，并设置animate为ease out cubic，如下图13所示

图13:

（2）接下来需要编辑部件“随拖拽可伸缩条”的height值随着拖拽而伸缩。点击height输入框右侧的fx，弹出表达式编辑窗口，编辑表达式如下图14所示：

图14:

[[180*(526/LVAR1.y)]]——这个表达式的含义是：“初始值526” 除以 “拖拽dymp_主内容的高度值y”，因为其高度值y在顶部往下拖拽时肯定大于526，所以括号内的(526/LVAR1.y)必然小于1；而180是部件“随拖拽可伸缩条”的height值的初始值，所以180乘以一个小于1的值，那结果必然是随着往下拖拽，括号内的值越来越小，整个表达式的最终值也会越来越小。编辑完表达式后，我们再试运行一下效果，会发现虽然基础交互动效已经实现了，但是指示条的压缩幅度太小，我们需要回来重新编辑一下这个表达式。

（3）重新打开表达式编辑窗口，编辑表达式为[[180*(526/(LVAR1.y*3))]]，如下图15所示：

图15:

再运行一下看看效果，基本差不多了～

（4）但是当我们往上拖拽即看下面的内容时，发现有个问题：往上拖动，dymp_主内容的高度值y（即LVAR1.y）会变得很小甚至为负数，所以“随拖拽可伸缩条”的height值就出现了异常。我们需要为OnDarg事件添加多个case并修改一下条件。

选中dymp_主内容的OnDrag事件的case1，双击打开并编辑条件如下图16所示：

图16:

这样条件就变成了“只有在dymp_主内容部件位置顶部的时候”往下拖动，“随拖拽可伸缩条”的height值会按照“[[180*(526/(LVAR1.y*3))]]”表达式来变化长度。

（5）然后我们复制一个case1，并双击打开这个新复制的case的编辑窗口修改命名为“Case 2”，编辑条件如下图17所示：

图17：

即条件为“当dymp_主内容部件在中间范围滚动的时候（既没有到顶部也没有拖到底部）”。

当我们往下滚动的时候，指示条的动效有：（1）要跟着我们的拖快往下移动；（2）同时长度会有一定的变化。从简单的入手做，指示条在滚动过程中长度暂不变化。

（6）选中case2，添加一个set size动作，在右侧选中“随拖拽可伸缩条”，设置size参数如下图18所示：

图18：

（7）再添加一个move动作，这是用来设置“随拖拽可伸缩条”部件跟着拖拽移动的动画。最终效果我们需要的是指示条与拖拽方向相当，即页面往上滚动，指示条则往下移动，点击height输入框右侧的“fx”弹出表达式编辑窗口，如下图19所示：

图19：

（8）在表达式编辑窗口中，还是要添加一个局部变量，用来指代部件“dymp_主内容”。然后在上方的表达式编辑输入框内编辑表达式如下图20所示：

图20:

我们来简单解释一下这个表达式“[[575+((526-LVAR2.y)*0.63)]]”

其中“575”是指示条的初始位置的y值；“526”则是dymp_主内容的初始位置的y值；因为指示条和“dymp_主内容”的移动是反方向，这个表达式的基本逻辑是：

（1）在指示条的初始y值（575）基础上，加上“dymp_主内容”移动的距离值，就是在拖动过程中指示条的实时位置；

（2）而这个“dymp_主内容”移动的距离值，就等于是“dymp_主内容”的初始y值（526），再减去当前拖动后的y值（LVAR2.y），也就是括号内的(526-LVAR2.y)；

（3）但是“dymp_主内容”的高度和左侧边栏的高度是不一样的，所以还需要乘以一个系数。这里我试了几个系数，最终乘以0.63，可以使得“dymp_主内容”滚动到底的时候，刚刚好指示条到达底部一个合适的位置。

以上就是整个表达式的含义。

我们来试运行一下看看效果。

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

【Step3】制作拖动到底部指示条回弹压缩的动画

（1）好了，我们现在还剩最后一步动画效果需要制作，那就是跟在顶部继续拖动指示条压缩一样吗，拖动到底部继续拖动同样需要跟手压缩指示条。

选中“dymp_主内容”的OnDarg事件的case1，进行复制，命名为case 3，然后将条件更改为：大于-1204，小于1400.也就是底部可继续拖动的范围，如下图21所示：

图21:

（2）然后，编辑修改move动作，我们首先需要把anchor即缩放的轴心从top 修改为buttom，即从底部开始往上伸缩，如下图22所示：

图22:

（3）接下来要修改一下height的变化表达式，526是在顶部时候“dymp_主内容”的高度位置y值，而在拖动到底部的时候，y值则是-1204，而且，在底部的时候，越继续往上拖，y值负号后的数字越小，所以除法的分母和分子需要换一下，最终修改为“[[180*(LVAR1.y/(-1204*3))]]”如下图23所示：

图23

（4）最后还需要修改之前设定的OnDragDrop事件，也就是松手后的回弹动画，拖动到底部之后松手，也需要再添加一个set size动作，将指示条回复到初始大小。

选中“dymp_主内容”的OnDargDrop事件的case1，set size动作设置参数如下图24所示：

图24:

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

【Step4】完善上下滚动中的交互动效细节

（1）我们运行一下效果，会发现当往下拖动的时候，经常滚动条被拖到页面底部更下面的地方乃至看不见了，我自己研究了一下，可能是OnDrag的两个case的条件设置过于精确，对错误的容忍阈值太低，实际拖动的时候，拖动的实际数值往往是动态的，并不能刚好精确到两个case的条件数值内。所以我个人的一个解决办法是将ondrag事件的第二个case，即中间范围拖动的case，一分为二（分别命名为case2 和case3），分别设置两个条件，case2的条件数值是滚动范围的中间值，滚动的y值在中下方，并未到达底部；而case3的条件数值则是从中下方到底部。

（2）还是选中部件“dymp_主内容”的ondrag事件的case2，修改case2的条件参数如下图25所示：

图25:

也就是将great than的数值改为-1110（我自己调试的参考值，仅供参考，大家可以自己试试）

（2）然后，选中case2复制一个命名为case3，修改条件参数如下图26所示：

图26:

也就是从页面中下部分开始到底部的区域内。此时尚未移动到“y -1204”的真正的底部，但是要留出100多像素的缓冲区

（3）然后我们还需要修改一下case的action动作。要起到缓冲区”的作用，往下拖动页面动作较快时还没到“y -1204”的真正底部，到达“y -1110”的位置时，滑动指示条就不要再跟着一动了，所以我们要把move动作给去掉，同时，还要修改一下set size 的表达式。如下图27所示：

图27：

这里到底部往上继续拖动，指示条则基于底部反向压缩高度的表达式——“[[180*(LVAR1.y/(-1204*3))]]”，实际上和前面顶部继续往下拖动压缩高度的表达式是类似的，只是方向相反，所以分母和分子要换一下。

至此整个交互效果基本就完成啦，试运行一下，基本实现了想要达到的交互动态效果，但还是有点卡顿和偶尔会有bug。

大家可以帮忙一下看看有没有什么更好的解决方案，互相学习哈～～