unity 實現輪盤方式的按鈕滾動效果

近期在專案中，策劃給出了一個需求就是，讓按鈕按照一個輪盤的軌跡進行滑動的效果，經過一番測試，實現了初步的效果。

我這裡區分了橫向滑動和縱向滑動，這裡以縱向滑動為例子進行示範，實現按鈕的滑動效果。

首先就是先進行位置初始化:

    /// <summary>
    ///從大到小排序,Y軸
    /// </summary>
    private Comparison<CircleScrollRectItemBase> ComparisionY =
        delegate (CircleScrollRectItemBase itemA, CircleScrollRectItemBase itemB)
        {
            if (itemA.transform.localPosition.y == itemB.transform.localPosition.y) return 0;
            return (itemA.transform.localPosition.y > itemB.transform.localPosition.y) ? -1 : 1;
        };


     public void Init()
     {
        if (null == listItems || listItems.Length == 0)
        {
            return;
        }

        if (itemPostions != null && itemPostions.Length > 0)
        {
            for (int i = 0; i < itemPostions.Length; i++)
            {
                listItems[i].transform.localPosition = itemPostions[i];
            }
        }

        //XY軸排序按不同方式排序，可以統一使用共同的函式
        if (horizontal)
        {
            //位置從小到大排序
            Array.Sort(listItems, ComparisionX);
        }
        else
        {
            //位置從大到小排序
            Array.Sort(listItems, ComparisionY);
        }
        //設定元素關係及固定位置
        itemPostions = new Vector3[listItems.Length];
        for (int i = 0; i < listItems.Length; ++i)
        {
            listItems[i].SetItemConfig(i, //set id
                                       listItems[(i + 1) % listItems.Length], //next item
                                       listItems[(i - 1 + listItems.Length) % listItems.Length]); //previous item

            itemPostions[i] = new Vector3(listItems[i].transform.localPosition.x,
                                            listItems[i].transform.localPosition.y,
                                              listItems[i].transform.localPosition.z);
            listItems[i].currPosIndex = i;
        }
        RefreshContentListLength();
        GetCurrPointItem();
        InitValue();
    }

滑鼠拖動時的更新程式碼：

    開始拖動設定拖拽狀態

    public virtual void OnBeginDrag(PointerEventData eventData)
    {
        BeginDrag(eventData);
    }

    public void BeginDrag(PointerEventData eventData)
    {
        dragging = true;
        needAdjust = false;
        dragStartPostion = eventData.position;
    }

    在拖動過程中更新item的位置

    /// <summary>
    /// 拖動中更新位置
    /// </summary>
    /// <param name="eventData"></param>
    public virtual void OnDrag(PointerEventData eventData)
    {
        Draging(eventData);
    }

    public void Draging(PointerEventData eventData)
    {
        if (horizontal)
        {
            if (ShiftListHorizontal(eventData.position - dragStartPostion))
            {
                dragStartPostion = eventData.position; //更新起始位置
            }
        }
        else
        {
            if (ShiftListVertical(eventData.position - dragStartPostion))
            {
                dragStartPostion = eventData.position; //更新起始位置
            }
        }
    }

    拖動結束，調整位置，重新整理指定介面

    /// <summary>
    /// 拖動結束
    /// </summary>
    /// <param name="eventData"></param>
    public virtual void OnEndDrag(PointerEventData eventData)
    {
        EndDrag(eventData);
    }

    public void EndDrag(PointerEventData eventData)
    {
        dragging = false;
        if (needAdjust)
        {
            if (horizontal)
            {
                AdjustLocationX();
            }
            else
            {
                AdjustLocationY();
            }
        }
        //在滑動結束  處理變換顏色和其他資訊
        GetCurrPointItem();
    }

  處理收拾滑動，還做了點選指定item ,自動跳轉過去

 

        //在這裡獲取所有型別的按鈕
        for (int i = 0; i < listItems.Length; i++)
        {
            GameObject go = listItems[i].gameObject;
            listItems[i].GetComponent<Button>().onClick.AddListener(() => 
            {
                AutoMoveAllItem(go);
            });            
        }
        
    /// <summary>
    /// 根據點選情況  自動移動所有的道具型別按鈕
    /// </summary>
    /// <param name="go"></param>
    private void AutoMoveAllItem(GameObject go)
    {

        //如果正在拖拽 不進行任何操作            
        if (dragging)
        {
            return;
        }

        //點選中間那個 不進行任何操作
        if (go.transform.localPosition.y == 0)
        {
            return;
        }

        //所有按鈕下一一格
        if (go.transform.localPosition.y > 0)
        {
            UpdateItemMovePos(2);
        }
        //上移
        else
        {
            UpdateItemMovePos(1);
        }
    }

下面是實現的效果：

工程地址：

連結：https://pan.baidu.com/s/1PsnR-nAesiw8Bx0mVHCv8A 
提取碼：0p4g

想了解更多unity相關資訊，可以關注下方公眾號或者新增QQ群：879354767