Axure RP教程 Axure如何做出拖動(dòng)效果

作者：怪獸日期：2018-01-19

1.我們制作一個(gè)能夠水平拖動(dòng)的滑塊，并且在拖動(dòng)時(shí)不得超出標(biāo)尺兩端。我們用矩形做一個(gè)標(biāo)尺，并在兩端分別用矩形做好左邊界“left”和右邊界“right”，然后用矩形改變?yōu)閳A形并轉(zhuǎn)為動(dòng)態(tài)面板，作為滑塊“slider”。當(dāng)拖動(dòng)滑塊時(shí)，滑塊能夠水平移動(dòng)。并且在移動(dòng)過(guò)程中，如果觸碰到兩端邊界要停留在指定的位置上。

首先判斷拖動(dòng)時(shí)是否超出了邊界，如果超出了讓滑塊移動(dòng)到指定位置上。

以左側(cè)邊界為例，矩形“left”的X軸坐標(biāo)為150，寬度為10，如果滑塊接觸到左側(cè)邊界的矩形，我們就要讓滑塊移動(dòng)到X軸160的位置上。因?yàn)槭撬揭苿?dòng)，Y軸坐標(biāo)不會(huì)改變，仍然是當(dāng)前滑塊的Y軸坐標(biāo)20。而滑塊接觸到右側(cè)邊界時(shí)，要移動(dòng)到的位置是右側(cè)邊界矩形的X軸坐標(biāo)-滑塊的寬度。右側(cè)邊界矩形“right”的X軸坐標(biāo)為560，減去滑塊的寬度20，結(jié)果是540。Y軸的坐標(biāo)同樣是20

2.了解了邊界限制滑塊的原理，我們就來(lái)添加判斷和相應(yīng)的用例動(dòng)作。仍以左側(cè)邊界為例，雙擊動(dòng)態(tài)面板“slider”的【拖動(dòng)時(shí)】事件打開(kāi)用例編輯界面，然后點(diǎn)擊【添加條件】，設(shè)置條件內(nèi)容為【元件范圍】“slider”接觸【元件范圍】“left”

3.設(shè)置滿足條件時(shí)的動(dòng)作為【移動(dòng)】“slider”，移動(dòng)【到絕對(duì)位置】x軸“160”y軸“20”

4.設(shè)置當(dāng)滿足條件【元件范圍】“slider”接觸【元件范圍】“right”時(shí)，【移動(dòng)】“slider”【到絕對(duì)位置】x軸“540“y軸”20“。

然后我們讓滑塊能夠被拖動(dòng)。雙擊動(dòng)態(tài)面板的觸發(fā)事件【拖動(dòng)時(shí)】，添加用例動(dòng)作【移動(dòng)】，勾選動(dòng)態(tài)面板“slider”或者“當(dāng)前元件”，選擇【移動(dòng)】列表中的選項(xiàng)“水平拖動(dòng)”