unity UGUI无限循环滚动居中

最近在做一个ui循环滚动的功能,网上找了半天脚本感觉都和我实际需求不太符合,自己花费一些时间完成了这个功能记录一下。下面开始正题
,我是采用unity自带组件Scroll View来完成,首先设置Scroll View如下图
unity UGUI无限循环滚动居中_第1张图片
面板层级结构如下
层级面板结构
然后创建一个预制体,预制体需要锚点到左侧中心点,设置为起始点,设置完成后把这个图片随便放个层级不要在本层级,不要影响后面生成。
unity UGUI无限循环滚动居中_第2张图片
然后开始编写代码,我就直接贴了,不懂可以看一下注释,因为我是水平所以判断用的都是x轴,如果你是垂直你改成y稍微修改一下代码就可以了,差别应该不大。

using DG.Tweening;
using System.Collections;
using System.Collections.Generic;

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class LoopScroll : MonoBehaviour,IBeginDragHandler  
{
    public List<Sprite> photographList;
    [Header("中心点")]
    public Transform Centre;
    private Vector3 startPos, endPos;
    [Header("预制体")]
    public GameObject item;
    [Header("预制体父级")]
    public Transform Content;
    [HideInInspector]
    public List<Transform> itemList;
    bool isDrag = false, isAdsorption;
    float MaxDis, MinDis;
    [Header("间隔距离")]
    public float SpacingDistance = 100;
    [Header("缩放倍数")]
    public float Scale =1;
    Transform tempCentre;   
    public Text tempCentreName;
    private void Awake()
    {
        instantiationItem();
    }
    void Start()
    {            
        isDrag = true;
        //设置第一个坐标与最后一个坐标位置
        startPos = itemList[0].position;
        endPos = itemList[itemList.Count - 1].position;
        startPos.x -= itemList[0].GetComponent<RectTransform>().rect.width /2;
        endPos.x += itemList[0].GetComponent<RectTransform>().rect.width / 2;
      
        //求出最远距离
        for (int i = 0; i < itemList.Count; i++)
        {
            var dis = Vector3.Distance(itemList[i].position, Centre.position);
            if (dis > MaxDis)
            {
                MaxDis = dis;
                MinDis = dis;
            }
        }
    
    }
    void instantiationItem()//生成预制体设置初始坐标
    {
        for (int i = 0; i < photographList.Count; i++)
        {
            var t = Instantiate(item, Content);
            t.GetComponent<Image>().sprite = photographList[i];
            t.name = photographList[i].name;
            var pos = new Vector3((t.GetComponent<RectTransform>().rect.width + SpacingDistance) * (i), 0, 0);
            pos.x += t.GetComponent<RectTransform>().rect.width;
            t.GetComponent<RectTransform>().anchoredPosition = pos;
            itemList.Add(t.transform);
        }

    }
    void Islimit() //设置坐标切换与列表内元素与面板层级切换 保证层级与列表内数据同步
    {
        if (isDrag)
        {
            for (int i = 0; i < itemList.Count; i++)
            {
                if (itemList[i].position.x < startPos.x)
                {
                    itemList[i].position = itemList[itemList.Count - 1].position + new Vector3(SpacingDistance + itemList[0].GetComponent<RectTransform>().rect.width, 0, 0);
                    var temp = itemList[i];
                    itemList.Remove(itemList[i]);
                    itemList.Add(temp);
                    temp.SetSiblingIndex(itemList.Count - 1);
                }
                if (itemList[i].position.x > endPos.x)
                {
                    itemList[i].position = itemList[0].position - new Vector3(SpacingDistance + itemList[0].GetComponent<RectTransform>().rect.width, 0, 0);
                    var temp = itemList[i];
                    itemList.Remove(itemList[i]);
                    itemList.Insert(0, temp);
                    temp.SetSiblingIndex(0);
                }
            }
        }

    }

    void ScaleDistance()//根据百分比设置缩放动画
    {
        for (int i = 0; i < itemList.Count; i++)
        {
            double dis = Vector3.Distance(itemList[i].position, Centre.position) / MaxDis;
            if (!double.IsInfinity(dis))
            {
                if (dis > 0)
                {
                    if (dis<0.05f)
                    {
                        itemList[i].localScale = Vector3.one * ((1f - (float)dis) * Scale) ;
                    }
                    else
                    {
                        itemList[i].localScale = Vector3.one * ((1f - (float)dis) * Scale) * 0.8f;
                    }
                 
                }

            }

        } 
    }
    Tween tw;
    void Adsorption() //停止滑动进行吸附
    {
        for (int i = 0; i < itemList.Count; i++)//找出距离中心点最近的
        {
            float dis = Vector3.Distance(itemList[i].position, Centre.position);

            if (dis < MinDis)
            {

                tempCentre = itemList[i];
                tempCentreName.text = itemList[i].name;
            }
            MinDis = dis;
        }
        if (GetComponent<ScrollRect>().velocity.x==0 && isAdsorption == false)//判断当前滑动结束
        {
          
            //计算当前距离中心差多远后 进行吸附
            if (tempCentre)
            {
                var dis = Centre.position - tempCentre.position;
                tw = Content.DOMoveX(Content.position.x + dis.x, 0.5f);
                tempCentre = null;
                isAdsorption = true;
            }
            else
            {
                isAdsorption = false;
            }
            
        }
        else if (GetComponent<ScrollRect>().velocity.x!=0)//如果在吸附过程中点击拖拽强制结束吸附动画
        {
            isAdsorption = false;
            tw.Kill();
        }
    }
    // Update is called once per frame  
    void Update()
    {
        Islimit();
        ScaleDistance();
        Adsorption();
    }

    public void OnBeginDrag(PointerEventData eventData)
    {
        tw.Kill();

    }
}

下面这个是脚本设置,主要关注的就是公开的变量我都有注释,结合上面的面板图很轻易就能看出来,第一个就是循环图片,间隔距离是两个图片之间的距离,缩放倍数是中间最大是多少倍,根据你工程设置,默认设置1就可以了,最后面的text是显示居中ui的名字,名字的设置是根据图片名称来的。
unity UGUI无限循环滚动居中_第3张图片
运行后这三个内容层级都会同步,可以进行一些你想要的操作
unity UGUI无限循环滚动居中_第4张图片

最后说下使用了Dotween插件,吸附居中功能我是感觉有点延迟,但是还没找到更好的方法,如果大家有更好的方法欢迎大佬留言,完成上面的设置就可以畅快玩耍了~~

你可能感兴趣的:(unity,游戏引擎,c#)