UGUI ScrollRect滑动定位优化详解

 更新时间:2020年6月25日 10:34  点击:1341

UGUI的滑动组件虽然表现上和NGUI的ScrollView一致,但是它更美好的是开放源码的,不了解原理的时候直接查源码就OK。

在使用ScrollRect的时候,想滑动流畅然后定位,既待惯性的滚动设置,如图MovementType指定为Elastic则为带惯性的滑动模式,同时调整Inertia为惯性系数,值越大则惯性表现越大,即滑动手离开后自由滑动到停止所需的时间也越长。Inertia=0时则表示不带惯性,滑动时手离开 滑动即停止。

但是我们既然要用这个组件就是希望它在实现功能的时候体验良好,排除特殊需求,我们当然不希望它一直滚动下去,该停的时候就停,但是如果你检查ScrollRect的源码或直接将滑动中的滚动区坐标变化情况打印出来会发现这个坐标刷新耗时太久了,带惯性的滚动滑动一下就要刷新2甚至更长,坐标变化才会完全结束,如果真等他自然结束我们再做一些如“定位”的操作,真的耗时太长了。因此我想优化一下带惯性的滑动,比如显示它不要自由滑动那么久,加入一个限制时间,比如手离开多长时间就停止滑动。
ScrollRectMe组件在ScrollRect的基础上又增加了两个属性,inertiaMaxTime最大自由滑动的时间和滑动完全结束的事件stopScrollCallback,因为带惯性滚动时OnDrag事件并不能满足需求,那仅仅是手离开就会响应的事件。

2017-6-27更新补充了一下滑动幅度不大的时候或惯性时间都不足设定值inertiaMaxTime 不回调的问题。

最后附上源码:

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
using System;

public class ScrollRectMe : ScrollRect
{
 [SerializeField]
 public float inertiaMaxTime = 0.5f;//限制惯性持续时间

 public Action<GameObject > stopScrollCallback = null;//滑动结束的回调

 private float _scrolledTime = 0f;
 private Action<GameObject> _stopScrollCallback = null;

 private Vector2 _lastPostion = Vector2.zero;

 public override void OnEndDrag(PointerEventData eventData)
 {
 base.OnEndDrag(eventData);
 _stopScrollCallback = stopScrollCallback;
 _scrolledTime = 0f;
 _lastPostion = Vector2.zero;
 }

 public override void OnDrag(PointerEventData eventData)
 {
 base.OnDrag(eventData);
 _scrolledTime = 0f;
 _lastPostion = Vector2.zero;
 }

 public override void StopMovement()
 {
 base.StopMovement(); 
 }

 protected override void LateUpdate()
 {
 // base.LateUpdate();
 }

 private void Update()
 {
 base.LateUpdate();
 }

 protected override void SetContentAnchoredPosition(Vector2 position)
 {
 //2017-6-27 修改补充条件
 if (_scrolledTime >= inertiaMaxTime || (position.ToString("0.0") == _lastPostion.ToString("0.0")))
 {
 if (_stopScrollCallback != null)
 {
 _stopScrollCallback(transform.gameObject);
 _stopScrollCallback = null;
 }
 _scrolledTime = inertiaMaxTime;
 return;
 }

 base.SetContentAnchoredPosition(position);

 _scrolledTime += Time.unscaledDeltaTime;
 _lastPostion = position;
 } 
}

下载地址:ScrollRect优化链接

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

[!--infotagslink--]

相关文章

  • jQuery实现下拉菜单滑动效果

    这篇文章主要为大家详细介绍了jQuery实现下拉菜单滑动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-08-09
  • JavaScript 获取滚动条位置并将页面滑动到锚点

    这篇文章主要介绍了JavaScript 获取滚动条位置并将页面滑动到锚点的的相关资料,帮助大家更好的理解和学习使用JavaScript,感兴趣的朋友可以了解下...2021-02-09
  • uniapp实现可以左右滑动导航栏

    这篇文章主要为大家详细介绍了uniapp 实现可以左右滑动导航栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-10-21
  • js滑动提示效果代码分享

    这篇文章主要为大家分享了js滑动提示效果代码,实现方法简单,感兴趣的小伙伴们可以参考一下...2016-03-12
  • Vue实现tab导航栏并支持左右滑动功能

    本文给大家介绍利用Vue实现tab导航栏,并且通过flex布局实现左右滑动效果,通过代码给大家分享tab导航栏布局的实现,本文给大家展示了完整代码,需要的朋友参考下吧...2021-06-28
  • Unity3D UGUI实现翻书特效

    这篇文章主要为大家详细介绍了Unity3D UGUI实现翻书特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
  • JavaScript+html实现前端页面滑动验证

    这篇文章主要为大家详细介绍了JavaScript+html实现前端页面滑动验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-06
  • 在vue中实现禁止屏幕滚动,禁止屏幕滑动

    这篇文章主要介绍了在vue中实现禁止屏幕滚动,禁止屏幕滑动,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-22
  • jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)

    这篇文章主要介绍了jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-06-24
  • 快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突

    这篇文章主要介绍了快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突问题,感兴趣的小伙伴们可以参考一下...2016-04-18
  • 如何利用原生JS实现触摸滑动监听事件

    这篇文章主要给大家介绍了关于如何利用原生JS实现触摸滑动监听事件的相关资料,文中将实现的原理以及代码介绍的非常详细,需要的朋友可以参考下...2021-06-15
  • JavaScript+html实现前端页面滑动验证(2)

    这篇文章主要为大家详细介绍了JavaScript+html实现前端页面滑动验证的第二种方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-06
  • vue移动端弹起蒙层滑动禁止底部滑动操作

    这篇文章主要介绍了vue移动端弹起蒙层滑动禁止底部滑动操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-22
  • 小程序实现点击tab切换左右滑动

    这篇文章主要为大家详细介绍了小程序实现点击tab切换左右滑动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-15
  • 基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)

    本文结合实例给大家介绍如何实现内容滑动切换的效果,包括左右箭头切换,无限无缝滚动,圆点按钮切换,动画效果,自动切换效果,效果非常不错,感兴趣的朋友前来参考实现代码 ...2016-06-24
  • Unity3D使用UGUI开发原生虚拟摇杆

    这篇文章主要为大家详细介绍了Unity3D使用UGUI开发原生虚拟摇杆,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
  • Unity3D UGUI特效之Image高斯模糊效果

    这篇文章主要为大家详细介绍了Unity3D UGUI特效之Image高斯模糊效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
  • jQuery 如何实现一个滑动按钮开关

    本文给大家分享一段jquery代码实现滑动按钮开关的效果,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的的朋友参考下...2016-12-02
  • Unity UGUI实现滑动翻页效果

    这篇文章主要为大家详细介绍了Unity UGUI实现滑动翻页效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
  • UGUI实现4位验证码输入

    这篇文章主要为大家详细介绍了UGUI实现4位验证码输入,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25