Axure教程 動態面板拖動效果-函數DragX，DragY（11）

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

本教程案例原型下載：動態面板拖動效果（函數DragX，DragY）

今天的教程示例如下：

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

看似有些復雜的效果，其實非常簡單就實現了。

首先介紹兩個函數：

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

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

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

左面的面板，我們當面板拖動時，將它設置為拖動狀態，這樣就能隨意拖動了；

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

20-1

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

20-2

好了，讓我們看看效果！

 

作者：小樓一夜聽春雨

更多精彩內容，請關注人人都是產品經理微信公眾號或下載App
Nairo
人人都是產品經理內容運營團隊
1408篇作品 38891569總閱讀量
11-01947 瀏覽
5大習慣助力產品開發周期加速！
08-167310 瀏覽
設計復盤——接到需求后如何開始設計
02-221829 瀏覽
長視頻的“漲價藥”保質期還有多久？
04-183604 瀏覽
深入討論 DRD：從交互模型解析設計需求及關系
01-068677 瀏覽
23個支付思維分享
評論
評論請登錄

  1. 為什么我做出來的只能在動態面板范圍內拖動，

    來自廣東 回復

  2. 這個效果的實用性在哪里體現？

    來自廣東 回復