【Axure教程之高级交互原型3】实例3：实现滚动屏幕时自动切换黑白信号栏
本次教程实现的交互效果是在滚动屏幕的时候自动切换黑白信号栏的效果，这也是在app中非常常见的一个实时交互效果
地址：https://pan.baidu.com/s/1bqmWaE7】
【摘要·简介】
本次教程实现的交互效果是在滚动屏幕的时候自动切换黑白信号栏的效果，这也是在app中非常常见的一个实时交互效果。这一次涉及到的关键技术点，如下：
（1）使用动态面板和OnMove事件做触发器和持续实时触发，可用于持续监控某个控件状态；
（2）综合使用全部变量和局部变量；
（3）OnScroll事件的使用；
（4）学习使用“scrollY”函数；
我们先来看一下完成后的效果：
实现后的效果的清晰版操作录制视频，以及Axure工程源文件、导出的原型html文件都在附件中提供下载。
利用动态面板的OnMove事件来监控并自动触发某些效果，我们在前面的教程实例中已经讲过多次，相信看过的同学们应该已经很熟悉了。这次，我们来尝试用这个自动监控实现黑白信号栏的自动切换。
和以前一样，我们首先将需要的素材导入axure搭建起一个页面。
——————————————————分割线———————————————
【Step1】简单地搭建一下场景
（1）第一步是用动态面板建立一个大小为650x1156的总的容器，命名为“dymp_总容器”。参数如图1中红线圈内所示：
图1：
（2）双击进入该动态面板。为了便于观察白色信号栏图片，我们将动态面板的Back Color设置为浅灰色，如下图2所示：
图2:
（3）然后先拖入白色信号栏图片“白色信号栏.png”，放置到位置参数为（6，5），命名为“白色信号栏”，然后点击右键弹出菜单中选择“Convert to Dynamic Panel”转换为动态面板，如下图3所示：
图3:
（4）将刚刚创建的信号栏动态面板命名为“dymp_信号栏”，并双击，在打开的弹窗上点击“+”图标，创建一个新的state，如下图4所示：
图4:
并将state1 和state2分别命名为“state1-白色信号栏”和“state2-黑色信号栏”，如下图5所示：
图5:
双击“state2-黑色信号栏”进入，拖入黑色信号栏图片“黑色信号栏.png”，并命名为“黑色信号栏”，位置参数为（0，0），如下图6所示：
图6:
（5）信号栏创建完之后，我们再拖入一张用作页面背景的长图片，并将这张长图也转换成动态面板，命名为“dymp_页面”，位置参数为（0，0），如下图7所示：
图7:
注意将图层顺序要设为最底层，同样是右击弹出菜单上选择 Order - Send Backwar，如下图8所示：
图8：
（6）但是，我们这里不需要看到图片全部内容，我们只需要显示屏幕高度范围（即1156px）内的内容即可，所以我们按住动态面板“dymp_页面”的底部（鼠标放到底部中间会变成双箭头图标即箭头1所指，这样就可以拖动了）往上拖动，直至双箭头手柄旁边自动弹出的位置大小数值面板（箭头2所指）上的高度值减少到1156，如下图9所示：
图9：
（7）这样，整个页面就搭建完成了，但是还差一步：将动态面板设置为可滚动的。选择页面动态面板，在右侧参数面板选择点击Scorllbars，在下拉框中选择Vertical as Needed，可以看到动态面板右侧出现了滚动条，这样运行圆形的时候几就可以做鼠标滚动了，导出到手机／pad屏幕上，对应的是手指滑动滚动内容。
如下图10所示：
图10:
至此，准备工作结束。接下来，让我们进入交互的制作阶段吧！
——————————————————分割线———————————————
【Step2】
（1）首先我们来理一下思路：
1. 当屏幕往下滚动一定距离，背景从深色变成浅色后，信号栏切换——2. 背景从深色变成浅色，是由滚动距离决定的——3. 因此，信号栏切换的condition／条件，是滚动距离达到xx像素——4. 所以我们需要一个全局变量用来实时存储这个滚动距离值——5. 如何实现实时更新存储变量？还是使用动态面板循环持续触发OnMove事件的方法，这个方法之前已经在多个教程中出现过。关键是，滚动距离如何获取？这里我们要涉及到一个新的函数：scrollX／Y函数。
（2）选择动态面板“dymp_页面”，点击右侧的“More Events”按钮，在弹出的下拉菜单中选择OnScroll事件，如下图11所示：
图11:
（2）在弹出的case编辑窗口中，右侧栏里选择Move动作，为此case添加一个move动作，然后再在右侧选择部件“dymp_信号栏”，，设置move参数如下图12所示：
图12:
附注：以前我们使用一个空的动态面板的OnMove事件，这次就不用了，因为信号栏本身就是一个动态面板部件，而且移动距离为0即可，看起来画面并不会有任何变化。
（3）这样，我们就实现了一旦进行scroll即屏幕滚动操作，就触发一下信号栏动态面板的move动作。接下来就可以编辑信号栏动态面板的OnMove事件了——一旦信号栏动态面板被移动，就将scroll 距离赋值给全局变量。
因为仅仅触发一次不够，由于我们需要实时监控存储scroll滚动距离数值，所以我们需要让信号栏动态面板一旦被move，就要开始持续不断地被move，这个实现循环的方法我们在之前的教程中已经有涉及到过，这里再复述一遍～
我们选择信号栏动态面板，点击右侧的“More Events”按钮，在弹出的下拉菜单中选择OnMove事件，如下图13所示：
图13：
（4）在弹出的case编辑窗口中，先在左侧栏里选择“Wait”动作，设置值为100ms，然后再添加一个Move动作，在右侧栏里选择“This Widget”即移动自身——这样就是“每隔100ms，移动一次”，之所以要加上Wait 100ms，是因为如果不设置wait，就会以帧为单位以极快的速度不断move自身，消耗大量的计算量，就会变得非常卡顿。最终如下图14所示：
图14:
（5）信号栏动态面板的持续move已经完成，接下来我们来建立全局变量存储scroll值。
点击顶部菜单栏“Project”，在弹出的下拉菜单中选择“Global Variables”即全局变量，如下图15所示：
图15:
（6）在弹出的全局变量窗口中点击“+”图标，新建一个命名为“Scroll”的变量，默认值为0，如下图16所示：
图16:
（7）再选择信号栏动态面板，双击其case1打开case编辑窗口，接下来我们要为全局变量Scroll赋值。再wait下添加Set Variable Value，再在右侧选择刚刚创建的全局变量Scroll，如下图17所示：
图17:
（8）点击Value输入框右侧的“fx” ，弹出新弹窗；
然后点击下方“Local Variables”区域的蓝色下划线字体“Add Local Variables”，添加一个局部变量；
接下来点击中间下拉框选择“widget”，右侧下拉框选择“dymp_页面”即进行滚动操作的那个动态面板部件，这样一个局部变量的等式的含义是：局部变量 “LVAR1”等于即指代名为dymp_页面的部件。
如下图18所示：
图18:
（9）接下来点击上方的蓝色下划线字体“Insert Variables or Function”，在弹出的下拉框里选择widget下面的“scrollY”，即部件的竖向Y轴滚动距离值，如下图19所示：
图19:
（10）可以看到输入框内出现了“[[This.scrollY]]”的字样，含义是当前这个部件即信号栏动态面板的scrollY／竖向滚动距离值。但是我们要记录的并不是当前这个部件的滚动距离值，我们要监控记录存储的是内容页面也就是“dymp_页面”部件的滚动距离值，这个时候，我们刚才新建的局部变量值就发挥作用了。先手动选择“[[This.scrollY]]”中“This”，如下图20所示：
图20:
（11）然后再次点击蓝色下划线字体“Insert Variables or Function”，在弹出的下拉框中选择“LVAR1”，这个时候输入框内的字样就变成了“[[LVAR1.scrollY]]”，如下图21和22所示：
图21：
图22:
这样，输入框内字符内容的含义就变成了“部件dymp_页面的scrollY／竖向滚动距离值”。
OK到此为止，我们目前已经完成了如下交互机制：
一旦页面开始滚动，就触发信号栏部件move，从而记录下页面的滚动距离值；随着信号栏部件持续不断地move，页面的滚动距离值也持续不断地实时记录更新。如下图23所示：
图23：
——————————————————分割线———————————————
【Step3】
接下来，我们要开始制作黑白信号栏的切换了。
我们知道，黑白信号栏的切换，取决于背景的明暗变化。而在一张有明有暗有深有浅的背景上，黑白信号栏的切换则是取决于当前滚动到了页面背景的浅色部分，还是页面背景的深色部分——转言之，就是取决于页面的滚动距离。这就是前面我们为什么要建立一个全局变量Scroll来记录滚动距离值，因为只有用它我们才能设置在滚动中黑白信号栏切换的条件。
（1）选择信号栏部件，再次双击打开case编辑窗口。点击Add condition按钮，并在打开的条件编辑窗口第一个下拉选项下拉框中选择“value of variable”即变量值，如下图24所示：
图24：
（2）第二个下拉选项点击弹出下拉框，选择全局变量Scroll，如下图25所示：
图25:
（3）这个时候问题来了，条件到底是滚动到多少的时候，执行切换信号栏的操作？我们需要一个参考值。
取得找个参考值，有一个较准确的办法，那就是去在预览原型的时候，观察滚动面板时的scroll变量值变化。所以让我们先暂时不要设置条件，先关闭case编辑窗口。点击右上角的预览窗口，如下图26所示：
图26:
（4）打开一个浏览器，可以看到圆形预览，此时点击左侧栏上的那个有“（x）CONSOLE ”字样的区域，可以调出查看原型内包含的所有变量值的变化。如下图27所示：
图27:
（5）通过滚动观察测试，我们可以得出一个参考值：在滚动到大约scroll值约等于370左右的时候，信号栏就该切换成白色了，如下图28所示：
图28:
（6）所以回到工程文件内。再次打开条件编辑窗口，将条件编辑为：“value of variable — Scroll — is greater than or equals — value — 370”，即当全局变量值Scroll大于或等于370的时候，如下图29所示：
图29:
关闭条件窗口，再再wait动作下添加一个set state panel 动作，选择右侧的dymp_信号栏，select state项选择“state2 黑色信号栏”，并设置animate in／out为fade即淡入淡出动画模式，时长修改为200ms，所有参数设置如下图30所示：
图30:
（7）但是运行预览原型，我们发现scroll值和信号栏都没有任何变化，这是为什么呢？因为我们为信号栏面板只设置了一个带条件的case，也就是说，只有满足了上面我们设置的那个条件（即当全局变量值Scroll大于或等于370的时候），才会执行case的动作，也才会给全局变量scroll赋值，所以，我们需要再添加一个case，一个无任何条件也会给scroll赋值的case，如下图31所示，case2即只有一个动作那就是给scroll赋值。如下图31所示：
图31:
再次运行原型预览的时候，我们发现信号栏的自动切换已经初步实现了。
（8）接下来我们还要补充一下，当scroll值小于370的时候，信号栏又自动切换为白色信号栏。复制case1，执行ctrl+c然后ctrl+v黏贴。双击打开新的复制出来的这个case，重命名case3，如下图32所示：
图32:
（9）修改条件。
双击case的条件语句区域，打开条件编辑窗口。修改中间的下拉框内选项改为“is less than”，即“小于”。如下图33所示：
图33:
（10）设置修改条件完成后，关闭条件编辑窗口。然后选择第二个动作即设置动态面板的动作，下方select state修改为“state1 白色信号栏”，如下图34所示：
图34：
好的，我们再来运行一下原型预览，应当能看到，来回上下滚动屏幕时候，信号栏已经能自动切换了。
注意，370这个scroll值只是一个参考值，打开可以自己改一下这个值试试看，360，380都可以，看哪个值情况下信号栏自动切换的时机节奏最合适～
