unity UGUI无限循环滚动居中

已于 2023-12-28 16:53:06 修改
阅读量566 收藏 4
点赞数 2
文章标签： unity 游戏引擎 c#
于 2023-11-15 16:06:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43687127/article/details/134422042
版权

最近在做一个ui循环滚动的功能，网上找了半天脚本感觉都和我实际需求不太符合，自己花费一些时间完成了这个功能记录一下。下面开始正题
我是采用unity自带组件Scroll View来完成，首先设置Scroll View如下图
我是横屏你可以根据情况选择你的
面板层级结构如下
层级面板结构
然后开始编写代码，我就直接贴了，不懂可以看一下注释。

using DG.Tweening;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;
public enum HVType
{
    Vertical,
    Horizontal
}
public class LoopScroll : MonoBehaviour, IBeginDragHandler, IEndDragHandler, IDragHandler
{
    public HVType tempHVType;

    Vector2 StartPos;
    [Header("中心点")]
    public Transform Centre;
    [Header("UI父级")]
    public Transform Content;
    [Header("间隔距离")]
    public float SpacingDistance = 100;
    [Header("缩放倍数")]
    public float Scale = 1;
    [Header("居中吸附速度")]
    public float Speed = 10;
    [Header("当前居中物体名称")]
    public Text tempCentreName;
    [Header("左右切换按钮")]
    public Button Left, Right;
    [Header("居中后UI缩放系数")]
    public Vector3 CentreScale = Vector3.one * 1.5f;
    public List<Transform> itemList;
    Transform tempCentre;//当前居中物体
    bool isDrag = false, isAdsorption, isScale, isLRBtn;//拖拽更换当前索引，控制吸附居中,控制缩放，控制左右按钮
    float MaxDis, MinDis;//最大最小距离
    private Vector3 startPos, endPos, BtnPos;//左边限制位置，右边限制位置 
    float itemDis;
    private void Awake() { }
    void Start()
    {

        ApplyEqualSpacing();
        isScale = true;
        isAdsorption = true;
        tempCentre = itemList[0];
        if (tempCentreName != null ) { tempCentreName.text = tempCentre.name; }
       
        if (tempHVType == HVType.Horizontal)
        {
            startPos = itemList[0].position;
            startPos.x -= itemList[0].GetComponent<RectTransform>().rect.width + itemList[0].GetComponent<RectTransform>().rect.width / 2;
            endPos = itemList[itemList.Count - 1].position;
            endPos.x += itemList[itemList.Count - 1].GetComponent<RectTransform>().rect.width;
        }
        else
        {
            startPos = itemList[0].position;
            startPos.y += itemList[0].GetComponent<RectTransform>().rect.height + itemList[0].GetComponent<RectTransform>().rect.height / 2;
            endPos = itemList[itemList.Count - 1].position;
            endPos.y -= itemList[itemList.Count - 1].GetComponent<RectTransform>().rect.height;
            //print(endPos);
        }
        //设置第一个坐标与最后一个坐标位置  
        //求出最远距离
        for (int i = 0; i < itemList.Count; i++)
        {
            var dis = Vector3.Distance(itemList[i].position, Centre.position);
            if (dis > MaxDis)
            {
                MaxDis = dis;
                MinDis = dis;
            }
        }
        if (Left)
        {
            Left.onClick.AddListener(LBtn);
            Right.onClick.AddListener(RBtn);
        }
        isDrag = true;
    }
    float currentX = 0, currentX2;//当前最后一位的坐标
    void ApplyEqualSpacing()
    {
        // 计算总宽度
        float totalWidth = 0f;
        foreach (RectTransform element in itemList)
        {
            if (tempHVType == HVType.Horizontal)
                totalWidth += element.sizeDelta.x;
            else
            {
                totalWidth += element.sizeDelta.y;
            }
        }
        // 计算间隔的总宽度
        float totalSpacing = (itemList.Count - 1) * SpacingDistance;
        // 计算每个元素的平均宽度
        float averageWidth = (totalWidth + totalSpacing) / itemList.Count;
        // 设置每个元素的位置
        for (int i = 0; i < itemList.Count; i++)
        {
            RectTransform element = itemList[i].GetComponent<RectTransform>();
            if (tempHVType == HVType.Horizontal)
            {
                float elementWidth = element.sizeDelta.x;
                // 设置元素的位置
                element.anchoredPosition = new Vector2(currentX + elementWidth / 2f, element.anchoredPosition.y);
                // 更新下一个元素的X坐标
                currentX += elementWidth + SpacingDistance;
            }
            else
            {
                float elementWidth = element.sizeDelta.y;
                // 设置元素的位置
                element.anchoredPosition = new Vector2(element.anchoredPosition.x, currentX + elementWidth / 2f);
                // 更新下一个元素的X坐标
                currentX -= elementWidth + SpacingDistance;
            }
        }
    }
    void Islimit() //设置坐标切换与列表内元素与面板层级切换 保证层级与列表内数据同步
    {
        if (isDrag)
        {
            for (int i = 0; i < itemList.Count; i++)
            {
                var currentItem = itemList[i];

                if (tempHVType == HVType.Horizontal)
                {
                    var elementWidth = currentItem.GetComponent<RectTransform>().sizeDelta.x;
                    if (currentItem.position.x < startPos.x)
                    {
                        currentItem.GetComponent<RectTransform>().anchoredPosition = new Vector3(currentX + elementWidth / 2, 0, 0);
                        currentX += elementWidth + SpacingDistance;
                        currentX2 += SpacingDistance + elementWidth;
                    }
                    else
                   if (currentItem.position.x > endPos.x)
                    {
                        currentX2 -= SpacingDistance + elementWidth;
                        currentX -= elementWidth + SpacingDistance;
                        currentItem.GetComponent<RectTransform>().anchoredPosition = new Vector3((currentX2 + elementWidth / 2), 0, 0);
                    }
                }
                else
                {
                    var elementWidth = currentItem.GetComponent<RectTransform>().sizeDelta.y;                
                    if (currentItem.position.y > startPos.y)//向下托 当前坐标比初始坐标高
                    {                 
                        currentItem.GetComponent<RectTransform>().anchoredPosition = new Vector3(0, (currentX + elementWidth / 2), 0);
                        currentX -= elementWidth + SpacingDistance;
                        currentX2 -= SpacingDistance + elementWidth;
                    }
                    else
                    if (currentItem.position.y < endPos.y)//向下托 当前坐标比终点坐标高
                    {
                        currentX2 += SpacingDistance + elementWidth;
                        currentX += elementWidth + SpacingDistance;
                        currentItem.GetComponent<RectTransform>().anchoredPosition = new Vector3(0, (currentX2 + elementWidth / 2), 0);
                    }
                }
            }
        }
    }
    void ScaleDistance()//根据百分比设置缩放动画
    {
        if (isScale)
        {
            if (tempCentre)
            {
                for (int i = 0; i < itemList.Count; i++)
                {
                    if (tempCentre == itemList[i])
                    {
                        var scale = Vector3.Lerp(itemList[i].localScale, CentreScale, Speed * Time.deltaTime);
                        tempCentre.localScale = scale;
                        if (Vector3.Distance(tempCentre.localScale, CentreScale) < 0.01f)
                        {
                            isLRBtn = false;
                            isScale = false;
                        }
                    }
                    else
                    {
                        var scale = Vector3.Lerp(itemList[i].localScale, Vector3.one, Speed * Time.deltaTime);
                        itemList[i].localScale = scale;
                    }
                }
            }
        }
    }
    void Adsorption() //停止滑动进行吸附
    {
        if (isAdsorption)
        {
            if (tempCentre)
            {
                var dis = Centre.position - tempCentre.position;
                if (tempHVType == HVType.Horizontal)
                {
                    var pos = Vector3.Lerp(Content.position, new Vector3(Content.position.x + dis.x,
                  Content.position.y, Content.position.z), Speed * Time.deltaTime);
                    Content.position = pos;
                    if (Vector3.Distance(new Vector3(Content.position.x + dis.x,
                        Content.position.y, Content.position.z), Content.position) < 0.01f)
                    {
                        isAdsorption = false;
                    }
                }
                else
                {
                    var pos = Vector3.Lerp(Content.position, new Vector3(Content.position.x,
                    Content.position.y + dis.y, Content.position.z), Speed * Time.deltaTime);
                    Content.position = pos;
                    if (Vector3.Distance(new Vector3(Content.position.x,
                        Content.position.y + dis.y, Content.position.z), Content.position) < 0.01f)
                    {
                        isAdsorption = false;
                    }
                }
            }
        }
    }
    public void LBtn()
    {
        if (!isLRBtn)
        {
            Controller.JTtime = 0;
            Controller.JianT.gameObject.SetActive(false);    
            if (tempHVType == HVType.Horizontal)
            {
                itemDis = tempCentre.GetComponent<RectTransform>().rect.width + SpacingDistance;
                BtnPos = new Vector3(Content.position.x + itemDis,
                Content.position.y, Content.position.z);
            }
            else
            {
                itemDis = tempCentre.GetComponent<RectTransform>().rect.height + SpacingDistance;
                BtnPos = new Vector3(Content.position.x,
                Content.position.y + itemDis, Content.position.z);
            }
            Content.DOMove(BtnPos, 0.5f).OnComplete(() =>
            {
                isDrag = true;
                FindMinDis();
                isAdsorption = true;
                isScale = true;
            });
            isLRBtn = true;
        }
    }
    public void RBtn()
    {
        if (!isLRBtn)
        {
            Controller.JTtime = 0;
            Controller.JianT.gameObject.SetActive(false);
            if (tempHVType == HVType.Horizontal)
            {
                itemDis = tempCentre.GetComponent<RectTransform>().rect.width + SpacingDistance;
                BtnPos = new Vector3(Content.position.x - itemDis,
                Content.position.y, Content.position.z);
            }
            else
            {
                itemDis = tempCentre.GetComponent<RectTransform>().rect.height + SpacingDistance;
                BtnPos = new Vector3(Content.position.x,
                Content.position.y - itemDis, Content.position.z);
            }
            Content.DOMove(BtnPos, 0.5f).OnComplete(() =>
            {
                isDrag = true;
                FindMinDis();
                isAdsorption = true;
                isScale = true;
            });
            isLRBtn = true;
        }
    }
    void FindMinDis() //找出距离中心点最近的  
    {
        for (int i = 0; i < itemList.Count; i++)
        {
            float dis = Vector3.Distance(itemList[i].position, Centre.position);
            if (dis < MinDis)
            {
                tempCentre = itemList[i];
                if (tempCentreName)
                {
                    tempCentreName.text = itemList[i].name;
                }
              
                MinDis = dis;
            }
        }
        MinDis = 1000;
    }
    void Update()
    {
        Islimit();
        ScaleDistance(); 
        Adsorption();
    }

    public void OnBeginDrag(PointerEventData eventData)
    {
      
        StartPos = eventData.position;
        isAdsorption = false;
        isScale = false;
        Controller.JTtime = 0;
        Controller.JianT.gameObject.SetActive(false);
    }

    public void OnEndDrag(PointerEventData eventData)
    {
    
        
            transform.GetComponent<ScrollRect>().velocity = Vector3.one * 0.5f;
            FindMinDis();
            isAdsorption = true;
            isScale = true;
            isDrag = false;
        
    }
    public void OnDrag(PointerEventData eventData)
    {
        isDrag = true;
    }
}

下面这个是脚本设置，主要关注的就是公开的变量我都有注释，结合上面的面板图很轻易就能看出来，间隔距离是两个图片之间的距离，缩放倍数是中间最大是多少倍，根据你工程设置，默认设置1就可以了，最后面的text是显示居中ui的名字，名字的设置是根据图片名称来的
在这里插入图片描述
最后说下使用了Dotween插件，完成上面的设置就可以畅快玩耍了~~

临客GG
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Unity滚动条ScrollView自动居中、缩放、变暗扩展
02-11
类似于网络游戏的商品切换滚动条，皮肤切换滚动条，自动居中离中心最近的Item，居中Item进行缩放，明暗变化。
Unity UGUI无限循环列表
12-26
Unity UGUI实现无限循环滑动列表功能，如果要做循环滑动列表可以参考。直接导入Unity里面有示例场景。运行即可。
Unit 高效开发系列 - 第四章 无限循环滑动ScrollView封装
huiyue2007的博客
12-23 954
Uinty高效开发系列主要包含一系列的Unity开发实例，主要来源于笔者的一个3D游戏项目和一个手机APP项目，适合利用Unity开发游戏或手机APP场景。本章节描述无限滑动ScrellView.
ScrollView无限循环阻尼居中（带缩放）
Sam_ONE的博客
03-05 4422
前两天写的SceollView阻尼居中的忘了加入循环列表的功能，本来我以为加入循环的功能不难，当写了才发现，因为上一个版本的Content里为了方便加的两个挂件（Content Size Fitter 和 Grid Layout Group）让我很尴尬，中间我试着实现了循环功能，发现在运行情况下我切换至VS后切换回Unity之后它又让我回到解放前（交换的Item位置又倍还原了。。），其中的原有我大
unity ugui ScrollView无限滚动
873149745
10-29 9619
一、简介 1、ugui中scrollview理论上是支持无限多个item单元（即滚动的单元条目），但实际应用中，我们在一开始实例化几个或者十几个item对象时一般是没问题，但是当item非常多时，几百或者上千时，完全实例化比较耗时消耗性能大，也有可能带来占用手机内存比较高，甚至会让内存溢出。所以这里设计一个新的方式，即根据显示范围大小判断可以同时显示多少个item，比如可以同时6，我们可以初始化...
UnityUGUI实现ScrollView 滑动居中的放大、其他的缩小，简单实现方法
01-21
UnityUGUI实现ScrollView 滑动居中的放大、其他的缩小，简单实现方法 配套资源文章：https://blog.csdn.net/lq1340817945/article/details/121001075
Unity——无限滚动复用列表
小紫苏的博客
09-28 5703
#无限滚动复用列表 ##Demo展示 ##前言 游戏中有非常多的下拉滚动菜单，比如成就列表，任务列表，以及背包仓库之类；如果列表内容非常丰富，会占用大量内存，这篇无限滚动复用ScrollView就是解决这种问题；还可以用来做朋友圈，聊天等； 一般情况，ScrollView中每个Item的大小是一直的，使用ContentSizeFillter组件足够解决大部分问题； 如果每个Item大小不一致，问题就复杂起来，需要做滚动位置判断，我这里做了大小适应； ##设计思
Unity的ScrollView无限循环滚动
大将军岂可有勇无谋？
05-18 9994
当ScrollView下的物体很多上百上千的时候，不可能去实例化出来这么多物体，这个时候需要优化了，不然drawcall会很大很大 ，所以笔者花了1，2天时间去写了一个比较实用的工具，那就是ScrollView无限循环滚动，接下来给大家展示一下效果(剪掉了一些帧数因为太大上传不了，实际效果更加丝滑)，如下： 自我感觉写的还是比较完善的，item样式刷新和点击事件的注册等等的基本功能，支持4...
Unity中实现无限滑动的ScrollView
L的博客
12-13 7608
一：效果演示 二： //例如邮件系统中一个玩家有10000封邮件，排行榜上有10000个排名，如果实例化10000个项则会增加渲染的性能，但在屏幕上可视数量的也就几个，所以可以考虑动态更新 //当ScrollView下的物体很多上百上千的时候，不可能去实例化出来这么多物体，这个时候需要优化了，不然drawcall会很大很大 ...
Unity UGUI滚动视图无限滚动
05-17
Unity UGUI滚动视图无限滚动，内容很实用，稍加修改就可以适用于自己的需求。
Unity UGUI数字滚动
02-09
Unity UGUI数字滚动 Unity UGUI数字滚动Unity UGUI数字滚动Unity UGUI数字滚动Unity UGUI数字滚动
UGUI循环滚动+滑动居中
07-18
支持横向纵向循环滚动和滑动居中，支持任意锚点布局（没有锚点限制），3种居中效果（不回弹，回弹，双向回弹）Grid（布局）不依赖任何脚本可以单独使用，不锁定子物体随意排序。WrapCententy（循环+居中）
unity UGUI 无限循环List，开箱即用，自带例子
11-10
基于unity UGUI 封装的无限循环List，有完整的例子，拿过来可以直接使用，
使用 Godot 游戏引擎为 Apple 的 visionOS 创建游戏和应用的平台
u012842807的专栏
04-20 1222
该游戏的特色是一张由图块组成的地图，以及一个从图块平移到图块以跟踪角色的摄像机。还有敌方怪物绕过障碍物来攻击你的角色。但是，如果您正在构建具有大量移动部件的东西，游戏引擎可以帮助您管理复杂的场景并避免重新实现常见的游戏系统。您将获得 Godot 编辑器的强大功能以及visionOS 出色的原生渲染功能，例如。，一款使用 GodotVision 制作的 VisionOS 游戏。粗略地说：Godot 是后端，RealityKit 是前端。，并将本机空间手势连接到 Godot 中的事件。创建游戏和应用程序。
C#语法知识之循环语句
AMrss的博客
04-20 487
5、循环语句。
C#中的Task：异步编程的瑞士军刀
qq_35320456的博客
04-19 1586
C#中的Task：异步编程的瑞士军刀
学生选课及成绩查询管理系统的设计与开发C#(winform + sqlserver)
最新发布
小张微说的博客
04-22 1926
源码来自网络 技术栈： C#的窗体程序开发 本系统未采用C#实现MDI——多文档窗口，因为考虑到C#的该技术与java类似，而暑期java实训时，曾用过类似的方法做过停车场管理系统，所以想为这次的系统注入一点新鲜的血液，所以本系统设计的主题采用了了C#的C#TreeView 实现。 Sql server数据库 关注公众号【DotNet微说】，发送：学生选课及成绩查询管理系统，便可获取源码。 个人微信：iotzzh 公众号：DotNet微说 个人网站：www.iotzzh.com 登录界面 管理员主页
C# Lazy
大黄鸭在发光的专栏
04-20 231
在 C# 中，Lazy<T>类型用于支持延迟初始化。延迟初始化是一种优化策略，它允许推迟创建对象或执行某些昂贵计算的过程，直到实际需要其值的时刻。这有助于提高应用程序的启动速度和运行效率，特别是在处理资源密集型对象时。以下是关于Lazy<T>
unityugui实现scrollview 滑动居中的放大、其他的缩小
08-04
要实现Unity UGUI中的ScrollView滑动居中放大，其他的缩小，可以按照以下步骤进行操作： 1. 创建一个ScrollView，用于显示内容，并设置合适的大小和位置。 2. 在ScrollView中创建一个Content对象，用于放置所有需要显示的子对象，并设置Layout Group组件，以确保内容按照一定的布局排列。 3. 在每个子对象上添加一个自定义的脚本，用于控制子对象的缩放和位置。脚本中需要包含以下几个要点： a. 监听ScrollView的滑动事件，获取当前的滑动位置。 b. 根据当前滑动位置，计算每个子对象在滑动过程中应该设置的缩放比例。例如，距离居中的子对象应该更大，而距离边缘的子对象应该更小。 c. 根据计算得到的缩放比例，分别对每个子对象进行缩放设置。可以使用RectTransform的scale属性来实现缩放功能。 d. 根据子对象的缩放比例和位置信息，将子对象移动到ScrollView的合适位置。可以使用RectTransform的anchoredPosition属性来实现位置调整。 e. 可以根据需要，在脚本中添加其他的功能，例如点击子对象时的反应等。 4. 将自定义的脚本添加到所有的子对象上，确保每个子对象都能根据滑动进行缩放和位置调整。 通过以上步骤，我们可以实现在Unity UGUI中的ScrollView滑动过程中，距离居中的子对象放大，而距离边缘的子对象缩小的效果。具体的缩放比例和位置调整可以根据实际需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值