Axure实现倒计时效果

参考:http://jingyan.baidu.com/article/915fc41492ab8651394b20b3.html

打开Axure软件

Axure实现倒计时效果_第1张图片

添加单行文本,输入数字60,命名为time。可以相应调一下字体大小

Axure实现倒计时效果_第2张图片

添加动态面板,命名为round,

Axure实现倒计时效果_第3张图片

双击动态面板,点击+号,添加状态,命名为状态1,状态2

Axure实现倒计时效果_第4张图片

设置动态面板状态1背景色为绿色,状态2背景色为红色。

注:可以不设置任何颜色,此处是为了区分。

Axure实现倒计时效果_第5张图片

Axure实现倒计时效果_第6张图片

在round上,新增用例,点击动态面板状态改变时,点击设置条件,弹出编辑器窗口,设置如果time大于0,做下面的动作,

Axure实现倒计时效果_第7张图片

编辑动作,点击FX,跳转到编辑文字页面,按照图中添加,

发现截图不清晰,下面吧设置写一下

添加局部变量,LVAR1=部件文字 time

变量计算[[LVAR1-1]]

Axure实现倒计时效果_第8张图片

Axure实现倒计时效果_第9张图片

点击页面载入时,添加页面载入时用例,

Axure实现倒计时效果_第10张图片

设置页面载入时动作,按图操作

Axure实现倒计时效果_第11张图片

设置成功,使用快捷键F5预览一下吧,已经做好了

Axure实现倒计时效果_第12张图片

你可能感兴趣的:(Axure实现倒计时效果)