Unity3D UGUI 循环轮播

Unity3D UGUI 循环轮播

（来总个结）自己写了一个简易的无限轮播效果Demo（效果如下），该Demo是静态的，可根据自己的需求改为动态的。

 

Demo下载：链接: https://pan.baidu.com/s/1hvVvHmmTwOuA3SSqfeuNqg 提取码: xj12 

下面上代码： 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Test : MonoBehaviour {
    //进度
    public Transform ToggleGroup;

    //开始消失的位置，重新出现的位置（即左右两端临界点）
    public Vector2 startPos, endPos;

    //移动的value值
    private float value;

    //每个子物体的位置坐标（长度为子物体总量）
    Vector2[] vc = new Vector2[4];
    
    //是否开始移动
    bool Move;

    void Start()
    {

    }


    void Update()
    {
        //按下键盘左箭头（向左移动）
        if (Input.GetKeyDown(KeyCode.LeftArrow))
        {
            //确保上次移动完成
            if (value == 0)
            {
                for (int i = 0; i < transform.childCount; i++)
                {
                    //记录下所有当前子物体的起始位置
                    vc[i] = transform.GetChild(i).localPosition;
                }
                Move = true;
                StartCoroutine(MoveL());//开启协程
            }

        }
        //按下键盘右箭头（向右移动）
        if (Input.GetKeyDown(KeyCode.RightArrow))
        {
            if (value == 0)
            {
                for (int i = 0; i < transform.childCount; i++)
                {
                    vc[i] = transform.GetChild(i).localPosition;

                }
                Move = true;
                StartCoroutine(MoveR());
            }
        }
    }
    /// <summary>
    /// 向左移动
    /// </summary>
    /// <returns></returns>
    IEnumerator MoveL()
    {
        while (Move)
        {
            yield return new WaitForEndOfFrame();
            for (int i = 0; i < transform.childCount; i++)
            {
                //移动完成(value > 1)后，初始化value，开始判断
                if (value > 1)
                {
                    value = 0;
                    //第一个子物体超过左边临界点
                    if (transform.GetChild(0).localPosition.x <= endPos.x)
                    {
                        //回到最右边
                        transform.GetChild(0).localPosition = new Vector2(startPos.x, transform.GetChild(0).localPosition.y);
                        //把它变成子物体中的最后一个
                        transform.GetChild(0).SetAsLastSibling();
                        //显示当前进度
                        ToggleGroup.GetChild(transform.childCount - 1).SetAsFirstSibling();
                    }
                    Move = false;//关闭循环
                    break;//在此处中断，下面代码不再执行
                }
                //移动进程（可自己调整轮播快慢）
                value += Time.deltaTime * 0.5f;
                //new Vector2(vc[i].x - 1440, 0)：在当前初始位置上向左移动1440
                transform.GetChild(i).localPosition = Vector2.Lerp(vc[i], new Vector2(vc[i].x - 1440, 0), value);

                //其他的保持小图片，中间两个变换大小（根据实际情况）
                transform.GetChild(0).localScale =  0.8f * Vector2.one;
                transform.GetChild(1).localScale = Vector2.Lerp(Vector2.one, 0.8f * Vector2.one, value);
                transform.GetChild(2).localScale = Vector2.Lerp(Vector2.one, Vector2.one, value);
                transform.GetChild(3).localScale =  0.8f * Vector2.one;
            }
        }
    }
    /// <summary>
    /// 向右移动
    /// </summary>
    /// <returns></returns>
    IEnumerator MoveR()
    {
        while (Move)
        {
            yield return new WaitForEndOfFrame();
            for (int i = 0; i < transform.childCount; i++)
            {
                if (value > 1)
                {
                    value = 0;
                    if (transform.GetChild(transform.childCount-1).localPosition.x >= startPos.x)
                    {
                        //回到最左边
                        transform.GetChild(transform.childCount - 1).localPosition = new Vector2(endPos.x, transform.GetChild(3).localPosition.y);
                        //把它变成子物体中的第一个
                        transform.GetChild(transform.childCount - 1).SetAsFirstSibling();
                        //显示当前进度
                        ToggleGroup.GetChild(0).SetAsLastSibling();
                    }
                    Move = false;
                    break;
                }

                value += Time.deltaTime * 0.5f;
                //new Vector2(vc[i].x + 1440, 0)：在当前初始位置上向右移动1440
                transform.GetChild(i).localPosition = Vector2.Lerp(vc[i], new Vector2(vc[i].x + 1440, 0), value);

                transform.GetChild(0).localScale = Vector2.Lerp(Vector2.one, Vector2.one, value);
                transform.GetChild(1).localScale = Vector2.Lerp(Vector2.one, 0.8f * Vector2.one, value);
                transform.GetChild(2).localScale = 0.8f * Vector2.one;
                transform.GetChild(3).localScale = 0.8f * Vector2.one;
            }
        }
    }
}

注意：使用该Demo，要设置好Grid Layout Group跟Horizontal Layout Group，这样布局才会更合适。

要是适应屏幕，则把代码中的相关参数改成计算公式，还有Grid Layout Group跟Horizontal Layout Group的大小设置好。

下面，贴一下我自己项目的屏幕适应以作参考（根据需要修改）（若使用如下代码，需要将上面代码的public Vector2 startPos, endPos;改为float类型，其他使用到startPos, endPos这两个变量的地方，把后面的.x去掉；将上面代码移动的距离“1440”改为下面代码的变量moveDistance，之前的“1440”是写死的）

    private GridLayoutGroup grid;//图片的布局
    private float moveDistance,width;//轮播移动的距离，图片的宽度

    private void Awake()
    {
        InitGrid();//设置图片大小
    }

    //UGUI屏幕适应
    void InitGrid()
    {    
        //找到布局控件
        grid = transform.GetComponent<GridLayoutGroup>();

        //每个子元素的大小
        grid.cellSize = new Vector2(Screen.width, Screen.height);
        //子元素之间的空间
        grid.spacing = new Vector2(-grid.cellSize.x*0.25f, 0);
        //移动距离
        moveDistance = grid.cellSize.x + grid.spacing.x;
        //子元素的父物体的宽度（重新调整宽度跟位置）
        width = grid.cellSize.x + 3 * moveDistance;

        //左右两边图片要消失的临界点
        startPos = width * 0.5f - grid.cellSize.x * 0.5f;
        endPos = -(width * 0.5f - grid.cellSize.x * 0.5f);

        //子元素的父物体当前新的位置
        transform.GetComponent<RectTransform>().anchoredPosition3D = new Vector3(startPos-moveDistance, 0, 0);

        //下面显示进度的小圆点
        foreach(Transform t in ToggleGroup)
        {
            t.GetComponent<RectTransform>().sizeDelta = new Vector2(ToggleGroup.GetComponent<RectTransform>().rect.height, ToggleGroup.GetComponent<RectTransform>().rect.height);
        }

        //强制刷新这两个布局（重新排好）
        LayoutRebuilder.ForceRebuildLayoutImmediate(transform.GetComponent<RectTransform>());
        LayoutRebuilder.ForceRebuildLayoutImmediate(ToggleGroup.GetComponent<RectTransform>());

    }

最后，欢迎讨论交流，共同进步！