多语言展示
当前在线:571今日阅读:19今日分享:20

Axure原型工具如何制作2分钟倒计时的效果

Axure原型工具可以做很多的效果,前面小编介绍了好多交互效果,这一次小编介绍一个如何通过Axure原型工具如何制作2分钟倒计时的效果,后面的经验还会介绍正计时的效果,快来看看怎么制作吧。
工具/原料
1

电脑

2

Axure

方法/步骤
1

首先创建一个空白页面,在工作区域拖入要使用的元件元素,包括矩形、按钮及动态面板,如下图所示。

2

元件元素准备好后,对元件的样式及描述等信息进行设置,把分、秒、开始、暂停和重置等信息完善,如下图所示。

3

然后对元件的名称进行命名,后面在做交互事件的时候容易到对应的元件,如下图所示。

4

打开动态面板,复制出两个状态,不需要在里面输入内容,复制一个就好,如下图所示。

5

准备工作完成,下面开始做交互事件,首先我们对动态面板状态改变时的第一个条件下的交互事件进行设置,条件是当秒数等于00时,设置分和秒的值,这里分的值需要用函数来计算,并且需要加入一个局部变量,具体如下图所示。

6

同样的方式,我们对第二个条件下的交互事件进行设置,如下图所示。

7

动态面板的交互事件加完了,下面对三个按钮的事件进行设置,首先是开始的点击交互事件,如下图所示。

8

对暂时按钮的单击交互事件进行设置,如下图所示。

9

对重置按钮的单击交互事件进行设置,如下图所示。

10

所有工作准备完成,f5预览一下,如下图所示,当点击开始的时候秒会变成59开始倒计时,点击暂停和重置时的效果。

注意事项
1

倒计时的重点在于函数的控制,只要把函数工式写对其他都不是问题了

2

更多好玩的经验欢迎关注小编我们一起学习

推荐信息