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];
    }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Unity实现图片轮播组件

    游戏中有时候会见到图片轮播的效果,那么这里就自己封装了一个,包括自动轮播.切页按钮控制.页码下标更新.滑动轮播.切页后的回调等等 . 下面,先上一个简陋的gif动态效果图 从图中可以看出,该示例包括了三张图片的轮播,左右分别是上一张和下一张的按钮,右下角显示了当前是第几章的页码下标. 直接上脚本: using System; using System.Collections; using System.Collections.Generic; using UnityEngine; using U

  • 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]:轨迹

  • Unity Shader实现3D翻页效果

    本文实例为大家分享了Unity Shader实现3D翻页效果的具体代码,供大家参考,具体内容如下 参考文章:UnityShader使用Plane实现翻书效果 效果图: 原理:Shader顶点动画 在顶点着色器进行对顶点Y值的偏移(使用了Sin函数模拟翻页时产生的弯曲),对顶点X值的偏移实现纸张在翻页时的收缩(一般是不用收缩),最后对顶点进行围绕Z轴旋转实现Plane翻页(Z轴是本例的旋转轴,请根据你具体情况修改,上面的两个偏移同理). Shader "Unlit/PaperTurnMilkSha

  • jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】

    本文实例讲述了jQuery插件FusionCharts绘制的3D环饼图效果.分享给大家供大家参考,具体如下: 1.index.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Con

  • vue实现3D环形图效果

    本文实例为大家分享了vue实现3D环形图效果的具体代码,供大家参考,具体内容如下 1.引入highcharts 2.main.js引入highcharts import highcharts from 'highcharts' import highcharts3d from 'highcharts/highcharts-3d' highcharts3d(highcharts) 3.页面引入  init() {           // 修改3d饼图绘制过程         let each =

  • jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】

    本文实例讲述了jQuery插件FusionCharts实现的3D帕累托图效果.分享给大家供大家参考,具体如下: 1.设计3D帕累托图的页面 index.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equi

  • 基于JS实现仿百度百家主页的轮播图效果

    HTML <div class="ShowEntry"> <!-- <div id="widget_content_player" class="Player" alog-group="log-player">--> <!--------- 右击箭头---------> <a href="javascript:void(0);" rel="ex

  • jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】

    本文实例讲述了jQuery插件FusionCharts绘制的3D饼状图效果.分享给大家供大家参考,具体如下: 1.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>最新版FusionCharts3D饼图</title> <script src="js/jquery-1.4.2.min.js"></s

  • 微信小程序非swiper组件实现的自定义伪3D轮播图效果示例

    本文实例讲述了微信小程序非swiper组件实现的自定义伪3D轮播图效果.分享给大家供大家参考,具体如下: 效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一个设置到右边,后面所有设置到最右边 2.当前点击的div(view)如果前面无内容,即第一个,那么,当前div(view)设置到中间,后面一个设置到右边,后面所有设置到最右边 3.当前点击的di

  • 微信小程序实现的3d轮播图效果示例【基于swiper组件】

    本文实例讲述了微信小程序实现的3d轮播图效果.分享给大家供大家参考,具体如下: 前面写过一篇3d轮播,就是这篇,使用的方法比较笨拙,而且代码不简洁.这次发现swiper也能实现同样的效果.故记录一下. 先看看效果: wxml: <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChange" style='height:{{swiperH}};'> <swiper-item wx:f

  • 微信小程序实现3D轮播图效果(非swiper组件)

    本文实例为大家分享了微信小程序实现3D轮播图效果的具体代码,供大家参考,具体内容如下 首先上一下效果图: 在做的时候首先想到的是用swiper组件但是发现swiper组件放进去图片的时候会没有3d的效果,原因是swiper组件自带的style属性限制了3d效果所需要的属性,所以单独写了一个组件. index.html <view class='page-con'> rotate.wxml <view class='stage'> <view class='wrapper' b

随机推荐