产品经理互联网产品思考互联网科技

Axure之倒计时简单实现

2017-03-13  本文已影响827人  阿_毅

开心一笑

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

唯美图片

提出问题

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原型小楼作品日期函数实现倒计时

其他

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

上一篇 下一篇

猜你喜欢

热点阅读