axure動(dòng)態(tài)面板如何實(shí)現(xiàn)滑動(dòng)解鎖

axure動(dòng)態(tài)面板如何實(shí)現(xiàn)滑動(dòng)解鎖在制作app交互效果的時(shí)候，遇到手機(jī)滑動(dòng)解鎖，所以特意去學(xué)了axure怎么用動(dòng)態(tài)面板實(shí)現(xiàn)滑動(dòng)解鎖（也就是拖動(dòng)）的效果，這里和大家做一個(gè)分享。一、第1步：準(zhǔn)備相關(guān)的元件并命名手機(jī)圖片、手機(jī)壁紙（這里為了好看，可忽略）、軌跡矩形、滑塊圖標(biāo)、提示文本、變化矩形（尺寸隨著滑塊的移動(dòng)而變化），如下圖：建議：第一次建議用矩形，不要用圓角，下圖只是為了好看：二、第2步：調(diào)整元件的位置、尺寸、顏色調(diào)整軌跡矩形為半透明狀態(tài)，且邊框去掉；調(diào)整變化矩形的初始寬度為1；調(diào)整提示文本的顏色為灰色，調(diào)整后如下圖：三、第3步：設(shè)置交互1.選中滑塊，將其轉(zhuǎn)化為動(dòng)態(tài)面板然后添加【拖動(dòng)時(shí)】的交互用例，添加動(dòng)作【移動(dòng)】，選中當(dāng)前元件，設(shè)置【水平拖動(dòng)】，動(dòng)畫(huà)效果可選【線性】，這樣比較自然，時(shí)間可自行設(shè)置。如下圖：2.添加邊界即滑塊從哪里開(kāi)始，到哪里結(jié)束；這里滑塊從軌跡矩形的左側(cè)開(kāi)始，到軌跡矩形的右側(cè)結(jié)束；在設(shè)置邊界前，需點(diǎn)擊fx添加變量：添加完局部變量后，點(diǎn)擊插入變量或函數(shù)，插入剛剛設(shè)置的變量，輸入左側(cè)[[LVAR1.left]]，點(diǎn)擊確定：點(diǎn)擊確定后，按照同樣的方法添加右側(cè)的邊界，輸入[[LVAR1.right]],如下圖：3.設(shè)置變化矩形的尺寸點(diǎn)擊【設(shè)置文本】，選中元件【變化矩形】：因?yàn)樗某叽缡莻€(gè)變量，所以【寬】不能是定值，需要點(diǎn)擊右側(cè)的fx按鈕添加變量，它的寬=滑塊左側(cè)的x坐標(biāo)–軌跡矩形左側(cè)的x坐標(biāo)，變量設(shè)置如下圖所示：點(diǎn)擊確定后，設(shè)置錨點(diǎn)為左側(cè)，動(dòng)畫(huà)選為【線性】，時(shí)間設(shè)置為與滑塊拖動(dòng)的時(shí)間一致即可；如下圖所示；這樣設(shè)置完動(dòng)作之后，還需為這些動(dòng)作添加條件，點(diǎn)擊【添加條件】的按鈕，出現(xiàn)彈框如下圖，選擇“符合全部以下條件”，設(shè)置【滑塊左側(cè)】的【值】大于等于【軌跡左側(cè)】的【值】時(shí)，滑塊開(kāi)始拖動(dòng)：下圖為設(shè)置滑塊的變量：下圖為設(shè)置軌跡矩形的變量：下圖為添加完變量后，點(diǎn)擊確定即可：點(diǎn)擊條件設(shè)置的確定后為下圖，然后再點(diǎn)擊確定即可：4.設(shè)置【拖動(dòng)結(jié)束時(shí)】選中【動(dòng)態(tài)面板】即滑塊，添加【拖動(dòng)結(jié)束時(shí)】的交互用例，添加動(dòng)作【設(shè)置文本】，元件選擇為【向右滑動(dòng)解鎖的文本標(biāo)簽】，設(shè)置文本為【富文本】，然后點(diǎn)擊【編輯文本】，進(jìn)入到文本編輯彈框：以下為文本編輯，輸入文本為“解鎖成功”，然后點(diǎn)擊確定即可：下圖為點(diǎn)擊確定后的：設(shè)置完文本后，我們還需要添加一個(gè)拖動(dòng)結(jié)束的條件，即當(dāng)滑塊的右側(cè)x坐標(biāo)=軌跡矩形的右側(cè)x坐標(biāo)，這里的變量設(shè)置可參照上邊；以下為設(shè)置完的