您好,登錄后才能下訂單哦!
幸運轉盤主要是由兩部分組成——轉盤、指針,實現的方式也分兩種,轉盤動或者指針動,不過兩者的原理都是一樣的,這里就以指針動做了一個項目級的demo(由于后面的圓盤中間的那條豎線有點往左偏,所以導致那些圣誕老人的顯示有些偏移)。< Demo 下載 >
在項目開發中,一般這個功能的實現過程是:
1、當點擊開始的時候,轉盤開始動, 同時向服務端發送協議;
2、服務端返回數據(前端計算好對應的角度),當轉盤旋轉一定時間后開始減速直至對應角度
當然也可以等服務端返回數據后再開始模擬旋轉過程,但是由于受網絡的影響,這一過程可能會較長,表現效果不是很好。
關于Unity的旋轉,主要有下面幾類接口:Transform.Rotate(), Transform.RotateAround(),Transform.rotation, Transform.eulerAngles。 其中 Rotate() 和 RotateAround() 都是同一類接口(里面的具體重載這里就不細說了),都是指從當前位置做指定角度的偏移,而 rotation 和 eulerAngles 都是直接賦值的字段,rotation 是一個四元數類型, eulerAngles 則是一個歐拉角。很顯然,我們在做旋轉的時候不需要關心具體角度,使用 Rotate() 類型做定幀偏移是最合適的,通過設置偏移的角度就能實現變速轉動,比較適合轉盤開始階段的加速過程和中間的勻速過程,而當我們知道停止的具體角度時,則可已利用差值運算能精準地實現減速過程并最終停到我們需要的位置。但是有一點需要注意,Unity里面角度是逆時針計算的,而我們日常生活中一般習慣于順時針,所以,最終的角度還需要取反一下。廢話不多說,見代碼:
using UnityEngine; using UnityEngine.UI; public class LuckyTurntable : MonoBehaviour { public enum State { None, //待機狀態 Start, //加速階段 Prepared, //等待數據階段 End, //減速階段 } public delegate void OnFinishCallback(); private event OnFinishCallback OnFinish; /// <summary> /// 設置完成時的回調 /// </summary> /// <param name="onFinish"></param> public void SetOnFinishCallback(OnFinishCallback onFinish) { OnFinish += onFinish; } /// <summary> /// 最大速度 /// </summary> public int velocity = 3000; public Transform node; public Button btnStart; public Button btnStop; public Button btnRandom; public InputField input; private State _state; /// <summary> /// 轉盤的狀態 /// </summary> public State CurState { get { return _state; } private set { _state = value; switch (value) { //不同階段限制各按鈕的點擊狀態 case State.None: btnStart.enabled = true; btnStop.enabled = false; btnRandom.enabled = false; break; case State.Start: btnStart.enabled = false; btnStop.enabled = true; btnRandom.enabled = true; break; case State.Prepared: case State.End: btnStart.enabled = false; btnStop.enabled = false; btnRandom.enabled = false; break; } } } private float _endAngle = 0f; /// <summary> /// 最終停止的角度[0, 360] /// </summary> public float EndAngle { get { return _endAngle; } set { _endAngle = Mathf.Abs(value); print("End Angle: " + value); _endAngle = _endAngle % 360; //將角度限定在[0, 360]這個區間 _endAngle = -_endAngle - 360 * 2; //多N圈并取反,圈數能使減速階段變得更長,顯示更自然,逼真 } } /// <summary> /// 加速持續時間 /// </summary> private readonly float AcceleateTime = 1f; /// <summary> /// 減速前的最短持續時間 /// </summary> private float _minTime = 3.0f; /// <summary> /// 角度緩存 /// </summary> private float _tmpAngle = 0f; /// <summary> /// 時間統計 /// </summary> private float _time; /// <summary> /// 速度變化因子 /// </summary> private float _factor; private void Start() { CurState = State.None; btnStart.onClick.AddListener(OnStartClick); btnStop.onClick.AddListener(OnStopClick); btnRandom.onClick.AddListener(OnRandomClick); } private void Update() { if (CurState == State.None) return; _time += Time.deltaTime; if (CurState == State.End) { //通過差值運算實現精準地旋轉到指定角度(球型插值無法實現大于360°的計算) float k = 2f; //如果嫌減速太慢,可以加個系數修正一下 _tmpAngle = Mathf.Lerp(_tmpAngle, EndAngle, Time.deltaTime * k); //這里只存在一個方向的旋轉,所以不存在歐拉角萬向節的問題,所以使用歐拉角和四元數直接賦值都是可以的 node.rotation = Quaternion.Euler(0, 0, _tmpAngle); //node.eulerAngles = new Vector3(0, 0, _tmpAngle); if (1 >= Mathf.Abs(_tmpAngle - EndAngle)) { CurState = State.None; if (null != OnFinish) { OnFinish(); OnFinish = null; } } } else { //利用一個速度因子實現變加速的過程 _factor = _time / AcceleateTime; _factor = _factor > 1 ? 1 : _factor; node.Rotate(Vector3.back, _factor * velocity * Time.deltaTime, Space.Self); } //當收到數據之后并且旋轉了一定時間后開始減速 if (CurState == State.Prepared && _time > _minTime) { CurState = State.End; _tmpAngle = GetCurClockwiseAngle(); } } /// <summary> /// 將當前指針的歐拉角轉換成順時針統計角度 /// </summary> /// <returns></returns> private float GetCurClockwiseAngle() { //由于讀取到的值是[0, 180] U [-180, 0],左邊由0至180遞增,右邊由180轉變成-180,然后遞增至0,所以需要轉相應的轉換 return (-1) * (360 - node.eulerAngles.z) % 360; } private void OnStartClick() { CurState = State.Start; _time = 0; } /// <summary> /// 讀取輸入框中的角度并停止 /// </summary> private void OnStopClick() { try { EndAngle = float.Parse(input.text); } catch { EndAngle = 0f; } CurState = State.Prepared; } /// <summary> /// 隨機一個角度并停止 /// </summary> private void OnRandomClick() { EndAngle = UnityEngine.Random.Range(0f, 360f); CurState = State.Prepared; } }
功能代碼基本都在上面了,如果想要Demo的話可 前往下載 。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。