Unity ScrollView实现自动吸附效果

本文实例为大家分享了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
}

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

(0)

相关推荐

  • Unity实现ScrollView滑动吸附功能

    本文实例为大家分享了Unity实现ScrollView滑动吸附的具体代码,供大家参考,具体内容如下 最近在做一个展示模块的时候遇到了一个需要实现滑动窗口并且能固定吸附距离的需求,借助UGUI的ScrollView的API以及Dotween实现了这个功能.主要核心逻辑就是检测Content节点的RectTransform的localPosX的移动距离然后继承实现OnDrag几个接口来完成拖动再松开自动吸附到具体的位置.具体效果如下 另外说一下有几个ScrollView自带的API需要设置一下,一个

  • Unity ScrollView实现自动吸附效果

    本文实例为大家分享了Unity ScrollView实现自动吸附效果的具体代码,供大家参考,具体内容如下 一.效果演示 二.实现思路 通过使用UGUI的拖拽接口,在拖拽结束时比较当前滑动框的NormalizedPositon与每一页的NormalizedPositon值,找到距离当前拖拽结束位置最近的页并缓慢滑动过去 三.使用说明 --此功能脚本是对ScrollView的扩展,所以必须添加UGUI提供的基础Scroll View --Content上必须添加GridLayoutGroup组件并添

  • Unity ScrollView实现无限循环效果

    本文实例为大家分享了Unity ScrollView实现无限循环效果的具体代码,供大家参考,具体内容如下 在Unity引擎中ScrollView组件是一个使用率比较高的组件,该组件能上下或者左右拖动的UI列表,背包.展示多个按钮等情况的时候会用到,在做排行榜类似界面时,item非常多,可能有几百个,一次创建这么多GameObject是非常卡的.为此,使用只创建可视区一共显示的个数,加上后置准备个数. 由于ScrollView有两种滚动方式,水平滚动或者垂直滚动,所以我创建了ScrollBase基

  • Android RecycleView滑动停止后自动吸附效果的实现代码(滑动定位)

    最近有个需求 要求列表 滑动后第一条 需要和顶部对齐 上网找了找  发现 官方支持 Recycle + LinearSnapHelper 可以实现 但我实际操作加上后 发现会卡顿 滑动卡顿 没有以前那种流畅感了 想了想  算了 懒得看源码  还是自己写一个得了 效果图 : 代码如下 注释很清楚了 package com.example.testapp import androidx.appcompat.app.AppCompatActivity import android.os.Bundle

  • Unity ScrollView实现无限滑动效果

    本文实例为大家分享了Unity ScrollView实现无限滑动效果的具体代码,供大家参考,具体内容如下 一.效果演示 二.前言 当邮件中有1000封邮件,商店列表中有1000个物体,如果直接实例化1000条数据显示则会大大增加DrawCall,而大量不可见的数据被Mask组件排除在可视范围之外,但他们依然存在,这时就需要考虑通过一个无限滑动的ScrollView来优化渲染性能 三.实现思路 通过头下标和尾下标记录当前实例化数据的最大最小索引,之后用Content的锚点位置与当头下标的锚点位置进

  • 微信小程序scroll-view点击项自动居中效果的实现

    scroll-view | 微信开放文档 效果 代码 布局样式代码省略,以下只展示逻辑代码 <scroll-view scroll-x scroll-left="{{scrollLeft}}" scroll-with-animation class="scroll-view"> <view class="class-item" wx:for="{{classList}}" wx:key="id&qu

  • Android自定义View实现自动吸附功能

    本文实例为大家分享了Android实现自动吸附功能的具体代码,供大家参考,具体内容如下 1.简述 最近开发app过程中要实现拖动view后要可以自动吸附功能,所以需要自定义view来在onTouchEvent中来利用动画来实现此功能 2.功能代码部分 import android.content.Context; import android.graphics.Canvas; import android.util.AttributeSet; import android.util.Log; i

  • Unity实现老虎机滚动抽奖效果的示例代码

    直接看下效果图吧: 制作思路: 设计四张图片,五个点,每个图片同时向下一个点移动,到最后一个就回到0号点,以此循环. 场景搭建: 创建Image命名为Bg作为电视框背景: 创建Image命名Mask并添加Mask组件作为电视框内容显示遮罩框: 创建四个Image作为滚动图片: 创建开始抽奖按钮: PS:实际项目中可以根据需求来动态修改图片显示,以达到的控制每次抽奖奖品内容. 源码分享: using System.Collections; using UnityEngine; using Unit

  • 微信小程序实现分类菜单激活状态随列表滚动而自动切换效果详解

    目录 view结构 js部分 属性解释 说明 注意 这里主要用到微信小程序提供的SelectorQuery获取页面节点信息实现,组件用的是微信小程序的scroll-view 逻辑就是获取右侧盒子的节点信息,获取右侧子分类的节点信息,当子分类滑动到顶部的之后,则切换左侧分类状态,而且当右侧子分类的位置处于触顶以及包含顶部位置的状态下,同样激活左侧分类状态. view结构 左侧父级分类 <scroll-view class="left" scroll-y > <view

  • Android编程实现图片的浏览、缩放、拖动和自动居中效果

    本文实例讲述了Android编程实现图片的浏览.缩放.拖动和自动居中效果的方法.分享给大家供大家参考,具体如下: Touch.java /** * 图片浏览.缩放.拖动.自动居中 */ public class Touch extends Activity implements OnTouchListener { Matrix matrix = new Matrix(); Matrix savedMatrix = new Matrix(); DisplayMetrics dm; ImageVie

  • JS实现的自动打字效果示例

    本文实例讲述了JS实现的自动打字效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>js typing</title> </head> <body> <div id='divTyping'></div> <script> var str = 'js 实现的 打字效果,感

随机推荐