借助DoTween实现功能非常方便哦~，记得导入DoTween插件进项目
1.生成所有UI元素
根据配置面板之间的距离，大小，将UI生成到指定位置，这里是将第一个元素生成到屏幕的正中间
public float gaps;//间隙
public float reduceSize;//减小的大小
public RectTransform prefab;//每一项的Prefab
public Transform prefabParent;//UI元素的父物体
private List allItemPrefab=new List();//记录所有生成的元素
public Dictionary> leftPos=new Dictionary>();//记录左边位置信息
public Dictionary> rightPos=new Dictionary>();//记录右边位置信息
///
/// 初始化生成界面元素
///
void InitScreen()
{
for (int i = 0; i < allInfos.Length; i++)
{
//生成UI界面
RectTransform tempCreate= Instantiate(prefab, prefabParent);
//将元素的锚点设置为正中心位置
tempCreate.anchorMax = Vector2.one / 2;
tempCreate.anchorMin = Vector2.one / 2;
//每个UI元素的大小逐渐减小
tempCreate.localScale=Vector3.one*(1-(i*reduceSize));
//改变UI元素的生成位置
tempCreate.anchoredPosition=new Vector2(i*(prefab.sizeDelta.x+gaps-((i*reduceSize))*tempCreate.sizeDelta.x/2),0);
//右边把所有的UI位置记录下来
rightPos.Add(i,new List(){tempCreate.transform.position,tempCreate.localScale});
//记录所有生成的UI元素，以便后面需要记录左边的UI元素位置
allItemPrefab.Add(tempCreate);
//可根据需求忽略
tempCreate.Find("title").GetComponent().text = allInfos[i].title;
tempCreate.Find("Content").GetComponent().text = allInfos[i].content;
}
//记录所有元素移动到左边后的位置信息
for (int i = 0; i < rightPos.Count; i++)
{
leftPos.Add(i,new List(){allItemPrefab[0].position-(allItemPrefab[i].position-allItemPrefab[0].position),rightPos[i][1]});
}
}
2.移动UI元素
private int currentItem;
public int CurrentItem//在最中间的元素索引
{
get => currentItem;
set
{
currentItem = value;
}
}
///
/// 滑动过程
///
void Slide()
{
for (int i = 0; i
3.控制UI元素左右移动
////// 往左边滑动 /// public void Left() { if (CurrentItem < allInfos.Length-1) { CurrentItem += 1; Slide(); } } ////// 往右边滑动 /// public void Right() { if (CurrentItem > 0) { CurrentItem -= 1; Slide(); } }
完整代买如下：
using System.Collections.Generic;
using DG.Tweening;
using UnityEngine;
using UnityEngine.UI;
[System.Serializable]
public class ItemInfo
{
public string title; //标题信息
public string content; //内容信息
}
public class UIAnimation : MonoBehaviour
{
public ItemInfo[] allInfos;//所有UI信息
public float gaps;//间隙
public float reduceSize;//减小的大小
public RectTransform prefab;//每一项的Prefab
public Transform prefabParent;//UI元素的父物体
private List allItemPrefab=new List();//记录所有生成的元素
public Dictionary> leftPos=new Dictionary>();//记录左边位置信息
public Dictionary> rightPos=new Dictionary>();//记录右边位置信息
public Button EnterGame;
private int currentItem;
public int CurrentItem//在最中间的元素索引
{
get => currentItem;
set
{
currentItem = value;
}
}
void Start()
{
InitScreen();
EnterGame.onClick.AddListener(() =>
{
Debug.Log("当前进入的模块是："+ allInfos[CurrentItem].title);
});
}
///
/// 往左边滑动
///
public void Left()
{
if (CurrentItem < allInfos.Length-1)
{
CurrentItem += 1;
Slide();
}
}
///
/// 往右边滑动
///
public void Right()
{
if (CurrentItem > 0)
{
CurrentItem -= 1;
Slide();
}
}
///
/// 滑动过程
///
void Slide()
{
for (int i = 0; i
/// 初始化生成界面元素
///
void InitScreen()
{
for (int i = 0; i < allInfos.Length; i++)
{
//生成UI界面
RectTransform tempCreate= Instantiate(prefab, prefabParent);
//将元素的锚点设置为正中心位置
tempCreate.anchorMax = Vector2.one / 2;
tempCreate.anchorMin = Vector2.one / 2;
//每个UI元素的大小逐渐减小
tempCreate.localScale=Vector3.one*(1-(i*reduceSize));
//改变UI元素的生成位置
tempCreate.anchoredPosition=new Vector2(i*(prefab.sizeDelta.x+gaps-((i*reduceSize))*tempCreate.sizeDelta.x/2),0);
//右边把所有的UI位置记录下来
rightPos.Add(i,new List(){tempCreate.transform.position,tempCreate.localScale});
//记录所有生成的UI元素，以便后面需要记录左边的UI元素位置
allItemPrefab.Add(tempCreate);
//可根据需求忽略
tempCreate.Find("title").GetComponent().text = allInfos[i].title;
tempCreate.Find("Content").GetComponent().text = allInfos[i].content;
}
//记录所有元素移动到左边后的位置信息
for (int i = 0; i < rightPos.Count; i++)
{
leftPos.Add(i,new List(){allItemPrefab[0].position-(allItemPrefab[i].position-allItemPrefab[0].position),rightPos[i][1]});
}
}
}
配置如下：
Gaps:UI之间的间隙
Reduce Size：UI之间逐渐减小的差值
Prefab:生成的UI预制体 如下图：
Prefab Parent:盛放预制体的父物体
Enter Game：触发按钮 点击后输出显示在屏幕路正中间的UI索引
注：在Prefab Parent上方可添加一个遮罩组件，这样便可以遮住部分UI啦
The End!
