輪盤控制元件移動是一種通過輪盤來控制元件位置或參數(shù)的方式，廣泛地應(yīng)用于各種設(shè)備和系統(tǒng)中。本文作者分享了在Axure中，制作一個能通過輪盤控制元件移動的原型模板，一起來看一下吧。

輪盤控制元件移動是一種通過輪盤來控制元件位置或參數(shù)的方式。輪盤通常是一個圓形或半圓形的旋轉(zhuǎn)控制器，用戶可以通過旋轉(zhuǎn)輪盤來實現(xiàn)元件的移動。輪盤滑動控制元件移動廣泛應(yīng)用于各種設(shè)備和系統(tǒng)中，例如移動端操作內(nèi)的游戲，通過旋轉(zhuǎn)輪盤，可以精確地控制元件在水平或垂直方向上的位置，如游戲中的角色移動或窗口的滾動。

今天作者就教大家如何在Axure中，制作一個能通過輪盤控制元件移動的原型模板。

一、效果展示

1. 可以拖動輪盤的方式，讓指定元件（兔子）朝著對應(yīng)方向移動
2. 可以控制移動的邊界，讓指定元件即使一致超值某一方向移動，也不會移出極限

二、制作教程

1. 材料準備

這個模板的材料比較簡單，包括：

1、背景圖片，這個可以根據(jù)自身需求設(shè)置；

2、被移動的元件，案例中是用兔子的圖片，你們也可以指定對應(yīng)的元件；

3、輪盤：輪盤我們用Axure原生元件制作即可，其實就是兩個圓，頂部是白色的小圓，底部是黑色半透明的中圓。這里我們需要將小圓轉(zhuǎn)為動態(tài)面板，因為axure里面只有動態(tài)面板有拖動事件，所以我們要將小圓轉(zhuǎn)為動態(tài)面板。另外，我們還需要一個和小圓一樣大小的圓，放在和小圓一樣的中心的，默認隱藏即可，后續(xù)會交互計算中會用到。

2. 交互制作

1）輪盤的拖動效果

我們首先要制作白色圓點能在黑色底盤上拖動的效果，我們用移動的時間，設(shè)置當前元件跟隨鼠標的拖動而移動。移動的話我們也是有距離限制的，我們可以設(shè)置邊界，讓白色小圓不超出黑色底盤的上下左右邊界。

在輪盤拖動結(jié)束時，我們要讓白色小圓回到原來的地方，就是黑色底盤的中心點，這里我們同樣用到移動的事件，里面選擇回到拖動前的位置，這樣他就自動復原了。

2）移動指定元件的效果

輪盤拖動完成之后，我們怎樣移動指定元件，根據(jù)我們輪盤拖動的方位像指定方向移動呢？這里面其實主要涉及數(shù)學的問題，我們可以通過小圓拖動時的位置和原來的位置做比較，相當于通過xy坐標來判斷移動的位置。

例如原點位置為0,0，拖動后的位置是100,50，那么就是說朝右方移動了100的矩形，朝上方移動了50的距離，我們通過圓點和拖動時的點位，亮點就可以確定一直線方向，這樣我們將移動的矩形用指定倍速設(shè)置到指定元件即可。

那因為拖動時的交互是每時每刻都在變動的，所以案例中是用0.02倍，當然這個你們也可以根據(jù)需要，或者移動的速度來設(shè)置，可以通過修改倍數(shù)值，從而改變移動的快慢。

如果需要控制指定元件移動的范圍，同樣我們我們也可以增加上下左右的邊界來限制。

因為拖動時的交互是每時每刻都在變動的，所以我們要寫一個循環(huán)時間來不斷觸發(fā)這個循環(huán)，一般實現(xiàn)循環(huán)有很多種方法：

一般是用動態(tài)面板來實現(xiàn)的，通過設(shè)置面板狀態(tài)的交互，設(shè)置面板狀態(tài)到下一個，勾選循環(huán)，在面板狀態(tài)改變時，增加需要重復循環(huán)的交互，這樣就能實現(xiàn)不斷的循環(huán)對應(yīng)的交互事件。

我們也可以簡單的來事件，通過等待事件和觸發(fā)事件，例如等待0.01秒，然后觸發(fā)上面的交互，從而形成循環(huán)

這樣我們就制作完成了輪盤控制元件移動的原型模板了，下次使用時，只需要在更換移動的素材，修改一下對應(yīng)的邊界，即可自動實現(xiàn)輪盤移動的效果，是不是很方便呢？

那以上就是本期教程的全部內(nèi)容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。