iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >Unity ScrollView如何实现无限滑动效果
  • 401
分享到

Unity ScrollView如何实现无限滑动效果

2023-06-20 18:06:18 401人浏览 安东尼
摘要

小编给大家分享一下Unity ScrollView如何实现无限滑动效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一、效果演示二、前言当邮件中有1000封邮件,

小编给大家分享一下Unity ScrollView如何实现无限滑动效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

一、效果演示

Unity ScrollView如何实现无限滑动效果

二、前言

当邮件中有1000封邮件,商店列表中有1000个物体,如果直接实例化1000条数据显示则会大大增加DrawCall,而大量不可见的数据被Mask组件排除在可视范围之外,但他们依然存在,这时就需要考虑通过一个无限滑动的ScrollView来优化渲染性能

三、实现思路

通过头下标和尾下标记录当前实例化数据的最大最小索引,之后用Content的锚点位置与当头下标的锚点位置进行比较判断滑动的方向以及是否超出滑动范围,如果正方向滑动超出范围则将第一个元素移动到最后一个,如果反方向滑动超出范围则将最后一个元素移动到第一个,这样场景中始终存在5个实例化的元素,依次改变元素的位置和显示即可

四、使用说明

——此功能脚本是对ScrollRect的扩展,所以必须添加UGUI提供的基础Scroll View
——Content上必须添加GridLayoutGroup组件,通过GridLayoutGroup组件设计布局,(我在代码中对startCorner、startAxis、childAlignment和constraintCount进行了限制,不需要对其设置)
——不能添加Content Size Fitter组件
——先调用SetTotalCount方法设置总的数据数量再调用Init方法进行初始化
——根据需求修改SetShow方法体
——只适用于单向滑动的情况,不能满足竖直和水平同时滑动的需求,因为大多数无限滑动列表的使用场景都是单向的

五、完整代码

将InfiniteScrollView脚本挂载到ScrollView上

using System.Collections.Generic;using UnityEngine;using UnityEngine.UI;using System.Linq; /// <summary>/// 无限滑动列表/// </summary>public class InfiniteScrollView : MonoBehaviour{    private ScrollRect scrollRect;//滑动框组件    private RectTransfORM content;//滑动框的Content    private GridLayoutGroup layout;//布局组件     [Header("滑动类型")]    public ScrollType scrollType;    [Header("固定的Item数量")]    public int fixedCount;    [Header("Item的预制体")]    public GameObject itemPrefab;     private int totalCount;//总的数据数量    private List<RectTransform> dataList = new List<RectTransform>();//数据实体列表    private int headIndex;//头下标    private int tailIndex;//尾下标    private Vector2 firstItemAnchoredPos;//第一个Item的锚点坐标     #region Init     /// <summary>    /// 实例化Item    /// </summary>    private void InitItem()    {        for (int i = 0; i < fixedCount; i++)        {            GameObject tempItem = Instantiate(itemPrefab, content);            dataList.Add(tempItem.GetComponent<RectTransform>());            SetShow(tempItem.GetComponent<RectTransform>(), i);        }    }     /// <summary>    /// 设置Content大小    /// </summary>    private void SetContentSize()    {        content.sizeDelta = new Vector2            (                layout.padding.left + layout.padding.right + totalCount * (layout.cellSize.x + layout.spacing.x) - layout.spacing.x - content.rect.width,                layout.padding.top + layout.padding.bottom + totalCount * (layout.cellSize.y + layout.spacing.y) - layout.spacing.y            );    }     /// <summary>    /// 设置布局    /// </summary>    private void SetLayout()    {        layout.startCorner = GridLayoutGroup.Corner.UpperLeft;        layout.startAxis = GridLayoutGroup.Axis.Horizontal;        layout.childAlignment = TextAnchor.UpperLeft;        layout.constraintCount = 1;        if (scrollType == ScrollType.Horizontal)        {            scrollRect.horizontal = true;            scrollRect.vertical = false;            layout.constraint = GridLayoutGroup.Constraint.FixedRowCount;        }        else if (scrollType == ScrollType.Vertical)        {            scrollRect.horizontal = false;            scrollRect.vertical = true;            layout.constraint = GridLayoutGroup.Constraint.FixedColumnCount;        }    }     /// <summary>    /// 得到第一个数据的锚点位置    /// </summary>    private void GetFirstItemAnchoredPos()    {        firstItemAnchoredPos = new Vector2            (                layout.padding.left + layout.cellSize.x / 2,                -layout.padding.top - layout.cellSize.y / 2            );    }     #endregion     #region Main     /// <summary>    /// 滑动中    /// </summary>    private void OnScroll(Vector2 v)    {        if (dataList.Count == 0)        {            Debug.LogWarning("先调用SetTotalCount方法设置数据总数量再调用Init方法进行初始化");            return;        }         if (scrollType == ScrollType.Vertical)        {            //向上滑            while (content.anchoredPosition.y >= layout.padding.top + (headIndex + 1) * (layout.cellSize.y + layout.spacing.y)            && tailIndex != totalCount - 1)            {                //将数据列表中的第一个元素移动到最后一个                RectTransform item = dataList[0];                dataList.Remove(item);                dataList.Add(item);                 //设置位置                SetPos(item, tailIndex + 1);                //设置显示                SetShow(item, tailIndex + 1);                 headIndex++;                tailIndex++;            }            //向下滑            while (content.anchoredPosition.y <= layout.padding.top + headIndex * (layout.cellSize.y + layout.spacing.y)                && headIndex != 0)            {                //将数据列表中的最后一个元素移动到第一个                RectTransform item = dataList.Last();                dataList.Remove(item);                dataList.Insert(0, item);                 //设置位置                SetPos(item, headIndex - 1);                //设置显示                SetShow(item, headIndex - 1);                 headIndex--;                tailIndex--;            }        }        else if (scrollType == ScrollType.Horizontal)        {            //向左滑            while (content.anchoredPosition.x <= -layout.padding.left - (headIndex + 1) * (layout.cellSize.x + layout.spacing.x)            && tailIndex != totalCount - 1)            {                //将数据列表中的第一个元素移动到最后一个                RectTransform item = dataList[0];                dataList.Remove(item);                dataList.Add(item);                 //设置位置                SetPos(item, tailIndex + 1);                //设置显示                SetShow(item, tailIndex + 1);                 headIndex++;                tailIndex++;            }            //向右滑            while (content.anchoredPosition.x >= -layout.padding.left - headIndex * (layout.cellSize.x + layout.spacing.x)            && headIndex != 0)            {                //将数据列表中的最后一个元素移动到第一个                RectTransform item = dataList.Last();                dataList.Remove(item);                dataList.Insert(0, item);                 //设置位置                SetPos(item, headIndex - 1);                //设置显示                SetShow(item, headIndex - 1);                 headIndex--;                tailIndex--;            }        }    }     #endregion     #region Tool     /// <summary>    /// 设置位置    /// </summary>    private void SetPos(RectTransform trans, int index)    {        if (scrollType == ScrollType.Horizontal)        {            trans.anchoredPosition = new Vector2            (                index == 0 ? layout.padding.left + firstItemAnchoredPos.x :                layout.padding.left + firstItemAnchoredPos.x + index * (layout.cellSize.x + layout.spacing.x),                firstItemAnchoredPos.y            );        }        else if (scrollType == ScrollType.Vertical)        {            trans.anchoredPosition = new Vector2            (                firstItemAnchoredPos.x,                index == 0 ? -layout.padding.top + firstItemAnchoredPos.y :                -layout.padding.top + firstItemAnchoredPos.y - index * (layout.cellSize.y + layout.spacing.y)            );        }    }     #endregion     #region 外部调用     /// <summary>    /// 初始化    /// </summary>    public void Init()    {        scrollRect = GetComponent<ScrollRect>();        content = scrollRect.content;        layout = content.GetComponent<GridLayoutGroup>();        scrollRect.onValueChanged.AddListener((Vector2 v) => OnScroll(v));         //设置布局        SetLayout();         //设置头下标和尾下标        headIndex = 0;        tailIndex = fixedCount - 1;         //设置Content大小        SetContentSize();         //实例化Item        InitItem();         //得到第一个Item的锚点位置        GetFirstItemAnchoredPos();    }     /// <summary>    /// 设置显示    /// </summary>    public void SetShow(RectTransform trans, int index)    {        //=====根据需求进行编写        trans.GetComponentInChildren<Text>().text = index.ToString();        trans.name = index.ToString();    }     /// <summary>    /// 设置总的数据数量    /// </summary>    public void SetTotalCount(int count)    {        totalCount = count;    }     /// <summary>    /// 销毁所有的元素    /// </summary>    public void DestoryAll()    {        for (int i = dataList.Count - 1; i >= 0; i--)        {            DestroyImmediate(dataList[i].gameObject);        }        dataList.Clear();    }     #endregion} /// <summary>/// 滑动类型/// </summary>public enum ScrollType{    Horizontal,//竖直滑动    Vertical,//水平滑动}

以上是“Unity ScrollView如何实现无限滑动效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网精选频道!

--结束END--

本文标题: Unity ScrollView如何实现无限滑动效果

本文链接: https://www.lsjlt.com/news/298782.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Unity ScrollView实现无限滑动效果
    本文实例为大家分享了Unity ScrollView实现无限滑动效果的具体代码,供大家参考,具体内容如下 一、效果演示 二、前言 当邮件中有1000封邮件,商店列表中有1000个物...
    99+
    2024-04-02
  • Unity ScrollView如何实现无限滑动效果
    小编给大家分享一下Unity ScrollView如何实现无限滑动效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一、效果演示二、前言当邮件中有1000封邮件,...
    99+
    2023-06-20
  • Unity ScrollView如何实现无限循环效果
    小编给大家分享一下Unity ScrollView如何实现无限循环效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下在Unity引擎中ScrollVi...
    99+
    2023-06-20
  • Unity ScrollView实现无限循环效果
    本文实例为大家分享了Unity ScrollView实现无限循环效果的具体代码,供大家参考,具体内容如下 在Unity引擎中ScrollView组件是一个使用率比较高的组件,该组件能...
    99+
    2024-04-02
  • iOS实现无限滑动效果
    在看到这个标题的时候,相信大家心里肯定会想,无限循环轮播的博客已经满天飞了,好有必要写么。这里我想声明一下,这里的无线滑动,但是数据却不循环。 实现原理 由于业务的需求,需要有大量的...
    99+
    2024-04-02
  • Unity ScrollView实现自动吸附效果
    本文实例为大家分享了Unity ScrollView实现自动吸附效果的具体代码,供大家参考,具体内容如下 一、效果演示 二、实现思路 通过使用UGUI的拖拽接口,在拖拽结束时比较当...
    99+
    2024-04-02
  • ScrollView与SeekBar绑定如何实现滑动时出现小滑块效果
    这篇文章主要介绍ScrollView与SeekBar绑定如何实现滑动时出现小滑块效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!重写SeekBarpublic class VerticalSee...
    99+
    2023-05-30
    scrollview seekbar 滑动
  • Unity ScrollRect实现轨迹滑动效果
    本文实例为大家分享了Unity ScrollRect实现轨迹滑动效果的具体代码,供大家参考,具体内容如下 以下内容是根据Unity 2020.1.01f版本进行编写的 1、目的 工作...
    99+
    2024-04-02
  • Unity实现滑动更换界面效果
    在做2048这个游戏时,因为菜单页面还能查看游戏规则,而这些规则又不在同一个页上,所以需要滑动页面实现页面切换,但是仅仅使用unity提供的组件做出的效果仅有一个切换的意思,交互感很...
    99+
    2024-04-02
  • Unity中怎么利用ScrollView实现自动吸附效果
    Unity中怎么利用ScrollView实现自动吸附效果,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。通过使用UGUI的拖拽接口,在拖拽结束时比较当前滑动框的Normalize...
    99+
    2023-06-20
  • react如何实现滑动效果
    今天小编给大家分享一下react如何实现滑动效果的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。react实现滑动的方法:1、...
    99+
    2023-07-04
  • Android如何实现View滑动效果
    这篇文章给大家分享的是有关Android如何实现View滑动效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、View的滑动简介View的滑动是Android实现自定义控件的基础,同时在开发中我们也难免会遇到...
    99+
    2023-06-14
  • iOS如何实现背景滑动效果
    这篇文章主要介绍了iOS如何实现背景滑动效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下第一步、在很多APP中,我们都可以看见那些特效绚丽的滑动选项条,那么如何...
    99+
    2023-06-29
  • Unity如何实现人像动漫化效果
    这篇文章主要介绍了Unity如何实现人像动漫化效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Unity如何实现人像动漫化效果文章都会有所收获,下面我们一起来看看吧。接口介绍:运用对抗生成网络技术,结合人脸检...
    99+
    2023-06-26
  • CSS3如何实现无限循环的滚动效果
    这篇文章主要讲解了“CSS3如何实现无限循环的滚动效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS3如何实现无限循环的滚动效果”吧!1. 使用CSS3来实现若要用CSS3的属性实现的...
    99+
    2023-07-04
  • Android如何实现平滑翻动效果
    这篇文章给大家分享的是有关Android如何实现平滑翻动效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体内容如下效果activity加implementsimplements GestureDet...
    99+
    2023-06-14
  • jQuery如何实现图片滑动效果
    这篇文章主要为大家展示了“jQuery如何实现图片滑动效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何实现图片滑动效果”这篇文章吧。思路:当鼠...
    99+
    2024-04-02
  • vue3实现CSS无限无缝滚动效果
    本文实例为大家分享了vue3实现CSS无限无缝滚动效果的具体代码,供大家参考,具体内容如下 template 双层div嵌套,进行隐藏滚动显示 <div class="li...
    99+
    2024-04-02
  • 如何用CSS实现平滑滚动效果
    如何用CSS实现平滑滚动效果在网页设计与开发中,滚动效果是一种非常常见且炫酷的效果,能够为用户带来更好的体验。而实现平滑滚动效果,可以通过CSS的一些技巧来实现。本文将介绍如何使用CSS来实现平滑滚动效果,并提供具体的代码示例。一、使用锚点...
    99+
    2023-11-21
    平滑 CSS 滚动效果
  • CSS过渡效果:如何实现元素的滑动效果
    CSS过渡效果:如何实现元素的滑动效果引言:在网页设计中,元素的动态效果能够提升用户体验,其中滑动效果是一个常见而又受欢迎的过渡效果。通过CSS的过渡属性,我们可以轻松实现元素的滑动动画效果。本文将介绍如何使用CSS过渡属性来实现元素的滑动...
    99+
    2023-11-21
    滑动效果 元素 CSS过渡
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作