今天來分享下使用Axure8.0制作拖動(dòng)滑塊的安全驗(yàn)證方法，借用一下網(wǎng)易的郵箱登錄場(chǎng)景：
這次教程的成品效果如下圖（演示鏈接>>）：
完成本次學(xué)習(xí)大概需要30-45分鐘。
邏輯原理：拖拽[滑塊]時(shí)，[進(jìn)度條]隨滑塊拉長（綠色進(jìn)度條）喊崖，當(dāng)滑塊觸及終點(diǎn)時(shí)，啟用[下一步zhi
第一步：準(zhǔn)備元件
1.動(dòng)態(tài)面板：用于制作滑塊荤懂，置頂層，命名為“滑塊”（尺寸：40*45）
2.滑動(dòng)條矩形框：底色透明塘砸，并附上文字节仿，置于第二層，命名為“滑動(dòng)條”（尺寸：310*45）
3.進(jìn)度條矩形框：填充顏色#7ABE8B掉蔬，置于第三層廊宪，命名為“進(jìn)度條”（尺寸：12*43）
4.熱區(qū)：熱區(qū)大小不限制，置于滑動(dòng)條尾部女轿，命名為“熱區(qū)”
5.按鈕：創(chuàng)建一個(gè)下一步按鈕箭启，大小隨心，設(shè)置好選中的樣式蛉迹，設(shè)置禁用傅寡，命名為“下一步”
第二步：設(shè)置交互
1.設(shè)置動(dòng)態(tài)面板內(nèi)容：在面板第一層（State1）設(shè)計(jì)矩形+箭頭；在第二層（State2）設(shè)計(jì)矩形+驗(yàn)證效果（這個(gè)驗(yàn)證效果我命名為“驗(yàn)證通過”）
2.實(shí)現(xiàn)拖動(dòng)滑塊效果：點(diǎn)擊“滑塊”動(dòng)態(tài)面板赏僧，添加屬性“拖動(dòng)時(shí)”大猛，設(shè)置條件：如果“滑塊”未觸及“熱區(qū)”
3.添加動(dòng)作（如果“滑塊”未觸及“熱區(qū)”）：
設(shè)置“拖動(dòng)時(shí)”，<移動(dòng)>滑塊為水平拖動(dòng)淀零，并設(shè)置左右邊界范圍挽绩。范圍根據(jù)元件所在坐標(biāo)而定。
4.再次點(diǎn)擊“滑塊”動(dòng)態(tài)面板唠亚，添加屬性“拖動(dòng)時(shí)”（此時(shí)為case2，即：如果“滑塊”已觸及“熱區(qū)”）持痰，則：
? 4.1設(shè)置文本--“滑動(dòng)條”富文本內(nèi)容為“加載中…”
? 4.2設(shè)置等待500秒
? 4.3再次設(shè)置文本--“滑動(dòng)條”富文本內(nèi)容為“通過驗(yàn)證”
? 4.4設(shè)置“滑塊”面板狀態(tài)為State2
? 4.5啟用“下一步”
5.設(shè)置拖動(dòng)結(jié)束時(shí)的交互：
如果“滑塊”沒有接觸到“熱區(qū)”灶搜，就移動(dòng)“滑塊”，讓他原路返回~~
做到這里，預(yù)覽效果是這樣的：
6.設(shè)置進(jìn)度條動(dòng)效
進(jìn)度條的填充效果患雏，其實(shí)是通過移動(dòng)滑塊時(shí)改變進(jìn)度條的長度去實(shí)現(xiàn)的鹏溯。
? 6.1首先選中滑塊，添加“移動(dòng)時(shí)”的交互淹仑，在移動(dòng)“滑塊”時(shí)丙挽，我們可以設(shè)置“進(jìn)度條”的尺寸，進(jìn)度條高度不變匀借，寬度隨著滑塊的移動(dòng)進(jìn)行變化颜阐。因此，我們要給寬度設(shè)置變量吓肋。
? 6.2點(diǎn)擊上一步中“寬”最右側(cè)的“fx”凳怨，添加兩個(gè)元件為局部變量。變量1（LVAR1）為“滑塊”蓬坡、變量2（LVAR2）為“進(jìn)度條”。然后上邊的公式我們輸入：[[LVAR1.x-LVAR2.x]]磅叛，意思是：“進(jìn)度條”的寬度=“滑塊”的x軸坐標(biāo)-“進(jìn)度條”的x軸坐標(biāo)
通過兩個(gè)x軸坐標(biāo)相減的差屑咳，就是進(jìn)度條要伸縮變化的寬度啦~！
寫到這里弊琴，整個(gè)交互就完成啦兆龙！
