【原创Axure教程9】用Axure做复杂动效——实例9：拖动改变图片Blur值及拉长数据条形图

Kebot

上海/产品设计师/6年前/1505浏览

版权

Kebot

本次教程探索了一种常见的拖拽跟手动效：在拖拽/滚动页面的同时，改变图片模糊值，以及跟随页面转场拉出数据可视化条形图

【摘要·简介】

本次教程探索了一种常见的拖拽跟手动效：在拖拽/滚动页面的同时，改变图片模糊值，以及跟随页面转场拉出数据可视化条形图

关键技术点：

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

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

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

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

5、复习OnMove事件以及使用空白动态面板当作数据持续跟踪器以及触发器；

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

高清版预览视频、完成后的工程文件和初始工程文件可以在附件或者网盘分享文件里看视频～

网盘链接：

https://pan.baidu.com/s/1S22NUBunzOz9gmVlYjbDoQ 提取码: zvvt

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

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

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

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

图1：

我们来分解分析一下完成后效果预览中的动效：

Part1: 往下拖动，上半区域背景图片变大 + 页面主体内容往下滑动；主体内容包含背景图片上的文字、中间的卡片、下半区域的文字内容；

Part2：往上拖动页面，主体内容往上移动 + 背景图片变模糊 + 同时倾斜的白色底板角度逐渐跟手缩小倾斜角度直至水平；

Part3: 往上拖动的时，白色底板高度同时减小，显示出原先被白色底板遮盖的数据可视化条形图；

Part4：往上拖动超过某个阈值之后，页面切换到另一个场景；下方完整显示数据可视化条形图；

OK，让我们开始逐步着手建立这一套交互动效吧！

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

我们先来制作往下拖动页面的交互，这一部分相对比较简单，之前的很多教程都有涉及到拖动页面以及松手回弹的交互动效制作，所以这里不再赘述，我在这里只简单陈述一下Ondrag事件的case编辑。

选中空白动态面板“拖动热区”（这里注意一下因为，一个拖动动作要带动多个不同部件移动，所以我们另外单独建立一个空白动态面板来同时管理多个部件的移动。）并双击OnDrag事件，弹出case编辑窗口，添加一个move动作，并选中部件“SC1 上部文字”、“SC1 下部文字”、“SC1 中间卡片”、“dymp_下半部分BG”4个部件，编辑Move的方式为with drag y，编辑参数如下图2中红色矩形内所示：

图2:

（2）然后，我们需要定义拖动松手回弹的交互动效，仍然选中空白动态面板“拖动热区”，并双击OnDragDrop事件进行case编辑。仍然是选中“SC1 上部文字”、“SC1 下部文字”、“SC1 中间卡片”、“dymp_下半部分BG”4个部件，编辑Move的参数分别如下图3中红色矩形内所示，即移动回到原位。

图3:

同时，松手回弹需要有一定的大致条件范围，即往下拖动以及往上拖动都不超过某个数值，这里我大致定了一下供参考，各位同学也可以自己尝试一下不同的数值范围有什么不一样的效果。

这里我们以部件“dymp_下半部分BG”的在拖动中的y值变化为条件，也就是在拖动中，如果松手时“dymp_下半部分BG”的在拖动中的y值变化在某个范围内，那么松手页面恢复初始状态。

1）. 条件的第一个下拉窗口选择value，并点击第二输入框右侧的fx，编辑表达式如下图4所示：

图4:

该表达式中，用局部变量LVAR1指代部件“dymp_下半部分BG”，所以LVAR1.y指的就是部件“dymp_下半部分BG”的y值。以同样的方法和表达式编辑第二个条件。

2）. 设置条件如下图5所示，即“dymp_下半部分BG”的y值在“大于等于150，小于等于750”的范围内，如果松手时“dymp_下半部分BG”的y值在此范围内，页面样式恢复原样。

图5:

（3）第三步，继续丰富完善拖动页面的交互动效。在往下拖动的时候，除了页面内容跟手移动，页面背景图片回同步放大。

仍然选中空白动态面板“拖动热区”，并双击OnDrag事件，弹出case编辑窗口，添加一个set size事件，在右侧选中群组“Group image”下的图片部件“Image1”，如下图6所示：

图6:

我们需要实现的，是一个图片大小跟随往下拖动而变大（变小）的动效，所以我们只需要建立一个数学公式，将纵向上的拖动距离值（即drag y）作为变量，来影响图片尺寸的X值/Y值变化。最简单的公示当然是当前的X值/Y值加减或者乘除dragy值，但是这样就会发现拖动时，图片变得特别大或者特别小，所以，我们还需要将拖动距离值（即drag y）再乘以一个系数，使得拖动距离值（即drag y）对尺寸的影响幅度减小。这里我实验了几次，之后，建立的是如下图7所示的公式：“[[1271*(1+TotalDragY*0.001)]]”，其中TotalDragY是指每次拖动的总距离值，该公式含义是：先将拖动距离值乘以0.001，即缩小拖动距离值对尺寸的影响幅度，这个值在加上1，这样整个括号内的公式的输出结果永远是1.xxxx；

然后若将此输出结果作为变化系数再与原尺寸值相乘，那么整个公式输出的含义就是“随着拖动距离值变大，尺寸以1.xxxx的倍数同步变大”。

图7:

其中1271和730分别是图片原大小的长度值和宽度值。

长度和宽度都乘以相同的系数，这样图片的比例就不会发生变化。

（4）第4步，继续丰富完善拖动页面的交互动效，这一步我们来制作往上拖动的时候的页面跟手变化。

往上拖动时，页面的变化要丰富得多，而且往上拖动会有1个阈值，超过或不超过产生不同的转场效果：

1）.未超过这个阈值时，往上拖动，页面跟随往上移动且透明度降低，同时背景图片逐渐变模糊；松手则回弹恢复原状态；

2）.超过这个阈值，即使不松手，页面也会转场到另一个场景，下方显示四个数据可视化柱状图；

我们先来制作超过阈值时的交互动效，即拖动超过一定距离直接转场为另一个场景；

（5）之前我们所制作的页面拖动的Ondrag事件case，是针对往下拖动的，此时我们还需要再添加另一个往上拖动的case，所以此时我们需要为这两个case添加不同的条件。

选中部件“拖动热区”并双击Ondrag事件的case1，打开case编辑窗口，重命名该case为“Case Drag Down”，并点击打开条件编辑窗口，编辑条件如下图8所示：

图8:

totaldragY指的是一次拖动的总距离值，如果往下拖动，则此值小于0为负数，所以这就可以作为我们判断拖动行为是往上还是往下的变量条件：小于0是往下拖动，大于0 是往上拖动。

所以此case是针对totaldragY小于0时。

然后我们再添加第二个totaldragY小于0即往上拖动时候的条件，双击部件“拖动热区”的OnDrag事件，弹出一个新的case编辑窗口，重命名此case为“Case Drag Up”，并同样设置条件，这里需要注意最好将条件设置为“小于或者等于”，以避免产生错误。如下图9所示：

图9：

（6）然后同样添加move动作设置页面内容跟手移动，这里与之前设置的往下拖动的动作一样，都是将move方式设为with drag y，如下图10所示：

图10：

（7）接下来，我们来通过set opacity动作设置页面内容跟手减少透明度的动效。添加一个set opacity的动作，并选中“SC1 上部文字”、“SC1 中间卡片”、“SC1 下部文字”三个部件，前我们已经论述了如何通过将totaldragy作为变量系数来实现某个参数值跟随移动距离变化的表达式，这里原理相似，只是表达式的数学公式不同，我在合力用的是“[[100-TotalDragY*-0.36]]”，其含义如下：

· 已知透明度的最大值为100；

· 将totaldragy乘以一个小于0的倍数，然后再与100相减，得出一个小于100的数值；

· 随着拖动距离变大，也就是totaldragY数值越来越小（因为是往上拖动，totaldragy是负数，所以拖动距离越长，数值越小）；

· 然后越来越小的totaldragY乘以-0.xx的倍数，负负得正得出一个越来越大的正数，与100相减得出的数值也就越来越小。

这里之所以是-0.36，是我实验了几次之后选定的倍数，这里要注意的是随着拖动距离变长，透明度不要变化过快或者过慢。

此时参数设置与表达式编辑如下图11所示：

图11:

“SC1 上部文字”、“SC1 中间卡片”、“SC1 下部文字”三个部件的透明度变化公式是一样的。

（8）往下拖动动效的第三部分，是白色背景底板的倾斜角度逐渐变小直至彻底变水平。仍然在当前的case drag up里进行编辑。添加一个rotate动作，并在右侧选中“下半部分BG1 倾斜”部件，设置旋转方向为顺时针Clockwise，旋转轴心Anchor设为cetner中心，最后将旋转角度进行表达式编辑，这里原理仍然和之前的透明度跟随拖动变化表达式相似，这里我编辑的是“[[348+TotalDragY*-0.03]]”，仅供参考。

最终所有参数设置如下图12所示：

图12:

（9）往下拖动动效的第4部分，是背景底板随着往上拖动还会逐渐高度尺寸变小，直至逐渐过渡变形为下一场景顶部bar背景的高度，如下图13所示：

图13：

仍然在当前的case drag up里进行编辑。添加一个set size的动作，并在右侧选中“下半部分BG1 倾斜”部件和“下半部分BG2 ”部件，关于设置size尺寸跟随拖动距离变化的表达式前面我们已经论述过了，这里基本相似，就是变化系数有所不同。分别设置“下半部分BG1 倾斜”部件和“下半部分BG2 ”部件的高度height值表达式如下图14A和图14B所示（Anchor尺寸变化轴心均为top）：

图14A “下半部分BG1 倾斜”部件的高度height值表达式：

图14B “下半部分BG2”部件的高度height值表达式：

（10）好了，我们来制作往下拖动动效的第5部分——背景图片变模糊。这里我们是通过一张已经经过模糊处理的图片，不透明度逐渐提升覆盖原来图片的方式来模拟实现这个图片变模糊的动效，实际的效果也还可以，还挺像是真正模糊值提升的效果；

仍然在当前的case drag up里进行编辑。选中之前已经添加了的Set Opacity动作，并在右侧选中部件“Group Image”下的“Image2 Blur”，然后点击输入框右侧的“fx”按钮进行表达式编辑，表达式编辑为“[[TotalDragY*-0.3]]”，如下图15所示：

图15:

（11）我们此时运行一下原型，会发现，虽然倾斜背景白色底板确实倾斜角度会随着拖动而减小，但是其位移却不能满足我们预期的效果。因此在向上拖动的时候，除了要改变角度，我们还需要对其添加一个move动作，使其再往上移动一段距离。

添加一个move动作，在右侧选中部件“下半部分BG2”，设置y的值为表达式为“[[432+TotalDragY*0.58025]]”（之后的表达式公式含义就不再赘述啦，基本上原理都和前面已经详述的相似，其中各向数值都是我实验几次之后确定的，大家也都可以自己尝试不同的数值）

图16：

好了，我们做到这里，可以再运行一下原型看一下效果。

接下来，我们要制作向上滑动后转场到第二个场景的动效。分解一下第二个场景出现的动效：

1）. 第二场景有两部分内容组成，一个是上方白色矩形区域内的文字和按钮一边向上移动，一边显示；另一个是下方的数据可视化柱状图，位置保持不动；

2）. 柱状图内的色彩矩形柱会随着拖动向上延展伸长；

（12）现在开始制作第二个场景的动效。

第一步，仍然在当前的case drag up里进行编辑。

选中刚刚添加的第二个Move动作，在右侧再选中部件“SC2 上部文字”，编辑y值的表达式为“[[280-TotalDragY*-0.24]]”，如下图17所示：

图17:

（13）第二步，显示下方的数据可视化柱状图组。添加一个Show/hide动作，在右侧选中四个部件“dymp_SC2可视化条形图01-Z4”、“dymp_SC2可视化条形图02-M2”、“dymp_SC2可视化条形图03-718”、“dymp_SC2可视化条形图04-TTS”，均设置为Show，如下图18所示：

图18:

（14）第3步，随着向上拖动，柱状图内的色彩色彩矩形柱随着拖动向上延展伸长。我们还是试用Set Size动作来实现这个动效。添加一个Set Size动作，并在右侧选中部件“色彩柱01”、“色彩柱02”、“色彩柱03”、“色彩柱04”，将Anchor均设为Bottom，即从底部开始，以底为基准变化尺寸；然后，再分别将这几个色彩柱部件的height值变化表达式设为：

“色彩柱01”——“[[TotalDragY*-1.1395]]”

“色彩柱02”——“[[TotalDragY*-1.0505]]”

“色彩柱03”——“[[TotalDragY*-1.575]]”

“色彩柱04”——“[[TotalDragY*-1.4175]]”

如下图19所示：

图19:

（15）第4步，柱状图组配合的几个文字内容也需要同步显示。我们再添加一个Set Opacity动作，在右侧选中部件“SC2 可视化数据背景”、“SC2可视化条形图秒数文字”，并将透明度值的表达式均设置为“[[TotalDragY*-0.25]]”，如下图20所示：

图20:

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

【Step2】再次复习一下OnMove事件和空白动态面板循环跟踪触发器的使用

目前为止，第二个场景还剩最后一个元素暂时没有显示出来。就是上方区域的文字和按钮，即下图中红色矩形内所示的部分。如下图21:

图21:

这是因为，我们希望的效果是在刚开始向上拖动时，暂时先不显示这块内容；等到拖动超过一定距离后，再显示这部分内容。所以我们又要用到之前的很多教程里经常用到的空白面板循环跟踪OnMove事件触发器。这里简单再复述一下，熟悉的同学可以跳过哈。

（1）新建一个任意形状的空白动态面板，放在任意地方均可。重命名为“OnMove触发器”。然后在More Event下拉框里选择点击OnMove事件，添加一个OnMove事件，如下图22所示：

图22：

（2）在弹出的case1编辑窗口里，依次添加set variable value动作、wait动作和Move动作，设置参数如下图23所示：

图23:

这一套动作的含义，当OnMove触发器被Move的时候，触发变量“”的动作，等待90毫秒，再移动一下自身，这样就形成了“Move - 等90ms - 再次Move”的循环，持续不断的将OnMove事件执行下去，在这个过程当中，我们就可以监控向上拖动的距离值的变化，如果超过或者小于某个值符合某个条件，则OnMove事件执行case1，除了move自身，还要显示我们要显示的内容；如果未超过或者小于这个值，则OnMove执行另一个case2，也就是仅仅持续move自身不断继续触发OnMove事件直至符合某个条件；

其中之所以添加一个set variable value动作设置表达式为“”，是为了看看持续触发OnMove事件是否生效了。如果生效了，则可以看到这个数字会不断变大。

（3）所以接下来要为这个case1添加条件。点击Add condition弹出条件编辑窗口。编辑i条件如下图24所示：

图24：

其含义是：当拖动的时候部件“dymp_下半部分BG”的移动值小于138（也就是向上拖动到部件“dymp_下半部分BG”到其高度y值距离页面顶部不足138像素）的时候。

（4）然后我们再在set variable value动作下面添加一个Set Opacity动作，设置其表达式为“[[(LVAR1.y-138)*-0.55]]”，如下图25所示：

图25:

所以整个case的含义是当向上拖动到部件“dymp_下半部分BG”到其高度y值距离页面顶部不足138像素，开始提高之前暂未显示的第二个场景的上方文字按钮内容的opacity值，也就是逐渐显示出来。

（5）我们再添加一个新的case2，编辑条件如下图26所示：

图26:

除了不需要添加set opacity的动作，其他均和case1一样，如下图27所示：

图27:

（6）不过，到这里，我们忘了一个重要的事情：我们必须在拖动开始时，给OnMove触发器施加一个最初始的move动作！现在补一下，选中部件“拖动热区”，选中OnDragStart事件并单击，在弹出的case1编辑窗口里，添加一个move动作，然后选中右侧的部件“OnMove”触发器，设置move方式如下图28所示：

图28:

OK，到此为止，我们来运行一下整个原型，可以看到往上拖动的时候，已经可以看到第二个场景的完整转场动效了。

但是我们还是发现个问题：我们可以持续一直往上拖动。这回让页面转场到第二个场景的时候出现错误。所以我们还需要给部件“拖动热区”的Ondrag事件的case drag up设置更多的条件，将其可拖动范围限定在一定区域内。

选中部件部件“拖动热区”的Ondrag事件并双击的case drag up，点击edit condition弹出条件编辑窗口，编辑条件如下图29和图30所示，其含义为：当拖动到部件“dymp_下半部分BG”到其高度y值距离页面顶部超过-58像素时。

图29:

（7）我们还需要编辑向下拖动页面的条件。双击case drag down，并点击edit condition，编辑i条件如下图30所示，其含义为：当拖动到部件“dymp_下半部分BG”到其高度y值距离页面顶部不超过540像素时。

图30:

所以两个case综合起来，部件“dymp_下半部分BG”只能在一个大于-58且小于540像素的范围内拖动。

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

【Step3】完善松手回弹的动效

还记得我们之前设置的松手回弹动效的case吗？当时只设置了“SC1 上部文字”、“SC1 下部文字”、“SC1 中间卡片”、“dymp_下半部分BG”4个部件的移动回原位的动效。但是后来我们又为诸多第一个场景的部件拖动添加了透明度、旋转、图片尺寸、显示/隐藏等更多动作，所以我们需要为松手回弹补充完善更多部件恢复原样的动效。