国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

今天給大家?guī)淼慕坛虄?nèi)容是，怎樣用兩個(gè)原件去實(shí)現(xiàn)“驗(yàn)證碼倒計(jì)時(shí)”的設(shè)計(jì)，一起來看看~

先來看一下效果圖：

接下來正式開始教學(xué)：

實(shí)現(xiàn)這一效果我們只運(yùn)用到了兩個(gè)原件（沒錯(cuò)，就是兩個(gè)！），“按鈕”和“動(dòng)態(tài)面板”，以及設(shè)置一個(gè)全局變量。

準(zhǔn)備工作

第一步，我們先從元件庫(kù)中拖動(dòng)一個(gè)“按鈕”到頁(yè)面中，然后雙擊這個(gè)元件，輸入文字“獲取驗(yàn)證碼”。

第二步，點(diǎn)擊該按鈕，設(shè)置顯示倒計(jì)時(shí)按鈕的樣式（因?yàn)轵?yàn)證碼倒計(jì)時(shí)效果按鈕會(huì)有一個(gè)樣式的變化，所以我們要重新設(shè)置一個(gè)倒計(jì)時(shí)過程中的樣式）。

這里我們采用“禁用”這一狀態(tài)下的樣式作為倒計(jì)時(shí)的樣式，有的小可愛們可能會(huì)問，“設(shè)置選中行不行？”，答案是no！至于為什么要用“禁用”，到后面你就知道了！

第二步，從元件庫(kù)中拖動(dòng)一個(gè)“動(dòng)態(tài)面板”到頁(yè)面中，然后……然后就沒了喲，驚不驚喜？（這里的動(dòng)態(tài)面板只是作為一個(gè)觸發(fā)器，并不需要添加內(nèi)容）。

第三步，設(shè)置一個(gè)全局變量，用來實(shí)現(xiàn)倒計(jì)時(shí)的數(shù)字變化。點(diǎn)擊頭部菜單欄的“項(xiàng)目（P）”，選擇“全局變量（V）”，點(diǎn)擊“添加”，更改變量名稱為“timer”。

設(shè)置動(dòng)作

下面就到了關(guān)鍵的步驟，設(shè)置交互動(dòng)作：

第一步，設(shè)置按鈕的交互動(dòng)作，單擊“獲取驗(yàn)證碼”按鈕，點(diǎn)擊右側(cè)的“New Interaction”按鈕，然后如圖添加事件

第二步，設(shè)置動(dòng)態(tài)面板的交互動(dòng)作

（1）單擊“動(dòng)態(tài)面板”，點(diǎn)擊右側(cè)的“New Interaction”按鈕。

（2）選擇交互動(dòng)作中的“狀態(tài)改變時(shí)”，此時(shí)不要進(jìn)一步選擇事件，而是點(diǎn)擊頁(yè)面空白處。

（3）點(diǎn)擊“添加用例”按鈕，添加用例，添加邏輯條件。

（4）按圖添加該用例下事件

（5）再次點(diǎn)擊“添加用例”按鈕，添加用例，添加相反條件（這里直接點(diǎn)擊確定就可以，Axure會(huì)自動(dòng)生成相反邏輯）。

（6）按圖添加該用例下事件

最后一步，設(shè)置完動(dòng)態(tài)面板的動(dòng)作之后，雙擊動(dòng)態(tài)面板，選擇“State1”，點(diǎn)擊“復(fù)制”，復(fù)制一個(gè)一樣的state。（此處的目的是為了實(shí)現(xiàn)觸發(fā)器的作用）

做到這里，我們的交互效果就已經(jīng)完成了，相信大家對(duì)于前面為什么用“禁用”的問題也有了答案了吧（因?yàn)榘粹o需要切換狀態(tài)，設(shè)置“啟用/禁用”）。

成果展示

接下來就可以點(diǎn)擊預(yù)覽，打開瀏覽器查看我們的“成果”啦！

本文由 @早安中國(guó) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議