1. 编程圈首页
  2. 文库
  3. 产品设计

Axure教程:进阶版倒计时

如果该教程较难,建议先观看我做的第一个倒计时(简单版),操作步骤更为详细:http://www.woshipm.com/rp/3133460.html。开门见山,我们先来看看效果↓预览图:预览网址:h

Axure教程:进阶版倒计时

如果该教程较难,建议先观看我做的第一个倒计时(简单版),操作步骤更为详细:http://www.woshipm.com/rp/3133460.html。

开门见山,我们先来看看效果↓

预览图:

Axure教程:进阶版倒计时

Axure教程:进阶版倒计时

预览网址:https://jxvo3f.axshare.com/

所需元件

Axure教程:进阶版倒计时

一个命名为“触发器”的动态面板(两个面板状态)、一个命名为“秒”的矩形,并填入文字“10”、一个命名为“分”的矩形,并填入文字“01”、一个命名为“时”的矩形,并填入文字“01”、两个“:”矩形、一个填充色为黄色的背景矩形。

操作步骤

(1)设置动态面板交互——载入时

Axure教程:进阶版倒计时

这个交互的作用是一直触发动态面板的下一个交互——状态改变时。

(2)设置动态面板第二个交互——状态改变时(Case 1)

Axure教程:进阶版倒计时

这里就不列举详细操作步骤了,较为详细的步骤就在我的开头的文章里面有介绍。

Case1的作用是:“当“秒”矩形内的数值大于0时则自减1”。

(3)设置动态面板第三个交互——状态改变时(Case 2)

Axure教程:进阶版倒计时

Case2里多了一个条件,那么Axure如何设置多个条件呢?只需要在“编辑条件”里面再点击一下红圈里面的加号即可添加多一个条件了。

Case2的作用是:“当“秒”矩形内数值为0时,“分”矩形内数值减1,“秒”矩形内数值设为59”。

Axure教程:进阶版倒计时

(4)设置动态面板第四个交互——状态改变时(Case 3)

Axure教程:进阶版倒计时

Case3的作用是:“当“秒”矩形内数值为0且“分”矩形内数值也为0时,则“时”矩形内数值减1,且“分”矩形数值设为59,“秒”矩形数值设为59”

(5)大功告成,按F5预览看看效果

小记

(1)如果预览时觉得看数值变化太慢了,可以把动态面板的交互——载入时的循环间隔时间设置为1ms。

Axure教程:进阶版倒计时

(2)这个原型有一个缺陷,就是当倒计时倒数到个位数时,无法显示为“09、08、07”这样子,在个位数前面补0,当然简单的替换方案就是在“时”“分”“秒”矩形前面加一个隐藏的0,并设置显示时的条件为:“当“时”“分”“秒”矩形内的数值低于10时显示并在大于10时隐藏即可”。但是如何通过函数实现,期望有大佬可以来讲解一下。

(3)该原型的适用场景有很多,比如说现在许多商城的限时抢购都会用到时分秒的倒计时。学会了就可以应用在这些场景里面了(๑•̀ㅂ•́)و✧

(4)正式使用时,记得要将仅仅用来实现倒计时功能的动态面板隐藏掉。这里我为了展示效果所以没有隐藏。

(5)这个原型是根据我的上一篇文章《Axure教程:获取验证码倒计时的实现》,发散思维想到去做的一个原型案例,在这里分享出来,希望可以帮助到和我一样刚起步的产品小白。

发布者:编程圈,转转请注明出处:https://www.bianchengquan.com/article/418984.html

发表评论

登录后才能评论