在Unity中制作一个简单的2D轮转图

   在游戏中，我们可以见到多种多样的轮转图，比如选装备，换装，选角等一些游戏都会用到，今天就制作一个简单地2D轮转图。

   首先我们要用到DOTween插件，自己手写也可以。

 一、我们要了解需要的属性

1.轮转图的数量

2.周长、半径、缩放最大值、最小值 减速度

3.两个集合，用来存储预制体，和预制体的Transfrom

首先我们先创建一个Image，将Image铺满全屏

然后创建一个Image预制体和一个Cyclogram2D脚本

将Cyclogram2D挂到Canvas下的Image上

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;
using TMPro;
using DG.Tweening;
public class Cyclogram2D : MonoBehaviour, IDragHandler, IEndDragHandler
{
    public TMP_InputField field;
    public Button button;
    public int num = 14; //个数
    public float space;
    public Image prefab; //预制体
    float l; //周长
    float r; //半径
    float ang; //每个角的弧度
    float allang; //移动的总弧度

    public float max = 1; //最大值
    public float min = 0.5f; //最小值
    public float dec = 10; //减速度
    List<GameObject> list = new List<GameObject>();
    List<Transform> sort = new List<Transform>();

这些就是我们需要用到的

在Start中 计算出周长和半径和弧度

 void Start()
    {
        l = num * (prefab.rectTransform.sizeDelta.x+space);
        r = l / (2 * Mathf.PI);
        ang = 2 * Mathf.PI / num;
        Move();
    }

然后封装一个move方法

在Move方法中将实例化出来的预制体添加到集合中，并且调整他们的大小位置。

 public void Move()
    {
        for (int i = 0; i < num; i++)
        {
            if (list.Count <= i)
            {
                list.Add(Instantiate(prefab.gameObject, transform));
                sort.Add(list[i].transform);
                list[i].GetComponentInChildren<TextMeshProUGUI>().text = i.ToString();
            }
            float x = Mathf.Sin(i * ang + allang) * r;
            float z = Mathf.Cos(i * ang + allang) * r;
            float p = (z + r) / (r + r);
            float scale = max * (1 - p) + min * p;
            list[i].transform.localPosition = new Vector3(x, 0, 0);
            list[i].transform.localScale = Vector3.one * scale;

        }
        sort.Sort((a, b) =>
        {
            if (a.localScale.x < b.localScale.x)
            {
                return -1;
            }
            else if (a.localScale.x == b.localScale.x)
            {
                return 0;
            }
            else
            {
                return 1;
            }
        });
        for (int i = 0; i < sort.Count; i++)
        {
            sort[i].SetSiblingIndex(i);
        }
    }

后面我给Sort集合做了个排序，因为img的层级不同，所以要重新设置一下

然后拖拽接口实现的方法中写我们的拖拽

  public void OnDrag(PointerEventData eventData)
    {
        allang -= eventData.delta.x / r;
        Move();
    }

然后拖拽结束之后肯定有一个惯性，然后判断距离我们最近的一个img将他的位置移动到正前方

 public void OnEndDrag(PointerEventData eventData)
    {
        float dis = eventData.delta.x;
        float time = Mathf.Abs(dis / dec);
        DOTween.To((a) =>
         {
             allang -= a / r;
             Move();
         }, dis, 0, time).OnComplete(() =>
         {
             float moveang = Mathf.Asin(sort[num - 1].localPosition.x / r); //弧度
             float movetime = Mathf.Abs(moveang * r / dec);
             DOTween.To((b) =>
               {
                   allang = b;
                   Move();
               }, allang, allang + moveang, movetime);
         });
    }

这样一个简单地2D轮转图就完成了