Axure如何制作验证码倒计时?

Axure如何制作验证码倒计时?

我们在登录账号的时候很多时候会需要发送手机验证码,那等待这个验证码的时候有一个倒计时过程,如果要实现验证码倒计时我们需要如何操作呢?首先我们需要一个圆形设计软件Axure,然后利用动态面板实现交互,完成验证码倒计时的实现。

在开始前我们需要把梳理下思路,简单的把任务流程理出来,帮助我们理解制作过程中的原理。

先来看看效果:

Axure动图

从元件库中拖入一个主要按钮放入画布空白处,命名为“获取按钮”(可以随意命名)

Axure按钮

然后再拖入一个动态面板放入画布中,命名为“循环面板”,并且双击该动态面板,添加一个状态2“State2”,这里就可以看成‘初始’和‘结束’的“容器”。

Axure动态面板

Axure命名

接下来创建一个全局变量对该“容器”进行记录。

Axure全局变量

Axure全局变量

为“获取按钮”这个元件添加一个交互样式,该按钮「禁用」时,填充颜色为灰色。

Axure禁用

为“获取按钮”元件添加用例,当「鼠标单击时」,设置动作为「设置面板状态」在动态面板“循环面板”上,选择状态「Next」,勾选「向后循环」,「循环间隔」为‘1000’毫秒,取消勾选「首个状态延时延时1000毫秒切换」。

Axure添加交互

添加第二个动作「禁用」,选择“当前元件”。

Axure禁用

为动态面板“循环面板”的「状态改变时」添加第一个用例,并给该用例添加条件,条件设置为「变量值」,「TimeValue」“>”「1」。

Axure状态改变时

继续添加全局变量中的「设置变量值」,勾选「TimeValue」,更改值为[[TimeValue-1]]。

Axure设置变量值

添加第三个动作「设置文本」,勾选“获取按钮”,更改值为[[TimeValue]]秒后可重新获取。

Axure设置文本

为「改变状态时」添加第二个用例,设置当不满足第一个用例所设定条件时执行的动作。此处有4个动作,分别是:

第1个动作是「设置文本」为“获取按钮”的文字值是“重新发送验证码”。

Axure添加用例

第2个动作是设置全局变量中的「设置变量值」,勾选「TimeValue」,更改值为“60”。

Axure设置变量值

第3个动作「启用」,勾选“获取按钮”。

Axure获取按钮

第4个动作为「设置面板状态」与动态面板,勾选“循环面板”,选择「停止循环」。

Axure设置面板状态

以上就是所有的制作步骤,最终的效果就像文章开头中所示的样子,在这个过程中,我们其实已掌握了两个重要的知识点:一个是动态面板的循环实现方式,第二个是通过全局变量来设定时间值。

Axure是一款很强大的原型设计软件,不需要编程,只需你明白其中交互即可实现你要制作的效果。以上教程就已经全部介绍完了,希望对你有帮助。如果有更多感兴趣的内容,可以访问Axure中文网,了解更多资讯。

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