Unity实现仿3D轮转图效果

更新时间：2022年01月07日 11:14:20 作者：Hello Bug.

这篇文章主要为大家详细介绍了Unity实现仿3D轮转图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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;//缓动插值
    public Action<ListItemData> OnSetItem;//设置item
    public Action<PointerEventData> OnDragBegin;//拖拽开始
    public Action<PointerEventData> OnDragging;//拖拽中
    public Action<PointerEventData> OnDragEnd;//拖拽结束
 
    //中心item下标
    public int CenterIndex
    {
        get { return GetCenterItemIndex(); }
    }
 
    int m_ItemCount;//列表item总数量
    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;
    List<float> m_InitValueList = new List<float>();//初始每个item的位置长度值
 
    /// <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 tempValue = data.tempValue + m_DeltaValue * indexOffset < 0
                ? data.tempValue + m_DeltaValue * indexOffset + m_TotalValue
                : data.tempValue + m_DeltaValue * indexOffset;
            float targetValue = tempValue % 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数据
        if (offset > 0)
        {
            foreach (var data in m_ListItemDataList)
            {
                float tempValue = (data.tempValue + offset) % m_TotalValue;
                data.targetValue = tempValue;
            }
        }
        else if (offset < 0)
        {
            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(false);
    }
 
    /// <summary>
    /// 更新item
    /// </summary>
    void UpdateItem(bool isForce)
    {
        //拖拽中-实时更新
        if (m_InDrag)
        {
            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);
                data.go.transform.localPosition = targetPos;
 
                //更新缩放值
                float scale = GetScale(ratio);
                Vector2 targetScale = Vector3.one * scale;
                data.go.transform.localScale = targetScale;
            }
        }
        //非拖拽中-缓动更新
        else
        {
            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);
                Vector2 targetScale = Vector3.one * scale;
                float targetScaleOffset = data.go.transform.localScale.x - targetScale.x;
                data.go.transform.localScale = Vector2.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实现图片轮播组件

C# Onnx实现轻量实时的M-LSD直线检测
这篇文章主要为大家详细介绍了C#如何结合Onnx实现轻量实时的M-LSD直线检测,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2023-11-11
C#在MEF框架中实现延迟加载部件
这篇文章介绍了C#在MEF框架中实现延迟加载部件的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
C#中实现屏蔽Ctrl+C的方法
这篇文章主要介绍了C#中实现屏蔽Ctrl+C的方法,在C#应用程序开发中有一定的实用价值,需要的朋友可以参考下
2014-08-08
C#给图片加水印的简单实现方法
这篇文章主要介绍了C#给图片加水印的简单实现方法,涉及C#操作图片的相关技巧,非常具有实用价值,需要的朋友可以参考下
2015-05-05
提权函数之RtlAdjustPrivilege()使用说明
RtlAdjustPrivilege() 这玩意是在 NTDLL.DLL 里的一个不为人知的函数,MS没有公开,原因就是这玩意实在是太NB了,以至于不需要任何其他函数的帮助,仅凭这一个函数就可以获得进程ACL的任意权限!
2011-06-06
UnityShader3实现2D描边效果
这篇文章主要为大家详细介绍了UnityShader3实现2D描边效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-02-02
C#使用XML文件的操作详解及示例
XML是 Extensible Markup Language 的简称,用于存储和传输数据的可扩展标记语言,它被应用在数据交换、数据存储、Web服务、网络协议等场景,本文给大家介绍了C#使用XML文件的操作详解及示例,需要的朋友可以参考下
2024-10-10
C# BackgroundWorker使用教程
这篇文章主要为大家详细介绍了C# BackgroundWorker使用教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-09-09
C#使用Queue＜T＞进行队列设计
Queue<T>类提供了许多方法和属性,用于处理队列中的元素,本文主要介绍了C#使用Queue＜T＞进行队列设计,具有一定的参考价值,感兴趣的可以了解一下
2024-03-03
C#使用Socket快速判断数据库连接是否正常的方法
这篇文章主要介绍了C#使用Socket快速判断数据库连接是否正常的方法,涉及C#中socket操作的相关技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04

Unity实现仿3D轮转图效果

一、效果演示

二、实现思路

三、使用

四、代码实现

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具