Unity中通過DoTween實現轉盤效果

通過轉盤的數量,來計算需要旋轉到的角度我這里是有 12個 旋轉的位置, 故 360/12 = 30,所以,以30度為一個單位,進行偏移計算..

實現方式如下:

DrawRotateScr腳本:

 

/*********************************************
 *
 *   Title: 大轉盤的實現
 *
 *   Description: 通過轉盤的數量,來計算需要旋轉到的角度.我這里是有 12個 旋轉的位置, 故 360/12 = 30
 *                所以,以30度為一個單位,進行偏移計算
 *
 *   Author: 自律
 *
 *   Date: 2019.4.1
 *
 *   Modify: 
 * 
 *********************************************/
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;

public class DrawRotateScr : MonoBehaviour
{
    /// <summary>
    /// Arrow圖片
    /// </summary>
    Image arrowImg;
    /// <summary>
    /// 開始按鈕
    /// </summary>
    Button drawBtn;
    /// <summary>
    /// Light父物體
    /// </summary>
    Transform lightCircle;
    /// <summary>
    /// 停留的坐標激活組件 從而達到漸隱漸現的效果
    /// </summary>
    Transform lightIndex;
    /// <summary>
    /// 是否開始旋轉
    /// </summary>
    bool isStart = false;
    /// <summary>
    /// 箭頭歐拉角
    /// </summary>
    float angle;
    /// <summary>
    /// 旋轉角度 30° - 330°
    /// </summary>
    float rotateAngle;
    /// <summary>
    /// 最后的偏移的角度
    /// </summary>
    float lastAngle;

    void Start()
    {
        //獲取組件
        arrowImg = transform.Find("Arrow").GetComponent<Image>();
        drawBtn = transform.Find("DrawBtn").GetComponent<Button>();
        lightCircle = transform.Find("LightCircle");
        drawBtn.onClick.RemoveAllListeners();
        //綁定事件
        drawBtn.onClick.AddListener(OnTest);
    }

    void OnTest()
    {
        float curRotateAngle = 0f;
        curRotateAngle = SetRotateAngle(150);
        StartRotate(curRotateAngle);
    }


    void Update()
    {
        if (!isStart)
        {
            return;
        }
        //設置歐拉角
        angle = arrowImg.transform.localEulerAngles.z;
        //設置旋轉角
        rotateAngle = (int)((angle + 15) / 30) * 30;
        //激活動畫組件
        lightIndex = lightCircle.Find("Light" + rotateAngle);
        //如果到達了該目標
        if (lightIndex)
        {
            //設置激活
            lightIndex.gameObject.SetActive(true);
            //如果沒有獲取到這個組件,就添加
            if (!lightIndex.GetComponent<LightAnimate>())
            {
                lightIndex.gameObject.AddComponent<LightAnimate>();
            }
            //開啟動畫
            lightIndex.GetComponent<LightAnimate>().StartAnimate();
        }
    }
    /// <summary>
    /// 開始旋轉
    /// </summary>
    /// <param name="_rotateAngle">傳入的旋轉角度.</param>
    void StartRotate(float _rotateAngle)
    {
        if (isStart)
        {
            return;
        }
        isStart = true;
        float rotateTemp = _rotateAngle;
        //獲取 設置偏移的 特效 點亮
        //持續時間
        float duration = 4.0f;
        //重復的旋轉次數
        int repeatCount = 4;
        //DoTween 旋轉 順時針旋轉
        Tween tweenRotate = arrowImg.transform.DORotate(new Vector3(0, 0, -(rotateTemp + 360 * repeatCount)), duration, RotateMode.FastBeyond360);
        //重置時間
        Invoke("RotateComplete", 6f);
    }

    /// <summary>
    /// 旋轉完成重置
    /// </summary>
    void RotateComplete()
    {
        isStart = false;
        Tween tweenReset = arrowImg.transform.DORotate(new Vector3(0, 0, 0), .4f, RotateMode.FastBeyond360);
    }
    /// <summary>
    /// 設置偏轉角所要停留的位置
    /// </summary>
    /// <returns>The rotate angle.</returns>
    /// <param name="value">Value.</param>
    float SetRotateAngle(int value)
    {
        float rotateAngle = .0f;
        switch (value)
        {
            case 0:
                {
                    rotateAngle = 0.0f;
                }
                break;
            case 330:
                {
                    rotateAngle = 330.0f;
                }
                break;
            case 300:
                {
                    rotateAngle = 300.0f;
                }
                break;
            case 270:
                {
                    rotateAngle = 270.0f;
                }
                break;
            case 240:
                {
                    rotateAngle = 240.0f;
                }
                break;
            case 210:
                {
                    rotateAngle = 210.0f;
                }
                break;
            case 180:
                {
                    rotateAngle = 180.0f;
                }
                break;
            case 150:
                {
                    rotateAngle = 150.0f;
                }
                break;
            case 120:
                {
                    rotateAngle = 120.0f;
                }
                break;
            case 90:
                {
                    rotateAngle = 90.0f;
                }
                break;
            case 60:
                {
                    rotateAngle = 60.0f;
                }
                break;
            case 30:
                {
                    rotateAngle = 30.0f;
                }
                break;
            default:
                break;
        }
        return rotateAngle;
    }
}

 

LightAnimate腳本:

 

/*********************************************
 *
 *   Title: Light特效
 *
 *   Description: 動態綁定,當開始旋轉的時候,做一個漸隱漸現的效果
 *
 *   Author: 自律
 *
 *   Date: 2019.4.1
 *
 *   Modify: 
 * 
 *********************************************/
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class LightAnimate : MonoBehaviour
{
    bool isStare = false;
    Image lightImage;

    void Awake ()
    {
        lightImage = GetComponent<Image> ();
    }

    /// <summary>
    /// 開始動畫
    /// </summary>
    public void StartAnimate ()
    {
        //初始值
        lightImage.color = new Color (lightImage.color.r, lightImage.color.g, lightImage.color.b, 1.0f);
    }

    void Update ()
    {
        if (lightImage.color.a <= 0.0f)
            return;
        float alpha = lightImage.color.a - 0.05f;
        //漸隱效果
        if (alpha <= 0)
            alpha = 0;
        lightImage.color = new Color (lightImage.color.r, lightImage.color.g, lightImage.color.b, alpha);
    }
}

 

UI上: 

這里需要注意的是Arrow中的Pivot,正常來說,Pivot是通過中心來旋轉,這里我們要將它調整為以底部基准來進行旋轉..將Unity設置為Pivot模式即可調整..

點擊運行即可

Git鏈接 :https://github.com/KinJin-Ristina/Circle-Rotate/tree/master