Axure使用动态面板实现60秒倒计时

Axure使用动态面板实现60秒倒计时

之前的文章我们有讲过关于验证码的倒计时设计,平时我们登陆设备账号的时候会需要用到手机的验证码,会有一个等待的时间,具体文章点击链接:Axure如何制作验证码倒计时?本文将给大家讲一下关于Axure使用动态面板实现60秒倒计时的教程。

首先,先来说说思路。

1、要有一个记录初始秒数和剩余秒数的容器,我们创建一个全局变量来记录。【步骤1】

2、要有一个获取验证码的按钮,和一个可以实现循环功能的元件-动态面板。动态面板可以通过切换状态实现循环,就必须有2个(含)以上的状态。【步骤2】

3、按钮默认为蓝色,点击后变成灰色。这需要为按钮预置禁用时的样式。【步骤3】

4、点击按钮时,要开启循环(【步骤4】)。并且,按钮不可再次点击(【步骤5】)。

5、循环时,如果时间记录大于“1”(【步骤6】),则要让秒数记录递减(【步骤7】)。并且,设置按钮显示最新时间与文字(【步骤8】)。

6、否则,即为倒计时结束。这时要让按钮显示文字“重新获取验证码”(【步骤9】),并且将时间记录恢复为“60”(【步骤10】),按钮也要重新变成可点击的状态(【步骤11】),最后还要停止循环(【步骤12】)。

注意:先读懂上述内容,才能很好的理解下面的实现过程。

接下来,是具体实现步骤。

1、在【项目】菜单中,点击【全局变量】,添加一个新的全局变量“TimeValue”。

Axure项目

2、在画布中放入一个矩形按钮,命名为“GetButton”;再放入一个动态面板,命名为“LoopPanel”;双击动态面板,点击“+”,为其添加一个新的状态“State2”(这一步是为了保证动态面板能够切换状态)。

Axure面板状态管理

3、为按钮“GetButton”设置【禁用】状态的交互样式,【填充颜色】为灰色。

Axure填充颜色

4、为按钮“GetButton”添加【鼠标单击时】的用例,设置动作为【设置面板状态】于动态面板“LoopPanel”,选择状态【Next】,勾选【向后循环】,设置自动循环间隔为【1000】毫秒,取消【首个状态延时1000毫秒切换】的选项。

Axure鼠标单击时

5、继续添加动作【禁用】【当前元件】。

Axure禁用

6、为动态面板“LoopPanel”的【状态改变时】添加第一个用例并设置条件,条件设置为【变量值】【TimeValue】【>】【值】“1”。

Axure添加条件

7、添加满足条件的动作为【设置变量值】【TimeValue】为【值】“[[TimeValue-1]]”。

Axure变量值

8、继续添加动作,【设置文本】于“GetButton”为【值】“[[TimeValue]]秒后可重新获取”。

Axure设置文本

9、为【状态改变时】再次添加用例,设置不满足第1个用例的条件时执行的动作。第1个动作为【设置文本】于“GetButton”为【值】“重新获取验证码”。

Axure添加用例

10、第2个动作为【设置变量值】为【值】“60”。

Axure设置变量值

11、第3个动作为【启用】按钮“GetButton”。

Axure启用

12、第4个动作为【设置面板状态】于动态面板“LoopPanel”,选择状态为【停止循环】。

Axure停止循环

最后,按“F5”键,在浏览器中查看做好的原型效果,以上就是关于Axure使用动态面板实现倒计时的教程,更多内容关注Axure网站。

在线客服
客服邮箱
客服电话
17051276424