如今各大電商類網站或團購類網站都會出現秒殺倒計時、搶購倒計時的設計需求。那么在設計產品原型時我們該如何實現倒計時的效果了，下面我們來講述分析該如何一步步的實現這樣的效果。能夠實現倒計時的原型效果或許有很多工具可以實現，文中講述的以Axure工具為例實現交互效果。

首先我們分析下倒計時的時間表，通過分析我們可以觀察出以下現象： 時間表由時鐘、分鐘、秒鐘數字組成；秒鐘數字每隔一秒逐步遞減1，當秒鐘遞減到0時，分鐘數減1，秒鐘上的數字從59在逐步遞減，如此循環下去 ；當分鐘的數字為01時，1分鐘后遞減顯示為59，此時時鐘上的數字減1，如此循環下去；當時鐘、分鐘、秒鐘上的數字為1位數時，前面均會自動補充1個0。

思路分析：我們通過觀察得知上面2和3的現象，即秒鐘和分鐘的數字顯示是一個從59不斷遞減到0循環的過程，如此高頻反復的遞減規律我們很容易聯想到Axure中動態面板的狀態改變時事件來實現數字的循環變化；時鐘、分鐘、秒鐘的數字改變可以利用文本改變時事件來控制數字的變化范圍及規律。

下面我們直接動手操作實現過程

第一步先準備好相關部件素材

拖動3個文本框至設計區域用來顯示時鐘、分鐘、秒鐘的數字并分別給部件命名，拖動3個Lable至數字的后面，分別輸入時、分、秒，在時間數字表的千面拖動一個Lable,輸入“剩余倒計時 ”文字內容；新增一個空的動態面板，并設置兩個空狀態，用來循環控制數字鐘的變化。

第二步，設置交互用例

1、 設置頁面載入時事件，用來控制動態面板的循環過程：點擊頁面載入時事件用例，新增動作中選擇設置面板狀態，配置動作中選中動態面板，狀態中選擇next，勾選從第一個到最后一個自動循環，循環間隔設置為1000毫秒即1秒，點擊確定完成設置。

頁面加入時事件

2、為動態面板設置狀態改變時事件新增動作中選擇設置文本，配置動作中選中秒鐘文本，點擊下方文本框右側的fx，在彈出框中首先為秒鐘的文本框設置一個局部變量LAVR1,接著在上方的插入變量中輸入[[LVAR1-1]],此步即為實現秒鐘文本自動減1。

秒鐘自動減1

動態面板狀態改變時事件

3、為秒鐘文本框設置文本改變時事件新增用例，需要設置兩個用例。用例：設置判斷條件，如果當前部件的長度=1位數時，給秒鐘文本配置動作，在秒鐘文本前面加上數字0，在點擊fx的彈出框中為秒鐘文本設置局部變量，在上方的插入變量中輸入定義好的局部變量[[LVAR1]],并在前面加上數字0，用例1設置完畢；用例2，如果當前秒鐘部件=-1且分鐘部件文字>0，則為分鐘文本框配置動作設置自動減少一，秒鐘文本框值設置為59，設置請參照下方截圖

用例1：秒鐘1位前面加上0

用例2判斷條件

用例2中的分鐘設置

用例2的秒鐘設置

4、為分鐘文本框設置文本改變時事件，需要設置兩個用例。用例1：設置判斷條件，如果當前部件的長度=1位數時，給分鐘文本配置動作，在分鐘文本前面加上數字0，在點擊fx的彈出框中為分鐘文本設置局部變量，在上方的插入變量中輸入定義好的局部變量[[LVAR1]],并在前面加上數字0，用例1設置完畢；用例2，如果當前分鐘部件=00且時鐘部件文字≠00，（注意分鐘的數字是從01直接變為59，時鐘的數字最小值為00，所以判斷條件公式這樣設置），則為時鐘文本框配置動作設置自動減少一，分鐘和秒鐘文本框值設置為59，設置請參照下方截圖。

用例1中的分鐘設置

用例2的判斷條件

用例2中的時鐘設置，自動減1

用例2中的分鐘和秒鐘設置

5、為時鐘文本框設置文本改變時事件，設置判斷條件，如果當前部件（時鐘文本框）長度=1，則則配置動作中為時鐘文本框前面加上0，配置如下圖所示。

判斷條件設置

先設置為局部變量，在補充前綴數字0

至此所有交互用例設置完畢，點擊F5預覽下測試效果，我們會看到一個真實的倒計時效果出現了。當然為了美觀也可以為時鐘、分鐘、秒鐘文本框設置填充顏色。為了有興趣的朋友更方便的學習，大家可以從下面的地址中獲取源文件，如有相關問題，歡迎隨時提出討論。

鏈接：http://share.weiyun.com/d6edcc91ad30b0a6a7e7d02079005e47 （密碼：zrij）

作者：努力拼搏的80后

來源：簡書

鏈接：http://www.jianshu.com/p/10aa1335ffdc#

本文由 @努力拼搏的80后 授權發布于人人都是產品經理，未經作者許可，禁止轉載。