Axure教程 動態(tài)面板拖動效果-函數(shù)DragX，DragY（11）

3 評論 30693 瀏覽 4 收藏 2 分鐘

本教程案例原型下載：動態(tài)面板拖動效果（函數(shù)DragX，DragY）

今天的教程示例如下：

如圖，是通過拖動任意一個面板，讓另外一個面板鏡像移動。

看似有些復(fù)雜的效果，其實非常簡單就實現(xiàn)了。

首先介紹兩個函數(shù)：

DragX：獲取被拖動面板左右瞬時挪動的距離；

DragY：獲取被拖動面板上下瞬時挪動的距離；

我們只需要在兩個動態(tài)面板里各寫上兩個動作就好了。

左面的面板，我們當(dāng)面板拖動時，將它設(shè)置為拖動狀態(tài)，這樣就能隨意拖動了；

然后，讓左面面板拖動的時候，右面的面板移動相對距離，因為我們是讓兩個面板上下方向（Y軸）同方向移動，而左右方向（X軸）朝相反的方向移動。所以在相對距離里面X軸我們要把DragX前面加上負(fù)號，這樣就是反方向移動了。Y軸就直接獲取DragY的函數(shù)值就可以了。

20-1

同理，我們在右邊的面板上，也寫上這兩個動作，這樣拖動右面板的的時候左面板也鏡像移動了。

20-2

好了，讓我們看看效果！

 

作者：小樓一夜聽春雨

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
Nairo
人人都是產(chǎn)品經(jīng)理內(nèi)容運營團隊
1408篇作品 38942837總閱讀量
12-05959 瀏覽
To B企業(yè)如何打造精簡的市場部門？
10-085126 瀏覽
全球流量Top50的“AI網(wǎng)站”出爐：C端用戶都愿意用AI干什么？
06-105156 瀏覽
抖音大主播們的「壕」催不動GMV了
06-077896 瀏覽
產(chǎn)品經(jīng)理的認(rèn)知構(gòu)建：一旦被向下兼容，注定難以向上突破
02-096181 瀏覽
產(chǎn)品經(jīng)理在數(shù)據(jù)分析過程中常用的Excel技能
評論
評論請登錄

  1. 為什么我做出來的只能在動態(tài)面板范圍內(nèi)拖動，

    來自廣東 回復(fù)

  2. 這個效果的實用性在哪里體現(xiàn)？

    來自廣東 回復(fù)