iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >Unity中怎么利用ScrollView实现自动吸附效果
  • 164
分享到

Unity中怎么利用ScrollView实现自动吸附效果

2023-06-20 17:06:27 164人浏览 泡泡鱼
摘要

Unity中怎么利用ScrollView实现自动吸附效果,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。通过使用UGUI的拖拽接口,在拖拽结束时比较当前滑动框的NORMalize

Unity中怎么利用ScrollView实现自动吸附效果,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

通过使用UGUI的拖拽接口,在拖拽结束时比较当前滑动框的NORMalizedPositon与每一页的NormalizedPositon值,找到距离当前拖拽结束位置最近的页并缓慢滑动过去

三、使用说明

——此功能脚本是对ScrollView的扩展,所以必须添加UGUI提供的基础Scroll View
——Content上必须添加GridLayoutGroup组件并添加所有列表中的项(不是动态添加),只是为了方便满足布局需求(我在代码中对startCorner、startAxis、childAlignment和constraintCount进行了限制,不需要对其设置)
——不能添加Content Size Fitter组件
——测试出适合的视为滑动一页的距离和视为滑动多页的距离数值并填入即可

四、完整代码

将AutoAdsorbScrollView脚本挂载到ScrollView上

using UnityEngine;using UnityEngine.UI;using UnityEngine.EventSystems; /// <summary>/// 自动吸附的滑动列表/// </summary>public class AutoAdsorbScrollView : MonoBehaviour, IBeginDragHandler, IEndDragHandler{    private ScrollRect scrollRect;//滑动框组件    private RectTransform content;//滑动框的Content    private GridLayoutGroup layout;//布局组件     private int totalPage; //总页数    private int curPage; //当前页的下标    private float[] eachPageNUPos; //每页的NormalizedPositon的值    private float targetNUPos; //目标页的NormalizedPositon的值     private Vector2 beginMousePos; //鼠标开始按下的位置    private Vector2 endMousePos; //鼠标结束按下的位置    private bool isDrag; //是否在拖拽     [Header("是否可以滑动多页")]    public bool sliderMultPage;     [Header("视为滑动一页的距离")]    [Space(25)]    public float sliderOnePageDis;    [Header("视为滑动多页的距离")]    public float sliderMultPageDis;    [Header("缓动到目标页的持续时间")]    public float duration;     #region Init     private void Awake()    {        scrollRect = GetComponent<ScrollRect>();        content = scrollRect.content;        layout = content.GetComponent<GridLayoutGroup>();         Init();//初始化    }     /// <summary>    /// 初始化    /// </summary>    private void Init()    {        totalPage = content.childCount;         SetContentSize();//设置Content大小         CalcEachPageNUPos();//计算每一页的NormalizedPositon值         SetLayout();//设置布局    }     /// <summary>    /// 设置Content大小    /// </summary>    private void SetContentSize()    {        content.sizeDelta = new Vector2            (                layout.padding.right + layout.padding.left + (totalPage - 1) * (layout.cellSize.x + layout.spacing.x) - layout.spacing.x,                content.sizeDelta.y            ); ;    }     /// <summary>    /// 计算每一页的NormalizedPositon值    /// </summary>    private void CalcEachPageNUPos()    {        float tempNUPos = 0;        eachPageNUPos = new float[totalPage];        for (int i = 0; i < totalPage; i++)        {            eachPageNUPos[i] = tempNUPos;            tempNUPos += 1f / (totalPage - 1);        }    }     /// <summary>    /// 设置布局    /// </summary>    private void SetLayout()    {        scrollRect.horizontal = true;        scrollRect.vertical = false;        layout.padding.right = layout.padding.left;        layout.startCorner = GridLayoutGroup.Corner.UpperLeft;        layout.childAlignment = TextAnchor.MiddleCenter;        layout.constraintCount = 1;    }     #endregion     #region Main     /// <summary>    /// 拖拽开始    /// </summary>    public void OnBeginDrag(PointerEventData eventData)    {        isDrag = true;        beginMousePos = Input.mousePosition;    }     /// <summary>    /// 拖拽结束    /// </summary>    /// <param name="eventData"></param>    public void OnEndDrag(PointerEventData eventData)    {        isDrag = false;        coe = 0;         endMousePos = Input.mousePosition;        Vector2 offset = endMousePos - beginMousePos;        Debug.Log("滑动距离为:" + offset);         if (sliderMultPage)        {            //单页滑动            if (Mathf.Abs(offset.x) >= sliderOnePageDis && Mathf.Abs(offset.x) < sliderMultPageDis)            {                float tempHorizontalNUPos = scrollRect.horizontalNormalizedPosition;                FindNearlyPage(tempHorizontalNUPos);            }            //多页滑动            else if (Mathf.Abs(offset.x) >= sliderMultPageDis)            {                if (offset.x > 0)                {                    curPage = 0;                }                else if (offset.x < 0)                {                    curPage = totalPage - 1;                }            }        }        else        {            //单页滑动            if (Mathf.Abs(offset.x) >= sliderOnePageDis)            {                float tempHorizontalNUPos = scrollRect.horizontalNormalizedPosition;                FindNearlyPage(tempHorizontalNUPos);            }        }         targetNUPos = eachPageNUPos[curPage];    }     private float coe;//比例系数    private void Update()    {        if (isDrag)        {            return;        }        coe += Time.deltaTime / duration;        scrollRect.horizontalNormalizedPosition = Mathf.Lerp(scrollRect.horizontalNormalizedPosition, targetNUPos, coe);    }     #endregion     #region Tool     /// <summary>    /// 寻找距离当前NormalizedPositon最近的页    /// </summary>    private void FindNearlyPage(float tempHorizontalNUPos)    {        float minOffset = Mathf.Abs(eachPageNUPos[0] - tempHorizontalNUPos);        for (int i = 0; i < totalPage; i++)        {            float tempHorizontalOffset = Mathf.Abs(eachPageNUPos[i] - tempHorizontalNUPos);            if (tempHorizontalOffset <= minOffset)            {                minOffset = tempHorizontalOffset;                curPage = i;            }        }    }     #endregion}

看完上述内容,你们掌握Unity中怎么利用ScrollView实现自动吸附效果的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注编程网精选频道,感谢各位的阅读!

--结束END--

本文标题: Unity中怎么利用ScrollView实现自动吸附效果

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

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

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

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

下载Word文档
猜你喜欢
  • Unity中怎么利用ScrollView实现自动吸附效果
    Unity中怎么利用ScrollView实现自动吸附效果,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。通过使用UGUI的拖拽接口,在拖拽结束时比较当前滑动框的Normalize...
    99+
    2023-06-20
  • Unity ScrollView实现自动吸附效果
    本文实例为大家分享了Unity ScrollView实现自动吸附效果的具体代码,供大家参考,具体内容如下 一、效果演示 二、实现思路 通过使用UGUI的拖拽接口,在拖拽结束时比较当...
    99+
    2024-04-02
  • Unity ScrollView实现无限滑动效果
    本文实例为大家分享了Unity ScrollView实现无限滑动效果的具体代码,供大家参考,具体内容如下 一、效果演示 二、前言 当邮件中有1000封邮件,商店列表中有1000个物...
    99+
    2024-04-02
  • CSS怎么实现吸附效果
    这篇文章主要讲解了“CSS怎么实现吸附效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS怎么实现吸附效果”吧!原理在 jQuery 时代就有很多吸附效果插件了,现在常用的三大前端框架也...
    99+
    2023-06-27
  • Unity ScrollView如何实现无限滑动效果
    小编给大家分享一下Unity ScrollView如何实现无限滑动效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一、效果演示二、前言当邮件中有1000封邮件,...
    99+
    2023-06-20
  • Android 中怎么利用ScrollView实现反弹效果
    本篇文章给大家分享的是有关Android 中怎么利用ScrollView实现反弹效果,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。自定义ScrollView控件: p...
    99+
    2023-05-30
    android scrollview
  • Android自定义View实现拖动自动吸边效果
    本文实例为大家分享了Android自定义View实现拖动自动吸边的具体代码,供大家参考,具体内容如下 自定义View,一是为了满足设计需求,二是开发者进阶的标志之一。随心所欲就是我等...
    99+
    2024-04-02
  • 利用unity怎么实现一个翻页效果
    这期内容当中小编将会给大家带来有关利用unity怎么实现一个翻页效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。创建物体ToPanel;添加组件ScrollRect,在下面创建一个空物体用来装需要移动的...
    99+
    2023-06-06
  • vue中el-table实现自动吸顶效果(支持fixed)
    目录前言实现思路效果:使用:主要源码:前言 看了很多案例,从简单的角度,position:sticky,似乎是比较理想的选择,可是当el-table设置了fixed后,这里的fix...
    99+
    2024-04-02
  • 怎么在Android中利用ScrollView 实现一个伸缩放大效果
    这篇文章给大家介绍怎么在Android中利用ScrollView 实现一个伸缩放大效果,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。核心的控件就是下面的这段代码:package com.kokjuis.tra...
    99+
    2023-05-31
    android scrollview roi
  • Android怎么自定义scrollview实现回弹效果
    本篇内容主要讲解“Android怎么自定义scrollview实现回弹效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Android怎么自定义scrollview实现回弹效果”吧! 新建MyS...
    99+
    2023-06-29
  • 怎么在Android中利用ScrollView实现一个放大回弹效果
    这期内容当中小编将会给大家带来有关怎么在Android中利用ScrollView实现一个放大回弹效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。自定义ScrollView创建一个类,继承ScrollVi...
    99+
    2023-05-31
    scrollview android roi
  • Unity中怎么利用Shader实现一个3D翻页效果
    本篇文章给大家分享的是有关Unity中怎么利用Shader实现一个3D翻页效果,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。效果图:原理:Shader顶点动画在顶点着色器进行对...
    99+
    2023-06-20
  • react.js中怎么实现tab吸顶效果
    这篇文章给大家分享的是有关react.js中怎么实现tab吸顶效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在react项目开发中有一个需求是,页面滚动到tab所在位置时,t...
    99+
    2024-04-02
  • vue基于websocket实现智能聊天及吸附动画效果
    目录前言:1.效果如下:2.主要功能:2.1.基于websocket实现聊天功能,封装了一个socket.js文件2.2使用Jwchat插件实现类似QQ、微信电脑端的功能2.3动画效...
    99+
    2024-04-02
  • React中怎么利用DOM实现动态吸底部
    React中怎么利用DOM实现动态吸底部,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。动态吸底:开始时fixed在页面上,当页面滚动到距离底部...
    99+
    2024-04-02
  • vue基于websocket如何实现智能聊天及吸附动画效果
    这篇“vue基于websocket如何实现智能聊天及吸附动画效果”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue基于we...
    99+
    2023-07-02
  • 怎么在Android中使用ScrollView实现一个下拉弹回动画效果
    本篇文章给大家分享的是有关怎么在Android中使用ScrollView实现一个下拉弹回动画效果,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。Android是什么Android...
    99+
    2023-05-30
    android scrollview
  • 如何在Android中利用ScrollView实现一个顶部悬停效果
    这期内容当中小编将会给大家带来有关如何在Android中利用ScrollView实现一个顶部悬停效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。原理:原理其实很简单就是对view的gone和visibl...
    99+
    2023-05-31
    android scrollview roi
  • FineReport中怎么实现自动滚屏效果
    本篇文章为大家展示了FineReport中怎么实现自动滚屏效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。添加加载结束事件点击菜单模板>模板web属性>分页预览设置,选择“为该模板单独...
    99+
    2023-06-04
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作