辉灿新闻网 原型设计 Axure:以秒表计时为例,看如何停止及继续循环

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

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

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

轮播图一直轮播60s后重新获取手机验证码时间显示秒表计时播放/暂停

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

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

方法1:使用触发事件 —— 只需要1个元件即可方法2:使用动态面板 —— 需要1个元件和1个动态

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

先看效果:

鼠标单击上方区域,开始循环每1毫秒自增1再单击可切换暂停/继续循环

快速预览成果:https://s72nl9.axshare.com/

方法1:使用触发事件 —— 只需要1个元件即可1.1 概况

所需要元件:

矩形元件 * 1 (也可以其他元件,只要能输出文本的即可)

涉及交互事件(用例):

鼠标单击时选中时

涉及动作:

切换选中状态设置文本等待触发事件

是否涉及判断条件:

是,有判断条件

涉及函数及公式:

text —— 元件的文件值this —— 当前元件[[this.text + 1]] —— 当前元件的值加1(例如,原来为0,执行之后变为1)1.2 素材制作

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

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

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

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

(不重要)示例中做了以下处理

元件命名为 “1”元件填充色为 F2F2F2元件线宽设置为None (无边框)元件圆角半径设置为 51.3 交互设计

目标:

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

再次点击时:

停止(暂停) —— 若还在累加,则停止。值不再变化

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

先看一下流程图

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

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

(2)选中时:如果 当前元件的选中状态为true(选中),则执行接下来的动作

当前元件值加1等待1毫秒触发“当前元件”的“选中时”事件(达成循环)

注意:当选中状态变为flase(未选中)时,就不会执行下来的动作 —— 循环停止

添加好后的情况如下图

OK,方法1已经完成。F5预览,点点鼠标,效果出来了吗?!

我们再来看一下方法2

方法2:使用动态面板 —— 需要1个元件和1个动态2.1 概况

所需要元件:

矩形元件 * 1 (也可以其他元件,只要能输出文本的即可)动态面板 * 1 (面板下面至少要有2个状态)

涉及交互事件(用例):

鼠标单击时选中时取消选中时(动态面板)状态改变时

涉及动作:

切换选中状态设置(动态)面板状态 —— 向后循环、循环间隔、停止循环设置文本

是否涉及判断条件:

无,无判断条件

涉及函数及公式:

Next —— 动作面板的下一状态text —— 元件的文件值target —— 目标元件[[tatget.text + 1]] —— 目标元件的值加1(例如,原来为0,执行之后变为1)2.2 素材制作

    拖入一个面板,命名为“2” —— 示例中其他设置与1一致插入一个动态面板,命名为“循环用” —— 示例中,宽高:20*20、位置:元件2的右上角增加动态面板“循环用”新的状态 —— 保存至少有2个状态(这样才能循环)

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

2.3 交互设计

先看一下流程图:

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

(1)鼠标点击时

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

(2)选中时

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

向后循环 —— 达成循环循环间隔 —— 多久执行一次,想当于方法1中的等待时间首个状态延时x毫秒后切换 —— 不是立即切换,而是(在触发之后)等待相同的时间再切换,保存与其他面板切换的时间一致

(3)取消选中时

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

设置好之后,如下图:

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

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

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

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

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

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

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

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

OK,方法2已经完成了。F5预览一下,效果都出来了吗?!

扩展部分

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

    自动停止循环 —— 10s倒计时后可再次获取验证码点击切换旋转/停止旋转

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

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

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

题图来自 Pixabay,基于 CC0 协议

本文来自网络,不代表辉灿新闻网立场,转载请注明出处:https://news.jbjy8888.com/yuanxing/2600.html

作者: 牧逸

Axure教程:省市县三级联动选择(全国省市区数据)

Axure:PC端常见图片展位悬停效果(三)

发表回复

您的电子邮箱地址不会被公开。

联系我们

联系我们

暂无

在线咨询: QQ交谈

邮箱: meiliao888@163.com

工作时间:周一至周五,10:00-19:00,节假日休息。
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部