偶然在網(wǎng)上搜索了一下利用axure做倒計時效果，但是看到的居然是利用動態(tài)面板一張一張疊起來，我腦補了一下60個數(shù)字疊在一個動態(tài)面板里的畫面…………

所以今天和大家交流一下我的制作思路——利用“文本輸入框”特有的交互條件制作倒計時效果。

【進入正題】

1. 倒計時現(xiàn)在多用于獲取短信驗證碼，下面是我自己隨意繪制的一個圖，把一些該有的元素先做好；

要點：先把短信驗證碼的三種情況都先列出來：

• 第一次獲取
• 倒計時
• 重新獲?。ó?dāng)然你也可以換種顯示方式）

2. 添加一個文本輸入框到數(shù)秒的框框那里（灰色的那個），并把數(shù)字、文本框的屬性設(shè)置好（隱藏邊框、填充設(shè)置為透明）

3. 把這三個按鈕（獲取、數(shù)秒、重新獲?。┓诺?strong>一個動態(tài)面板的不同狀態(tài)上，這個就不配圖了；

然后設(shè)置他們的交互，這里先看數(shù)秒的交互：可以看到文本輸入框有個特有的交互功能——文字改變時；

這里設(shè)置兩個用例：

1. 當(dāng)秒數(shù)大于等于1的時候，讓數(shù)字繼續(xù)遞減，
2. 當(dāng)秒數(shù)等于0的時候，設(shè)置動態(tài)面板狀態(tài)到“重新獲取”

4. 然后就是其余兩個按鈕了：

獲?。?/strong>