快好知 kuaihz

Axure教程:两个原件实现“验证码倒计时”效果

今天给大家带来的教程内容是,怎样用两个原件去实现“验证码倒计时”的设计,一起来看看~

先来看一下效果图:

接下来正式开始教学:

实现这一效果我们只运用到了两个原件(没错,就是两个!),“按钮”和“动态面板”,以及设置一个全局变量。

准备工作

第一步,我们先从元件库中拖动一个“按钮”到页面中,然后双击这个元件,输入文字“获取验证码”。

第二步,点击该按钮,设置显示倒计时按钮的样式(因为验证码倒计时效果按钮会有一个样式的变化,所以我们要重新设置一个倒计时过程中的样式)。

这里我们采用“禁用”这一状态下的样式作为倒计时的样式,有的小可爱们可能会问,“设置选中行不行?”,答案是no!至于为什么要用“禁用”,到后面你就知道了!

第二步,从元件库中拖动一个“动态面板”到页面中,然后……然后就没了哟,惊不惊喜?(这里的动态面板只是作为一个触发器,并不需要添加内容)。

第三步,设置一个全局变量,用来实现倒计时的数字变化。点击头部菜单栏的“项目(P)”,选择“全局变量(V)”,点击“添加”,更改变量名称为“timer”。

设置动作

下面就到了关键的步骤,设置交互动作:

第一步,设置按钮的交互动作,单击“获取验证码”按钮,点击右侧的“New Interaction”按钮,然后如图添加事件

第二步,设置动态面板的交互动作

(1)单击“动态面板”,点击右侧的“New Interaction”按钮

(2)选择交互动作中的“状态改变时”,此时不要进一步选择事件,而是点击页面空白处。

(3)点击“添加用例”按钮添加用例,添加逻辑条件。

(4)按图添加该用例下事件

(5)再次点击“添加用例”按钮添加用例,添加相反条件(这里直接点击确定就可以,Axure会自动生成相反逻辑)。

(6)按图添加该用例下事件

最后一步,设置完动态面板的动作之后,双击动态面板,选择“State1”,点击“复制”,复制一个一样的state。(此处的目的是为了实现触发器的作用)

做到这里,我们的交互效果就已经完成了,相信大家对于前面为什么用“禁用”的问题也有了答案了吧(因为按钮需要切换状态,设置“启用/禁用”)。

成果展示

接下来就可以点击预览,打开浏览器查看我们的“成果”啦!

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:原件  原件词条  倒计时  倒计时词条  验证  验证词条  两个  两个词条  效果  效果词条  
原型

 Axure教程 | 网站后台多页...

很多网站后台或者B/S结构的应用系统,经常会有这样的功能:左侧是导航菜单,点击菜单后会在右侧主区域以页签(也可称为选项卡)的形式打开页面,然后再点击第二个个菜单...(展开)

原型

 Axure 9教程:制作手风琴侧...

作者给大家分享了如何使用Axure 9制作手风琴侧边菜单栏,一起来看看~效果图:实现侧边栏这种效果的方法有很多种,比如一级类目和二级类目全部用矩形元件摆列出来,...(展开)

原型

 原型设计的道、术、器

原型设计是互联网PM的核心能力,其提升必然伴随着对器的精通,术的掌握,道的理解。很多PM的原型设计能力还停留在器的层面,简历中号称精通Axure和墨刀等各种原型...(展开)