Unity幸運轉輪實現

2019-11-09 17:17:42

字體：大中小

來源：轉載

供稿：網友

本來針對個人應用修改較多，請閱讀參考鏈接：孫廣東 http://blog.csdn.net/u010019717/article/details/51902837

簡介： 現如今很多的游戲都有幸運轉輪活動，有的是特效按順序一次播放形成旋轉效果(如王者榮耀),有的是轉動輪盤或者指針，這里講的是后一種(如圖)。幸運轉盤

1.場景設置 轉輪： -美術做好UI界面，確保幸運輪的每個部分大小一致。 -在幸運輪邊緣建立圓形的小碰撞器并將它們作為幸運輪的子游戲物體。

箭頭： 給箭頭添加BoxCollider2D和HingeJoint2D組件，和下面的腳本。

注：Hinge Joint鉸鏈官方文檔https://docs.unity3d.com/Manual/class-HingeJoint.html

2.編碼：

using UnityEngine; using System.Collections; using System.Collections.Generic; public class SpinWheel : MonoBehaviour { public List<AnimationCurve> animationCurves; //動畫曲線列表 PRivate bool spinning; //是否在旋轉中 private float anglePerItem; //每個item角度(360/item個數) private int randomTime; //旋轉時間 private int itemNumber; //item個數 private bool rotateCommand = false; //旋轉命令 private int targetItemIndex; //目標item索引(從0開始) private bool CW = true; //是否順時針 private System.Action EndCallBack; //旋轉結束回調 void Start(){ spinning = false; //避免沒有預設曲線報錯(這里建一條先慢再快再慢的動畫曲線) if (animationCurves== null) { Keyframe[] ks = new Keyframe[3]; ks[0] = new Keyframe(0, 0); ks[0].inTangent = 0; ks[0].outTangent = 0; ks[1] = new Keyframe(0.5f,0.5f); ks[1].inTangent = 1; ks[1].outTangent = 1; ks[2] = new Keyframe(1,1); ks[2].inTangent =0; ks[2].outTangent =0; AnimationCurve animationCurve = new AnimationCurve(ks); animationCurves.Add(animationCurve); } } /// <summary> /// 開啟旋轉調用(外部調用) /// </summary> /// <param name="itemNum">item總個數</param> /// <param name="itemIndex">目標item索引，從0開始</param> /// <param name="cw">是否順時針</param> /// <param name="callback">結束回調</param> public void RotateUp(int itemNum, int itemIndex, bool cw, System.Action callback) { itemNumber = itemNum; anglePerItem = 360 / itemNumber; targetItemIndex = itemIndex; CW = cw; EndCallBack = callback; rotateCommand = true; } void Update () { if (rotateCommand && !spinning) { randomTime = Random.Range (6,8); //隨機獲取旋轉全角的次數 float maxAngle = 360 * randomTime + (targetItemIndex * anglePerItem); //需要旋轉的角度 rotateCommand = false; StartCoroutine (SpinTheWheel (randomTime, maxAngle)); } } IEnumerator SpinTheWheel (float time, float maxAngle) { spinning = true; float timer = 0.0f; float startAngle = transform.eulerAngles.z; //減去相對于0位置的偏移角度 maxAngle = maxAngle - GetFitAngle(startAngle); //根據順時針逆時針不同，不同處理 int cw_value = 1; if (CW) { cw_value = -1; } int animationCurveNumber = Random.Range (0, animationCurves.Count); //獲取一個隨機索引 while (timer < time) { //計算旋轉,動畫曲線的Evaluate函數返回了給定時間下曲線上的值：從0到1逐漸變化，速度又每個位置的切線斜率決定。 float angle = maxAngle * animationCurves [animationCurveNumber].Evaluate (timer / time) ; //得到的angle從0到最大角度逐漸變化速度可變,讓給加到旋轉物角度上實現逐漸旋轉速度可變 transform.eulerAngles = new Vector3 (0.0f, 0.0f, cw_value *angle + startAngle); timer += Time.deltaTime; yield return 0; } //避免旋轉有誤，最終確保其在該在的位置 transform.eulerAngles = new Vector3 (0.0f, 0.0f, cw_value *maxAngle + startAngle); //執行回調 if (EndCallBack != null) { EndCallBack(); EndCallBack = null； } spinning = false; } //獲取相對角度 private float GetFitAngle(float angle) { if (angle > 0) { if (angle - 360 > 0) { return GetFitAngle(angle - 360); } else { return angle; } } else { if (angle + 360 < 0) { return GetFitAngle(angle + 360); } else { return angle; } } }}

注解： 這里使用AnimationCurve動畫曲線來控制輪子轉動，設置不同的曲線類型可以實現不同的效果。 1/ 可以先前把腳本放到物體上，預設好曲線 這里寫圖片描述

2/ 也可以代碼動態創建曲線 因為官方沒有預設曲線demo，所以要自己創建，常用3種如下：

No.1 先慢再快再慢

Keyframe[] ks = new Keyframe[3];ks[0] = new Keyframe(0, 0);ks[0].inTangent = 0;ks[0].outTangent = 0;ks[1] = new Keyframe(0.5f,0.5f);ks[1].inTangent = 1;ks[1].outTangent = 1;ks[2] = new Keyframe(1,1);ks[2].inTangent =0;ks[2].outTangent =0;AnimationCurve animationCurve = new AnimationCurve(ks);

得到曲線：這里寫圖片描述

No.2 先慢再快

Keyframe[] ks = new Keyframe[2];ks[0] = new Keyframe(0, 0);ks[0].inTangent = 0;ks[0].outTangent = 0;ks[1] = new Keyframe(1,1);ks[1].inTangent = 2;ks[1].outTangent = 2;AnimationCurve animationCurve = new AnimationCurve(ks);

得到曲線：這里寫圖片描述

No.3 先快再慢

Keyframe[] ks = new Keyframe[2];ks[0] = new Keyframe(0, 0);ks[0].inTangent = 2;ks[0].outTangent = 2;ks[1] = new Keyframe(1,1);ks[1].inTangent = 0;ks[1].outTangent = 0;AnimationCurve animationCurve = new AnimationCurve(ks);

得到曲線：這里寫圖片描述