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