前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【100个 Unity实用技能】☀️ | Unity UGUI ScrollView滑动到指定位置

【100个 Unity实用技能】☀️ | Unity UGUI ScrollView滑动到指定位置

作者头像
呆呆敲代码的小Y
发布2023-08-13 10:51:05
8150
发布2023-08-13 10:51:05
举报

Unity 小科普

老规矩,先介绍一下 Unity 的科普小知识:

  • Unity是 实时3D互动内容创作和运营平台 。
  • 包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者,借助 Unity 将创意变成现实。
  • Unity 平台提供一整套完善的软件解决方案,可用于创作、运营和变现任何实时互动的2D和3D内容,支持平台包括手机、平板电脑、PC、游戏主机、增强现实和虚拟现实设备。
  • 也可以简单把 Unity 理解为一个游戏引擎,可以用来专业制作游戏!

Unity 实用小技能学习

Unity UGUI ScrollView滑动到指定位置

Unity 中在使用ScrollView的时候,有需求是需要将ScrollView定位到指定的Item上。

如领取一个奖励列表时,每次打开ScrollView让其滑动到最后一个可领取的Item中。

方法一:计算比例完成滑动

这里只要计算好item的比例并利用ScrollView的API即可轻松完成该功能,主要用到verticalNormalizedPosition horizontalNormalizedPosition 两个参数。 代码如下:

代码语言:javascript
复制
using UnityEngine;
using UnityEngine.UI;
public class ScrollViewTest : MonoBehaviour
{
    private ScrollRect scrollRect;
 
    private void Start()
    {
        scrollRect= GetComponent<ScrollRect>();
    }
    
    /// <summary>
    /// 设置Rect位置
    /// </summary>
    /// <param name="value">取值范围0-1 ,0代表滑动到最底部或者最左边,1代表滑动到最顶部或者最右边</param>
    /// <param name="isvertical">是否设置Vertical竖向滑动</param>
    public void SetRectPos(float value, bool isvertical)
    {
        if (isvertical)
            scrollRect.verticalNormalizedPosition = value;
        else
            scrollRect.horizontalNormalizedPosition = value;
    }
}

我们需要拿到这个Item在ScrollView中的索引位置,将其与当前所有的Item进行计算,得到一个大小在 0 ~ 1 的float值,将其传入方法即可完成滑动。

方法二:计算位置进行滑动

使用计算的方式,计算出指定的item的坐标,然后进行赋值即可。

代码语言:javascript
复制
using UnityEngine;
using DG.Tweening;
using UnityEngine.UI;
 
public class ScrollViewNevigation : MonoSingleton<ScrollViewNevigation>
{
 
    private ScrollRect scrollRect;
    private RectTransform viewport;
    private RectTransform content;
 
	// Use this for initialization
	void Start ()
	{
 
	    Init();
	    //Nevigate(content.GetChild(45).GetComponent<RectTransform>());
	}

    private void Init()
    {
        if (scrollRect == null)
        {
            scrollRect = this.GetComponent<ScrollRect>();
        }
        if (viewport == null)
        {
            viewport = this.transform.Find("Viewport").GetComponent<RectTransform>();
        }
 
        if (content == null)
        {
            content = this.transform.Find("Viewport/Content").GetComponent<RectTransform>();
        }
    }
 
    public void Nevigate(RectTransform item)
    {
 
        Vector3 itemCurrentLocalPostion = scrollRect.GetComponent<RectTransform>().InverseTransformVector(ConvertLocalPosToWorldPos(item));
        Vector3 itemTargetLocalPos = scrollRect.GetComponent<RectTransform>().InverseTransformVector(ConvertLocalPosToWorldPos(viewport));
 
        Vector3 diff = itemTargetLocalPos - itemCurrentLocalPostion;
        diff.z = 0.0f;
 
        var newNormalizedPosition = new Vector2(
            diff.x / (content.GetComponent<RectTransform>().rect.width - viewport.rect.width),
            diff.y / (content.GetComponent<RectTransform>().rect.height - viewport.rect.height)
            );
 
        newNormalizedPosition = scrollRect.GetComponent<ScrollRect>().normalizedPosition - newNormalizedPosition;
 
        newNormalizedPosition.x = Mathf.Clamp01(newNormalizedPosition.x);
        newNormalizedPosition.y = Mathf.Clamp01(newNormalizedPosition.y);
 
 		//有DOTween时使用
        DOTween.To(() => scrollRect.GetComponent<ScrollRect>().normalizedPosition, x => scrollRect.GetComponent<ScrollRect>().normalizedPosition = x, newNormalizedPosition, 0.8f);
        //无DOTween时使用
        scrollRect.GetComponent<ScrollRect>().normalizedPosition = newNormalizedPosition;
    }
 
    private Vector3 ConvertLocalPosToWorldPos(RectTransform target)
    {
        var pivotOffset = new Vector3(
            (0.5f - target.pivot.x) * target.rect.size.x,
            (0.5f - target.pivot.y) * target.rect.size.y,
            0f);
 
        var localPosition = target.localPosition + pivotOffset;
 
        return target.parent.TransformPoint(localPosition);
    }
}

调用其中方法Nevigate()传入指定的Item即可。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2023-08-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Unity 小科普
  • Unity 实用小技能学习
    • Unity UGUI ScrollView滑动到指定位置
      • 方法一:计算比例完成滑动
      • 方法二:计算位置进行滑动
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档