Dotween简单实现一个UI滑动的效果

UI大概就是这个样子，文章最底部上传一个视频。
首先看UI的布局图

这里注意的则是层级关系。接下来就是主要的脚本了附上核心代码再讲一下其中需要注意的点。

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

public class Main : MonoBehaviour
{
    public Button[] btns = new Button[5];
    public Sprite[] sprites = new Sprite[5];
    public Transform content;
    public Transform move;
    public Button close;
    private bool isclose;
    Vector3 ogrimovepos;
    int index;
    // Start is called before the first frame update
    void Start()
    {
        isclose = false;
        ogrimovepos = move.localPosition;
        move.transform.gameObject.SetActive(false);
        for(int i=0;i<5;i++)
        {
            int t = i;
            isclose = false;
            btns[t].onClick.AddListener(delegate ()
            {
                isclose = false;
                for (int j = 0; j < 5; j++)
                {
                    if (t == j)
                    {
                        index = j;
                        btns[j].transform.DOLocalMoveX(167, 1).OnComplete(panelmove);
                    }
                    else
                    {
                        btns[j].transform.DOLocalMoveX(j < t ? -336 :3000, 1);
                    }
                }
            });
        }
        close.onClick.AddListener(closepanel);
    }

    public void panelmove()
    {
        isclose = true;
        float x = ogrimovepos.x;
        move.GetComponent<Image>().sprite = sprites[index];
        move.localPosition = new Vector3(-336, 0, 0);
        move.transform.gameObject.SetActive(true);
        move.transform.DOLocalMoveX(x, 1);
    }

    public void closepanel()
    {
        if (isclose)
            move.transform.DOLocalMoveX(-520, 1).OnComplete(panelmove2);
    }

    public void panelmove2()
    {
        move.transform.gameObject.SetActive(false);
        move.localPosition = new Vector3(0, 0, 0);
        for(int i=0;i<5;i++)
        {
            int t = i;
            btns[t].transform.DOLocalMoveX(167 + 384 * t, 1);
        }
    }
    // Update is called once per frame
    void Update()
    {
        
    }

    
}

这代码中的这些数值都不是唯一的，需要自己根据实际情况进行调整，基本上就是你一张图片的宽以及图片之间的间隙以及第一张图片的位置，还有就是展开之后大图的初始位置，根据自己的项目把这几个位置的数值带到代码中去进行修改，然后再微调即可。最后上个效果图。

1693877305984