起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure教程：兩個原件實現“驗證碼倒計時”效果
今天給大家帶來的教程內容是，怎樣用兩個原件去實現“驗證碼倒計時”的設計，一起來看看~
先來看一下效果圖：
接下來正式開始教學：
實現這一效果我們只運用到了兩個原件（沒錯，就是兩個！），“按鈕”和“動態面板”，以及設置一個全局變量。
準備工作
第一步，我們先從元件庫中拖動一個“按鈕”到頁面中，然后雙擊這個元件，輸入文字“獲取驗證碼”。
第二步，點擊該按鈕，設置顯示倒計時按鈕的樣式（因為驗證碼倒計時效果按鈕會有一個樣式的變化，所以我們要重新設置一個倒計時過程中的樣式）。
這里我們采用“禁用”這一狀態下的樣式作為倒計時的樣式，有的小可愛們可能會問，“設置選中行不行？”，答案是no！至于為什么要用“禁用”，到后面你就知道了！
第二步，從元件庫中拖動一個“動態面板”到頁面中，然后……然后就沒了喲，驚不驚喜？（這里的動態面板只是作為一個觸發器，并不需要添加內容）。
第三步，設置一個全局變量，用來實現倒計時的數字變化。點擊頭部菜單欄的“項目（P）”，選擇“全局變量（V）”，點擊“添加”，更改變量名稱為“timer”。
設置動作
下面就到了關鍵的步驟，設置交互動作：
第一步，設置按鈕的交互動作，單擊“獲取驗證碼”按鈕，點擊右側的“New Interaction”按鈕，然后如圖添加事件
第二步，設置動態面板的交互動作
（1）單擊“動態面板”，點擊右側的“New Interaction”按鈕。
（2）選擇交互動作中的“狀態改變時”，此時不要進一步選擇事件，而是點擊頁面空白處。
（3）點擊“添加用例”按鈕，添加用例，添加邏輯條件。
（4）按圖添加該用例下事件
（5）再次點擊“添加用例”按鈕，添加用例，添加相反條件（這里直接點擊確定就可以，Axure會自動生成相反邏輯）。
（6）按圖添加該用例下事件
最后一步，設置完動態面板的動作之后，雙擊動態面板，選擇“State1”，點擊“復制”，復制一個一樣的state。（此處的目的是為了實現觸發器的作用）
做到這里，我們的交互效果就已經完成了，相信大家對于前面為什么用“禁用”的問題也有了答案了吧（因為按鈕需要切換狀態，設置“啟用/禁用”）。
成果展示
接下來就可以點擊預覽，打開瀏覽器查看我們的“成果”啦！
本文由 @早安中國 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
我認為這種操作步驟號理解一點，而且步驟清晰，可以不用到動態面板。供參考 https://www.cnblogs.com/qinmei/p/11585109.html
我用的是9.0.0.3668，你那個設置變量值絕對位置是什么意思，我這沒有絕對位置這一項。
這個不用設置選項，你設置完變量值以后就是默認的相對位置。
絕對位置的意思就是它所在的（x,y）坐標值，其他相關原件位置變化，它還是在（x,y）處。
哈，看完還是不太會？你可能需要從Axure基礎開始學
?? 這里推薦你加Axure實戰班的助教小可愛@CC-起點學院（微信：qidiancc520），回復關鍵詞：大禮包
領取適合產品新人的原型設計大禮包哦，cc還會不定期分享Axure免費視頻課程呢！
8的我都沒看到，界面都不一樣
嗯嗯，這個是9，,8的在交互頁面能找到的
Axure9嗎？