Unity中实现仿3D轮转图
Posted Hello Bug.
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Unity中实现仿3D轮转图相关的知识，希望对你有一定的参考价值。
一：效果演示
二：实现思路
——获取位置：可以将每个item的运行轨迹看作一个椭圆，分为四段进行观察，四个黑点视为四个item，观察四个黑点的位置，比例值为0.125和0.375的位置相同，比例值为0.625和0.875的位置相同，比例值为0.375和0.625的位置相反，可得结论
[0,0.25]：轨迹总长度*当前比例值
(0.25,0.5]：轨迹总长度 * (0.5 - 当前比例值)
(0.5,0.75]：轨迹总长度 * (0.5 - 当前比例值)
(0.75,1]：轨迹总长度 * (当前比例值 - 1)
——获取缩放值：可以将每个item的运行轨迹看作一个椭圆，分为四段进行观察，四个黑点视为四个item，观察四个黑点的位置，比例值为0时缩放值应为最大，比例值为0.5时缩放值应为最小，可得结论
[0-0.5]：缩放最大值 - 比例值 * (缩放最大值 - 缩放最小值) * 2
(0.5-1]：缩放最大值 - (1 - 比例值) * (缩放最大值 - 缩放最小值) * 2
——获取层级：使用UGUI的自然层级进行排序(越靠下越后渲染)，拷贝一份列表item数据列表按照缩放值从小到大的顺序排序，再通过SetSiblingIndex依次设置层级
三：使用
——常规使用
SetData：传入item预制体和列表中item个数
OnSetItem：绑定设置item的方法
SetList：设置列表的显示
using UnityEngine;
using UnityEngine.UI;
public class Test : MonoBehaviour
public GameObject prefab;
public Rotary3DList rotary3DList;
private void Start()
rotary3DList.SetData(prefab, 5);
rotary3DList.OnSetItem = SetItem;
rotary3DList.SetList();
void SetItem(Rotary3DList.ListItemData listItemData)
listItemData.go.GetComponent<Text>().txt = listItemData.index.ToString();
——MoveToIndex：移动到某一个下标位置，isScroll表示是否滑动到指定位置
——GetListItemData：获取到某个下标的item数据
——CenterIndex：当前中心点item下标
四：代码实现
using System.Collections.Generic;
using UnityEngine;
using System;
using UnityEngine.UI;
using UnityEngine.EventSystems;
using System.Linq;
/// <summary>
/// 仿3D轮转图组件
/// </summary>
[AddComponentMenu("LFramework/UI/Rotary3DList", 50)]
[RequireComponent(typeof(Image))]
public class Rotary3DList : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
/// <summary>
/// 列表item数据
/// </summary>
public class ListItemData
public int index;
public GameObject go;
public float targetValue;//目标位置长度值
public float tempValue;//临时位置长度值(每次拖拽结束后才更新数值)
/// <summary>
/// 轮转类型
/// </summary>
public enum RotaryType
Horizontal,
Vertical,
//轮转类型
public RotaryType rotaryType;
//间隔
public float spacing;
//最大缩放值
public float maxScale = 1;
//最小缩放值
public float minScale = 0.5f;
//缓动插值
public float t = 0.1f;
//设置item
public Action<ListItemData> OnSetItem;
//拖拽开始
public Action<PointerEventData> OnDragBegin;
//拖拽中
public Action<PointerEventData> OnDragging;
//拖拽结束
public Action<PointerEventData> OnDragEnd;
//中心item下标
public int CenterIndex
get return GetCenterItemIndex();
//列表item总数量
int m_ItemCount;
//总长度值
float m_TotalValue;
//长度值增量
float m_DeltaValue;
GameObject m_Prefab;
RectTransform m_ItemContainer;
List<ListItemData> m_ListItemDataList = new List<ListItemData>();
//是否在拖拽中
bool m_InDrag;
//每次拖拽的起始位置
float m_BeginPos;
//初始每个item的位置长度值
List<float> m_InitValueList = new List<float>();
/// <summary>
/// 设置数据
/// </summary>
public void SetData(GameObject prefab, int itemCount)
m_ItemContainer = GetComponent<RectTransform>();
m_ItemCount = itemCount;
m_Prefab = prefab;
m_DeltaValue = rotaryType == RotaryType.Horizontal
? (spacing + m_Prefab.GetComponent<RectTransform>().rect.width)
: (spacing + m_Prefab.GetComponent<RectTransform>().rect.height);
m_TotalValue = m_DeltaValue * m_ItemCount;
InitData();
/// <summary>
/// 初始化数据
/// </summary>
void InitData()
float tempValue = 0;
for (int i = 0; i < m_ItemCount; i++)
ListItemData data = new ListItemData();
data.index = i;
data.go = Instantiate(m_Prefab, transform, m_ItemContainer);
data.targetValue = tempValue;
data.tempValue = tempValue;
m_ListItemDataList.Add(data);
m_InitValueList.Add(tempValue);
tempValue += m_DeltaValue;
m_InitValueList.Add(m_TotalValue);
/// <summary>
/// 设置列表
/// </summary>
public void SetList()
foreach (var data in m_ListItemDataList)
OnSetItem?.Invoke(data);
UpdateItem(true);
/// <summary>
/// 移动到某个下标位置
/// </summary>
public void MoveToIndex(int index, bool isScroll = true)
if (index < 0
|| index >= m_ItemCount)
Debug.LogError("下标超出范围,index : " + index);
return;
int indexOffset = CenterIndex - index;
foreach (var data in m_ListItemDataList)
float targetValue = data.tempValue + m_DeltaValue * indexOffset < 0
? m_TotalValue - Mathf.Abs(data.tempValue + m_DeltaValue * indexOffset) % m_TotalValue
: (data.tempValue + m_DeltaValue * indexOffset) % m_TotalValue;
data.targetValue = targetValue;
data.tempValue = targetValue;
UpdateItem(!isScroll);
public void OnBeginDrag(PointerEventData eventData)
m_InDrag = true;
m_BeginPos = rotaryType == RotaryType.Horizontal
? eventData.position.x
: eventData.position.y;
OnDragBegin?.Invoke(eventData);
public void OnDrag(PointerEventData eventData)
OnDragging?.Invoke(eventData);
float endPos = rotaryType == RotaryType.Horizontal
? eventData.position.x
: eventData.position.y;
float offset = endPos - m_BeginPos;
//计算item数据
foreach (var data in m_ListItemDataList)
float tempValue = data.tempValue + offset < 0
? m_TotalValue - Mathf.Abs(data.tempValue + offset) % m_TotalValue
: (data.tempValue + offset) % m_TotalValue;
data.targetValue = tempValue;
public void OnEndDrag(PointerEventData eventData)
m_InDrag = false;
OnDragEnd?.Invoke(eventData);
foreach (var data in m_ListItemDataList)
float nearlyValue = GetNearlyValue(data.targetValue);
data.targetValue = nearlyValue;
data.tempValue = nearlyValue;
private void Update()
UpdateItem(m_InDrag);
/// <summary>
/// 更新item
/// </summary>
/// isForce : 是否强制复位
void UpdateItem(bool isForce)
foreach (var data in m_ListItemDataList)
float ratio = data.targetValue / m_TotalValue;
//更新位置
float pos = GetPos(ratio);
Vector2 targetPos = rotaryType == RotaryType.Horizontal
? new Vector2(pos, 0)
: new Vector2(0, pos);
float targetPosOffset = rotaryType == RotaryType.Horizontal
? data.go.transform.localPosition.x - targetPos.x
: data.go.transform.localPosition.y - targetPos.y;
data.go.transform.localPosition = Vector2.Lerp(data.go.transform.localPosition, targetPos, isForce ? 1 : t);
if (Mathf.Abs(targetPosOffset) <= 0.01f)
data.go.transform.localPosition = targetPos;
//更新缩放值
float scale = GetScale(ratio);
Vector3 targetScale = Vector3.one * scale;
float targetScaleOffset = data.go.transform.localScale.x - targetScale.x;
data.go.transform.localScale = Vector3.Lerp(data.go.transform.localScale, targetScale, isForce ? 1 : t);
if (Mathf.Abs(targetScaleOffset) <= 0.01f)
data.go.transform.localScale = targetScale;
//更新层级
var listItemDataList = m_ListItemDataList.OrderBy(data => GetScale(data.targetValue / m_TotalValue)).ToList();
for (int i = 0; i < m_ItemCount; i++)
listItemDataList[i].go.transform.SetSiblingIndex(i);
/// <summary>
/// 得到位置
/// </summary>
float GetPos(float ratio)
if (ratio < 0
&& ratio > 1)
Debug.LogError("比例值错误，比例值必须为[0-1]，ratio : " + ratio);
return 0;
if (ratio >= 0 && ratio <= 0.25f)
return m_TotalValue * ratio;
else if (ratio > 0.25f && ratio <= 0.75f)
return m_TotalValue * (0.5f - ratio);
else
return m_TotalValue * (ratio - 1);
/// <summary>
/// 得到缩放值
/// </summary>
float GetScale(float ratio)
if (ratio < 0
&& ratio > 1)
Debug.LogError("比例值错误，比例值必须为[0-1]，ratio : " + ratio);
return 0;
float v = (maxScale - minScale) * 2;
if (ratio >= 0 && ratio <= 0.5f)
return maxScale - ratio * v;
else
return maxScale - (1 - ratio) * v;
/// <summary>
/// 得到距离最近的位置长度值
/// </summary>
float GetNearlyValue(float curValue)
float minDis = Mathf.Abs(curValue - m_InitValueList.First());
float nearlyValue = m_InitValueList.First();
foreach (var value in m_InitValueList)
float tempDis = Mathf.Abs(curValue - value);
if (tempDis < minDis)
minDis = tempDis;
nearlyValue = value == m_TotalValue
? m_InitValueList.First()
: value;
return nearlyValue;
/// <summary>
/// 得到中心item的下标
/// </summary>
int GetCenterItemIndex()
int index = 0;
float minDis = Mathf.Min(Mathf.Abs(m_ListItemDataList[0].targetValue - m_InitValueList.First()), Mathf.Abs(m_ListItemDataList[0].targetValue - m_InitValueList.Last()));
foreach (var data in m_ListItemDataList)
float tempDis = Mathf.Min(Mathf.Abs(data.targetValue - m_InitValueList.First()), Mathf.Abs(data.targetValue - m_InitValueList.Last()));
if (tempDis < minDis)
minDis = tempDis;
index = data.index;
return index;
/// <summary>
/// 得到列表item数据
/// </summary>
public ListItemData GetListItemData(int index)
if (index < 0
|| index >= m_ItemCount)
Debug.LogError("下标超出范围,index : " + index);
return null;
return m_ListItemDataList[index];
以上是关于Unity中实现仿3D轮转图的主要内容，如果未能解决你的问题，请参考以下文章
Unity3D应用案例系列Unity3D中实现《3D照片墙》