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

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

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

一、效果展示

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

二、制作教程

1. 材料準(zhǔn)備

這個(gè)模板的材料比較簡(jiǎn)單，包括：

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

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

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

2. 交互制作

1）輪盤的拖動(dòng)效果

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

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

2）移動(dòng)指定元件的效果

輪盤拖動(dòng)完成之后，我們?cè)鯓右苿?dòng)指定元件，根據(jù)我們輪盤拖動(dòng)的方位像指定方向移動(dòng)呢？這里面其實(shí)主要涉及數(shù)學(xué)的問(wèn)題，我們可以通過(guò)小圓拖動(dòng)時(shí)的位置和原來(lái)的位置做比較，相當(dāng)于通過(guò)xy坐標(biāo)來(lái)判斷移動(dòng)的位置。

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

那因?yàn)橥蟿?dòng)時(shí)的交互是每時(shí)每刻都在變動(dòng)的，所以案例中是用0.02倍，當(dāng)然這個(gè)你們也可以根據(jù)需要，或者移動(dòng)的速度來(lái)設(shè)置，可以通過(guò)修改倍數(shù)值，從而改變移動(dòng)的快慢。

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

因?yàn)橥蟿?dòng)時(shí)的交互是每時(shí)每刻都在變動(dòng)的，所以我們要寫一個(gè)循環(huán)時(shí)間來(lái)不斷觸發(fā)這個(gè)循環(huán)，一般實(shí)現(xiàn)循環(huán)有很多種方法：

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

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

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

那以上就是本期教程的全部?jī)?nèi)容，感興趣的同學(xué)們可以動(dòng)手試試哦，感謝您的閱讀，我們下期見(jiàn)。