摘要·简介】

本次教程实现的交互效果是根据根据输入框字符串长度判断和自动更新按钮状态，比如当输入手机号，输入字符长度达到手机号位数（11位）时，自动将“获取验证码”按钮的状态由disable/不可用更新为normal/可用状态。这一次涉及到的关键技术点较多，如下：

（1）使用动态面板和OnMove事件做触发器和持续实时触发，可用于持续监控某个控件状态；

（2）使用局部变量；

（3）学习条件语句中的“length of variable value”（即变量的长度）的使用；

（4）学习使用actions动作 “Enable/Disable”的使用；

（5）部件的Diable状态编辑与使用；

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

实现后的效果的清晰版操作录制视频，以及Axure工程源文件、导出的原型html文件都在附件中提供下载。

注：此次教程中绘制的样式均可以用Axure自带的部件来完成，所以无需额外图片素材。

这里我简单画了一个手机号与验证码登录窗口如下图1所示：

图1：

手机号对应输入框部件命名为：“手机号输入框”；

验证码对应输入框部件命名为：“验证码输入框”；

获取验证码按钮即命名为“获取验证码按钮”；

登录按钮即命名为“登录按钮”；

注意，输入框是使用的Axure的Text Field部件，如下图2所示：

图2：

Axure的不同部件带有不同的各自特有的Event事件。比如Text Field部件特有的Event事件如OnTextChange事件，直译过来即“当字符内容改变时”事件。

另外说明一下，实现同一种效果，Axure可能有很多种方法，这里我只是分享我所尝试的方法，而且还是相对比较复杂的，可能有别的同学有简单方便的方法能实现此教程中的效果，也欢迎大家一起交流分享哈~

接下来是正文开始~~

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

【Step1】分解

首先，我们先来一步步分解一下，如何能实现通过输入框内字符的变化自动判断和更新按钮的状态？

（1）第一步，我们首先需要实时监控输入框内的字符长度变化；

（2）第二步，实现实时监控后，其次我们还需要让输入框内的字符变化可以自动触发某个事件；

（3）第三部，再用这个触发事件来引起某个动作，可以改变按钮的状态；

在制作过程中会发现，这三步看似逻辑简单，实际上要考虑很多部件的内在联动逻辑细节。

我们先来实现第一步。

——————————————————————————————————————

【Step2】用局部变量和全局变量来监控输入框内的输入内容

·1 首先新建几个后面要用到的全局变量，分别命名为“PhoneTextlength”用以监控手机号输入字符串长度，“CodeTextlength”用以监控验证码输入字符串长度；如下图3所示：

图3：

·2 选中“手机号输入框”部件，在右侧选择并双击OnTextChange事件，在弹出的Case编辑窗口中，重命名此Case为“Case 1_输入手机号”，并在左侧actions栏选择“Set Value”动作，如下图4所示：

图4：

·3 在右侧选中刚创建的全局变量“PhoneTextlength”，这个变量是用来记录在手机号输入框中输入的内容的。选中后，点击下方的“fx”按钮，如下图5所示：

图5：

·4 在下方点击“Add Local Variable”，添加一个局部变量“LVAR1”，用来记录输入框内的字符串并给全局变量“PhoneTextlength”赋值。添加局部变量后，在中间的下拉框选择“text on widget”，右侧的下拉框选择“This”，即记录当前所选择的这个部件的文字内容。如下图6所示：

图6：

·5 点击上方的“Insert Variable of Function… ”，在弹出的下拉菜单中选择刚创建的局部变量“LVAR1”，即为全局变量“PhoneTextlength”赋值为“LVAR1”——也就是部件“手机号输入框”中的文字内容。如下图7所示：

图7：

至此，我们已经完成了将“手机号输入框”内的内容赋值给全局变量，也就是用全局变量来监控手机号输入框内容的技术要求。

然后同样为验证码输入框的OnTextChange添加一个case，命名为Case 2_输入验证码，用来监控在此输入的内容，并用同样的方法赋值给全局变量“CodeTextlength”，此处不做重复。如下图8所示：

图8：

———————————————————————————————————————

【Step3】

至此，我们实现了用全局变量对输入框内容的监控。那么如何将监控输入内容变化的结果，触发其他部件的变化呢？这里需要注意的是，并不是输入框内容产生变化，就要触发按钮部件的状态更新，我们真正要实现的是：当输入框内容的字符串长度达到某个具体位数时，才使得按钮部件状态更新。

所以我们除了需要持续监控输入框内容的字符串长度变化，还需要有一个能够持续不断地触发某个事件case的部件。输入框部件的OnTextChange事件只能一次触发

那么，各位看过前面一个音乐播放器教程的同学有没有想起什么？没错，还是使用空动态面板的“持续触发OnMove事件”方法，来实现这种持续触发的技术要求。

用动态面板的OnMove事件作为触发事件的方法，在之前的动画系列教程中，我们已经有讲过。

但是！！我们有一个更为简单的方法。

先简单举例来说，比如输入12345，输入过程中，实际上是相当于触发了5次OnTextChange事件，那么为case添加一个condition/条件，当字符串长度达到5位数的时候（也就是输入了12345的时候），则触发按钮状态更新。但你要注意，在输入第五个数字“5”的时候，并不会触发状态更新，因为此次OnTextChange事件发生的时候，并没有达到“字符串长度达到5位数的”的条件，长度只有4。所以，实际上，要在下一次触发OnTextChange事件，按钮状态才会更新。那么下一次输入支付“6”的时候触发的OnTextChange事件，才达到了“字符串长度达到5位数的”的条件，然后联动引起按钮状态的更新。

这里逻辑描述可能有点复杂，比这已经尽力设法描述清楚了哈~请同学们见谅~

所以，我们按照上面所说的那个方法来尝试一下吧！！

·1 选择“手机号输入框”部件，双击“OnTextChange”事件，添加一个新的case命名为“Case 3_触发获取验证码按钮更新”。如下图9所示：

图9：

·2 点击“Add Condition”，打开添加条件的弹窗，在第一个下拉窗口中选择“length of variable value”，如下图10所示：

图10：

·3 第二个下拉窗口选择全局变量“PhoneTextlength”，并在最后一个输入框内输入值“10”，如下图11所示：

图11：

即条件为“当全局变量PhoneTextlength的值位数长度等于10的时候”。

·4 此时再为此case添加一个“Enable/Disable”的actions动作，并在右侧栏里选择“获取验证码按钮”，下方选择“Enable”。如下图12所示：

图12：

此时，这个case的含义是：如果当前已输入的字符串位数长度等于10，输入新的文字，则触发“Enable 获取验证码按钮”的动作。

然后，我们还需要调整一下输入框的这两个case的上下顺序，需要将第二个case即“Case 3_触发获取验证码按钮更新”移到上面。如下图13所示：

图13：

—————————————————————————————————————

【Step4】制作按钮的disable和enable状态

·1 此时我们还缺一个关键步骤——制作按钮的disable和enable状态。

选择“获取验证码”按钮，点击“interaction styles”下的“Disable”，在弹出的窗口中，勾选Opacity并设置是参数为30%，即按钮出于disable状态时，按钮透明度为30%。最后再勾选“interaction styles”区域下方的“Disable”，即设置初始状态为disable。如下图14所示：

图14：

·2 同样的方法，设置登录按钮的disable状态为：fill color即填充值为#AAAAAA，去掉阴影，参数如下图15A和15B所示：

图15A：

图15B：

OK，我们来预览一下效果，已经实现了当输入手机号第11位的时候，更新“获取验证码按钮”状态的效果。

但是，这个相对简单的方法还是有一个小小的bug：OnTextChange事件，改变输入框内容时，并没有说是增加一位数还是减少一位数，也就是说，我们在输入10位数后，如果删除一位数，同样也是一次OnTextChange事件，同样也会更新状态启用获取验证码按钮！这显然不符合真实的情况。

所以，我在接下来还是把那个相对更复杂但是也更接近真实情况的第二个方法，也就是使用动态面板作触发器的方法，也讲解一下哈~如果还有兴趣看的同学就继续往下看~~

附注：验证码与登录按钮的启用的制作方法与此相同，所以不再赘述，大家可以回去自行练习实践。

方法2：使用动态面板作为触发器

【方法2·Step1】

·1 新建一个Pages命名为“方法2”，并把之前的所有组成页面的元素部件复制过来，如下图16所示：

图16：

·2 选择手机号输入框部件，把Case 3_触发获取验证码按钮更新删除，因为我们在这个方法2中已经不需要它了。

接下来用动态面板创建一个触发器，命名为“启用按钮触发器”，如下图17所示：

图17：

·3 再次选中手机号输入框部件，双击Case 1_输入手机号，在弹出的case编辑窗口中，在左侧栏选择Move动作，右侧勾选刚创建的“启用按钮触发器”，如下图18所示：

图18：

这样，只要输入框开始输入文字，就可以触发一次“启用按钮触发器”动态面板的move动作，然后我们可以再利用动态面板的OnMove事件来触发新的其他动作。

·3 选中“启用按钮触发器”动态面板，在More Event下拉框中选择OnMove事件，如下图19所示：

图19：

这一步，我们先设置当手机号输入框字符串长度达到11位时，触发启用“获取验证码”按钮。

·4 在选择OnMOve事件后打开的case编辑窗口中，点击Add Condition，在弹出的条件编辑窗口中，第一个下拉框选择“length of variable value”，即变量值的长度。如下图20所示：

图20：

·5 第二个下拉选项框中选择变量“PhoneTextlength”，如下图21所示：

图21：

·6 第3个下拉选项框中选择equals，然后设置最后一个输入框中的值为11，如下图22所示：

图22：

整个条件的含义为：“当全局变量PhoneTextlength的值的位数长度等于11”。

·7 编辑完条件后，在左侧栏actions栏里选择Enable/disable，在右侧栏里选择“获取验证码按钮”，如下图23所示：

图23：

OK，触发器的第一个case完成了，即当触发器动态面板发生移动的时候，如果此时变量值PhoneTextlength的值的位数长度等于11，则启用“获取验证码按钮”。

【方法2·Step2】

但是，现在仍然有一个问题：OnMove事件目前无法持续监控动态面板的移动，只能是移动一次，然后检查一次条件，触发一次动作。所以，我们需要实现让动态面板一旦开始移动，就要持续处于不断移动的状态，不断触发OnMove事件的动作，从而实现实时监控是否达到触发条件（即PhoneTextlength的值的位数长度是否等于11）。持续触发事件的方法我们在之前的动画教程-音乐播放器进度条教程中有讲到过类似的案例，这里再简单复述一下哈~

·1 再次选中动态面板“启用按钮触发器”，并选中OnMove事件，双击打开case编辑窗口，如下图24所示：

图24：

·2 添加一个wait动作，参数设置如下图25所示：

图25：

·3 再添加一个move动作，在右侧选择“This widget”即移动自身，参数设置：下方的move设置为“by”，如下图26所示：

图26：

这样就形成了一个持续循环：移动一次触发器动态面板，相隔1000ms，再移动一次，这样就可以持续不断重复移动触发器，从而一直到发现满足“如果此时变量值PhoneTextlength的值的位数长度等于11”的条件时，则启用“获取验证码按钮”。

预览一下，我们已经实现了我们需要的效果：在手机号输入框内持续输入文字，当达到11位数时候，“获取验证码”按钮由半透明浅灰色的不可用disable状态切换为正常颜色的Enable状态。

这里可能有同学要问了：为什么要加上一个wait动作，等一段时间再做move动作呢？直接做move动作不是也可以？

这里是因为，我一开始这样做没有添加wait动作直接move的时候，发现在预览的时候非常容易卡住，因为这种OnMove事件直接触发move动作再马上发生OnMove事件，其间几乎没有时间间隔的话，在短短数秒内， 可能就已经触发了几百上千次move动作，所以电脑架不住就卡了。。。。。。所以，我所想的解决方案就是让move动作的循环触发要相隔一段时间，即添加一个wait动作。

【方法2·Step3】

·1 接下来，输入验证码的输入框内输入字符位数长度与登录按钮启用的联动关系制作方法也与上述相同，只是，我们要为触发器动态面板的OnMove再添加第三个case，而它的发生要同时满足两个条件：即手机号输入框内输入的的字符串位数达到11；以及验证码输入框内输入的字符串位数达到6，此case的条件设置如下图27所示：

图27：

·2 条件设置完成后，我们再添加一个Enable/disable动作，选中“登录”按钮，即满足当前条件后，启用登录按钮。如下图28所示：

图28：

·3 最后，我们再把这最后创建的第三个case3往上移动一次，将它移动到之前创建的循环move的case2的上一层，也就是从上往下排序第二个，如下图29所示：

图29：

但是，我们在预览时候发现，当我们输入验证码达到6位，登录按钮却不会自动更新状态，为什么呢？

我后来找到了原因就是，要把启用登录按钮的case3切换一下Else if/if，为什么呢？因为看上图29你会发现，有两个Else if，显然这无法形成一个正确的逻辑语句，所以我们要把case3切换为if，右击case3，在弹出的窗口中点击最后一个“Toggle IF/ELSE IF”，从原来的Else if切换为If，如下图30所示：

图30：

此时再次预览，我们可以发现已经成功实现了我们想要的效果~~本文转自站酷作者Kebot