Axure：以秒表计时为例，看如何停止及继续循环

本文作者将尝试用两种方法来实现【秒表计时】功能，探讨一下如何实现：循环的开始、循环的结束、循环的继续。enjoy~

在原型设计过程中，有一些常用的交互效果，涉及到循环，例如：

而“重新获取手机验证码”又涉及停止循环，“播放/暂停”还涉及到继续循环

今天，我们尝试用以下两种方法来实现【秒表计时】功能，探讨一下如何实现：循环的开始、循环的结束、循环的继续。

方法只是达到目标的途径，途径并不唯一，方法也不独属。希望大家在理解原理之后，能够举一反三、灵活应用于其他需要的场景。

先看效果：

鼠标单击上方区域，开始循环

每1毫秒自增1

再单击可切换暂停/继续循环

所需要元件：

涉及交互事件（用例）：

涉及动作：

是否涉及判断条件：

是，有判断条件

涉及函数及公式：

几无特殊说明的地方，以下仅为示例中的设置。实际应用中大家应该自由发挥

拖入一个矩形，填入0，或者不要写入任何字符。

空的矩形，代表其text值为0

若填入了非数字的字条，[[this.test + 1]]得出来的结果将是一个字符串，而不能实现累加

（不重要）示例中做了以下处理

目标：

第1次点击元件开始循环 —— 每隔1毫秒累加1

再次点击时：

停止（暂停） —— 若还在累加，则停止。值不再变化

继续 —— 若未在累加，则继续循环。值继续每隔1毫秒累加1

先看一下流程图

再来添加元件1的交互事件

（1）鼠标点击时：切换当前元件的选中状态 —— 注：如果没有特殊设置过，默认是未选中状态

（2）选中时：如果 当前元件的选中状态为true（选中），则执行接下来的动作

注意：当选中状态变为flase（未选中）时，就不会执行下来的动作 —— 循环停止

添加好后的情况如下图

OK，方法1已经完成。F5预览，点点鼠标，效果出来了吗？！

我们再来看一下方法2

所需要元件：

涉及交互事件（用例）：

涉及动作：

是否涉及判断条件：

无，无判断条件

涉及函数及公式：

无特殊效果，所以就不截图了

先看一下流程图：

添加元件”循环用”的交互事件

（1）鼠标点击时

切换当前元件的选中状态 —— 注：如果没有特殊设置过，默认是未选中状态。

（2）选中时

设置“循环用”的面板为Next，并且选中“向后循环”，设置“循环间隔”时间为1毫秒，同时勾选“首个状态延时x毫秒后切换”。

（3）取消选中时

设置“循环用”的面板的状态为“停止循环”。

设置好之后，如下图：

以上达到了“循环用”动态面板的循环（切换状态），及停止循环的效果。

但数值还没有变，下面，我们就要借用“循环用”的循环来达到数值（秒表）的累加效果

添加元件”循环用”的交互事件

状态改变时：设置“2”的文本值加1

公式[[tatget.text + 1]]达到加1的效果

所以，只要“循环用”的状态变化1次，“2”的值就要执行一次加1 —— 实现“2”值的循环累加；

当“循环用”的状态未变化时，“2”值也不累加，不变 —— 实现“2”值的循环累加的停止

从而实现了秒表计时的目标。

OK，方法2已经完成了。F5预览一下，效果都出来了吗？！

通过灵活使用循环原理，还可以实现如下效果：

详细如何制作就不在此文中赘述了，大家可以尝试了下。

以上所有效果预览地址：https://s72nl9.axshare.com/

本文由 @牧逸 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自 Pixabay，基于 CC0 协议