unity UGUI无限循环滚动居中

最近在做一个ui循环滚动的功能，网上找了半天脚本感觉都和我实际需求不太符合，自己花费一些时间完成了这个功能记录一下。下面开始正题
，我是采用unity自带组件Scroll View来完成，首先设置Scroll View如下图

面板层级结构如下

然后创建一个预制体，预制体需要锚点到左侧中心点，设置为起始点，设置完成后把这个图片随便放个层级不要在本层级，不要影响后面生成。

然后开始编写代码，我就直接贴了，不懂可以看一下注释，因为我是水平所以判断用的都是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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171

下面这个是脚本设置，主要关注的就是公开的变量我都有注释，结合上面的面板图很轻易就能看出来，第一个就是循环图片，间隔距离是两个图片之间的距离，缩放倍数是中间最大是多少倍，根据你工程设置，默认设置1就可以了，最后面的text是显示居中ui的名字，名字的设置是根据图片名称来的。

运行后这三个内容层级都会同步，可以进行一些你想要的操作

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