“滑動(dòng)驗(yàn)證”
此案例里的一些重點(diǎn)如下：
1、 動(dòng)態(tài)面板的運(yùn)用
2、 動(dòng)態(tài)面板寬度和內(nèi)部元件的關(guān)系理解
3、 動(dòng)態(tài)面板“拖動(dòng)”交互動(dòng)作的運(yùn)用
4、 動(dòng)態(tài)獲取數(shù)值及動(dòng)態(tài)計(jì)算的運(yùn)用
5、 添加動(dòng)作時(shí)，組合條件的運(yùn)用
好了，不廢話了，進(jìn)入正題，開始畫這個(gè)原型了
一、準(zhǔn)備工作
1、拖入矩形
畫一個(gè)驗(yàn)證完成前的背景，300×40（尺寸可根據(jù)你的喜好需求自行調(diào)整），輸入文字，調(diào)整到適合的樣式，起個(gè)便于識(shí)別的名稱（背景）
2、復(fù)制你剛剛畫的背景
改名為“狀態(tài)背景”，這個(gè)是驗(yàn)證完成后的背景；調(diào)整完樣式以后，將它轉(zhuǎn)換為動(dòng)態(tài)面板，名稱就叫（狀態(tài)層）
3、對(duì)齊剛剛的兩個(gè)原件
動(dòng)態(tài)面板背景一定要在你第一個(gè)背景的上層，然后將動(dòng)態(tài)面板的尺寸調(diào)整為40×40
4、拖入矩形畫操作用的滑塊
40×40，找兩個(gè)圖標(biāo)，雙箭頭和完成以后的對(duì)號(hào)（此處你可以用官方庫的圖標(biāo)），將圖標(biāo)分別寫上名稱（雙箭頭、完成），圖標(biāo)調(diào)整到合適尺寸后與矩形上下左右居中對(duì)齊，然后選中完成圖標(biāo)，設(shè)置為隱藏；然后將滑塊和圖標(biāo)編組后轉(zhuǎn)換為動(dòng)態(tài)面板，寫上名稱（按住拖動(dòng)）
將剛剛畫的“按住拖動(dòng)”原件對(duì)齊到背景的左側(cè)
好了，所有圖層都畫完了，如下；接下來我們添加交互動(dòng)作。
二、交互動(dòng)作
這里，我們所有的交互動(dòng)作，都添加在“按住拖動(dòng)”原件上，此處需要仔細(xì)越多理解
先看下所有動(dòng)作
1、 添加“拖動(dòng)時(shí)”動(dòng)作
【動(dòng)作1】
移動(dòng)“按住拖動(dòng)”，水平拖動(dòng)，動(dòng)畫“無”，添加界限“左側(cè)”大于原件“背景”的x邊距，“右側(cè)”小于原件“背景”的x邊距加寬度
【動(dòng)作2】
設(shè)置尺寸“狀態(tài)層”，寬度“運(yùn)算公式”原件“This”（當(dāng)前按住拖動(dòng)）的x邊距 減去 原件“背景”的x邊距 + 原件“This”的寬度，高度不變
Ok，做完以上動(dòng)作就可以試一下效果了，已經(jīng)可以拖動(dòng)了
但是沒有完成的效果，不急不急，接著來
2、 添加“拖動(dòng)結(jié)束時(shí)”動(dòng)作
這里會(huì)有兩組動(dòng)作，一組需要輸入條件
2.1、用例組1，條件如下
如果原件“This”的x邊距 大于等于 原件“背景”的x邊距加寬度減去原件“This”的1.1倍寬度（1.1倍是為了冗余出一些距離，便于手動(dòng)時(shí)觸發(fā)）則運(yùn)行
【動(dòng)作1】
顯示“完成”圖標(biāo)，隱藏“雙箭頭”圖標(biāo)
【動(dòng)作2】
禁用“按住滑動(dòng)”和“滑塊”，驗(yàn)證完畢了，就禁止再操作滑塊了
【動(dòng)作3】
設(shè)置文本“狀態(tài)背景”為“驗(yàn)證成功”
2.2、用例組2
不滿足用例組1條件時(shí)運(yùn)行
【動(dòng)作1】
移動(dòng)“按住滑動(dòng)”，回到拖動(dòng)前位置
【動(dòng)作2】
設(shè)置尺寸“狀態(tài)層”，寬度為原件“This”寬度，高度不變
三、最終效果
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。