Axure之计时器简单实现

Axure学习从点滴开始！

下面是计时器的简单实现方法，希望读该文章的你在产品路上又进步了一点。

1.新建一个全新的项目

2,在元件库里拖入两个一级标题，分别写上“倒计时”和“天”，如图

3.在元件库里拖入一个动态面板，并设好长宽，如图

4.双击动态面板，在弹出的窗口上添加五个子面板，如图

5.双击state1面板，在弹出的框框上拖入一个一级标题，写上“5”，如图

6.按照步骤5，在其他四个state上操作，并依次写入文字，4,3,2,1

7.回到index页面，点击动态面板，如图

这里的载入时是指页面刚刚加载的时候，要触发的事件，详情看步骤8

8.在弹出的窗口上，点击添加动作下的“等待”，显示的是1000毫秒，也就是一秒，如图

意思是，当页面在浏览器上加载出来时，页面等待时间是1秒。

9.继续添加动作，选择元件下的控制面板，在配置动作窗口选择动态面板，选择状态是state2，再勾选如果隐藏则显示面板，最后点击确定，如图

10.给动态面板”载入时“绑定了两个事件，点击预览，会看到从5跳到4，如此类推，就可以做成

11.回到index页面，刚刚完成了从5跳到4，那么如何实现从4到3呢？这个时候需要继续添加事件。从5到4其实是动态面板上的改变时的一个事件，现在只需要监听这个事件就可以了，所以我们添加属性中的”状态改变时“事件，点击添加用例。

12.与步骤9一样，只是选择状态为state3

但这样还是有欠缺的，从5跳到4是从state1调整到state2的，所以还需要添加一个条件

用户状态改变时

上面的意思是当面板调到state2时，条件触发。继续等待一秒会显示state3.

13.按照上面的步骤11和12，依次添加case2和case3，并添加”等待“事件和“设置面板状态”事件，同时添加条件，如图

注意：case2和case3添加的条件不同。

14.预览完成。

喜欢就经常来关注，文章会不定期更新~