Axure拖動效果

動態面板是Axure中唯一一個能夠被拖動的元件。任何元件想要有被拖動的效果,都要放置在動態面板中。

如果需要讓一個動態面板被拖動,必須在動態面板的觸發事件【拖動時】中添加用例動作,【移動】動態面板為某一種拖動行為。動態面板的拖動行為包括:拖動(自由拖動)、水平拖動和垂直拖動

工具/原料

Axure7.0

方法/步驟

我們製作一個能夠水平拖動的滑塊,並且在拖動時不得超出標尺兩端。

我們用矩形做一個標尺,並在兩端分別用矩形做好左邊界「left」和右邊界「right」,然後用矩形改變為圓形並轉為動態面板,作為滑塊「slider」。當拖動滑塊時,滑塊能夠水平移動。並且在移動過程中,如果觸碰到兩端邊界要停留在指定的位置上。

首先判斷拖動時是否超出了邊界,如果超出了讓滑塊移動到指定位置上。

以左側邊界為例,矩形「left」的X軸坐標為150,寬度為10,如果滑塊接觸到左側邊界的矩形,我們就要讓滑塊移動到X軸160的位置上。因為是水平移動,Y軸坐標不會改變,仍然是當前滑塊的Y軸坐標20。而滑塊接觸到右側邊界時,要移動到的位置是右側邊界矩形的X軸坐標-滑塊的寬度。右側邊界矩形「right」的X軸坐標為560,減去滑塊的寬度20,結果是540。Y軸的坐標同樣是20

了解了邊界限制滑塊的原理,我們就來添加判斷和相應的用例動作。仍以左側邊界為例,雙擊動態面板「slider」的【拖動時】事件打開用例編輯界面,然後點擊【添加條件】,設置條件內容為【元件範圍】「slider」接觸【元件範圍】「left」

設置滿足條件時的動作為【移動】「slider」,移動【到絕對位置】x軸「160」y軸「20」

設置當滿足條件【元件範圍】「slider」接觸【元件範圍】「right」時,【移動】「slider」【到絕對位置】x軸「540「y軸」20「。

然後我們讓滑塊能夠被拖動。雙擊動態面板的觸發事件【拖動時】,添加用例動作【移動】,勾選動態面板「slider」或者「當前元件」,選擇【移動】列表中的選項「水平拖動」

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場