Axure之倒计时简单实现

开心一笑

【看大家都在抵制韩国，我翻遍家里也没找到有啥韩货可砸的，最后下楼把楼下姓韩的邻居打了一顿，因为他名叫韩国胜。】

唯美图片

提出问题

Axure如何实现倒计时和动画切换???

解决问题

此文只为一人而写......

1.新建一个全新的项目。

1

2.在元件库里，拖入两个一级标题元件，分别写上“距离高考还剩” 和 “天” 这两个文字。 具体如下：

3.在元件库里，拖入一个动态面板，宽度：50，高度：50。

3

4.双击动态面板，在弹出的窗口中依次添加5个子面板。

4

5.双击state1字面板，在弹出的界面中，拖入一个一级标题，写上“5”.

5

6.安装步骤5的操作，在其他4个state字面板中依次添加文本 “4”，“3”，“2”，“1”

6

7.回到index页面，点击动态面板，在属性窗口中，单击“载入时”，点击上面的添加用例。

7

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

8.在弹出的窗口中，点击添加动作下的“等待”，等待时间为 1000 毫秒，也就是 1 秒

8

这里的意思是，当页面在浏览器上加载出来的时候，页面等待1s

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

9

10.我们给动态面板“载入时”，绑定了2个事件，点击预览，你就会发现页面从 “5” --变成--> "4"，坚持下去，我们已经实现一半了。

这里写图片描述

11.我们回到 index 页面，单击动态面板，因为我们的页面已经可以从 “5” 跳转到“4”了，可是怎么从“4” 调整到“3” 呢？所有我们需要继续添加事件。“5”跳转到“4”，事实上是动态面板状态改变时的一个事件，我们只要监听这个事件就可以了。所有我们添加属性中的“状态改变时”事件，点击“添加用例”。

11

12.和步骤9一模一样，只是选择状态：“state3”

这里写图片描述

但是这样还是不够的，“5” --跳转-->>> "4"， 是从 state1 --调整-->>> state2，所有我们需要添加一个条件，

这里写图片描述

这里写图片描述

这里写图片描述

上面操作的意思是，当面板调到state2时候，触发条件。继续等待1s，然后显示state3.

13.安装步骤11和步骤12，我们依次添加case2和case3，并且添加上“等待”事件 和 ”设置面板状态“事件，同时“添加条件”，最终效果如下：

这里写图片描述

这里要注意的是：case2 和 case3 的添加条件是不一样的。

14.通过上面的一系列操作，我们预览，在浏览器查看效果。大功告成......

读书感悟

来自叶芝《当你老了》

• 当你老了，头发花白，睡意沉沉，
  倦坐在炉边，取下这本书来，
  慢慢读着，追梦当年的眼神。
  你那柔美的神采与深幽的晕影。
  多少人爱过你昙花一现的身影，
  唯独一人曾爱你那朝圣者的心，
  爱你哀戚的脸上岁月的留痕。
  在炉罩边低眉弯腰，
  忧戚深思，喃喃而语，
  爱情是怎样逝去，又怎样步上群山，
  怎样在繁星之间藏住了脸。

经典故事

【魏文王问名医扁鹊说：“你们家兄弟三人，都精于医术，到底哪一位最好呢？
扁鹊答：“长兄最好，中兄次之，我最差。　　
文王再问：“那么为什么你最出名呢？
扁鹊答：“长兄治病，是治病于病情发作之前。由于一般人不知道他事先能铲除病因，所以他的名气无法传出去；中兄治病，是治病于病情初起时。一般人以为他只 能治轻微的小病，所以他的名气只及本乡里。而我是治病于病情严重之时。一般人都看到我在经脉上穿针管放血、在皮肤上敷药等大手术，所以以为我的医术高明， 名气因此响遍全国。　　
【学习啦】心得：事后控制不如事中控制，事中控制不如事前控制。】

大神文章

【1】Axure的简单操作（倒计时使用变量）
【2】axure RP7.0 实现60秒倒计时功能
【3】Axure教程：实现倒计时获取验证码效果
【4】图文详解-如何用Axure做一个倒计时功能按钮
【5】Axure7.0原型小楼作品日期函数实现倒计时

其他

如果有带给你一丝丝小快乐，就让快乐继续传递下去，欢迎点赞、顶、欢迎留下宝贵的意见、多谢支持！