【Unity3d】ScrollRect自动定位到某点

游戏开发过程中,经常遇到ScrollRect自动定位到某点的需求。比如,打开关卡列表时自动定位到最新关卡。下面就来介绍下怎么实现。

首先,我们要知道ScrollRect滑动的本质就是改变其normalizedPosition。normalizedPosition有两个垂直方向和水平方向的分量分别叫做verticalNormalizedPosition和horizontalNormlizedPosition,两者的数值都处在闭区间【0-1】。那么这个数值是如何计算出来的呢?其实很简单,我画个示意图说明一下。

【Unity3d】ScrollRect自动定位到某点_第1张图片

 如上图所示,红框代表的是Content,蓝框是可视范围ViewPort,当两者处于上图的状态时,normalizedPosition就是(0,0),这也是它的缺省值。如果把位于Content上的A点移动至P点(就是把目标置于ViewPort的中心)的位置,normalizedPostion的计算方式就是:

normalizedPosition = new Vector[Mathf.Clamp01((A - P).X / delta_Width) ,Mathf.Clamp01((A - P).Y / delta_Height)] 

如果MovementType已经是Clamp,那就可以把Mathf.Clamp01去掉。delta_Width是Content和ViewPort的宽度差,delta_Height是高度差。

计算方式很直观,核心代码也很简单。

private Vector2 CenterPoint(RectTransform target)
    {
        var content = worldMap.content.GetChild(0).GetComponent();
        var viewport = worldMap.viewport;
        Vector3 targetPosition = worldMap.GetComponent().InverseTransformPoint(Clear_Pivot_Offset(target));
        Vector3 viewportPosition = worldMap.GetComponent().InverseTransformPoint(Clear_Pivot_Offset(viewport));
        Vector3 distance_vec = viewportPosition - targetPosition;        
        var height_Delta = content.rect.height - viewport.rect.height;
        var width_Delta = content.rect.width - viewport.rect.width;      
        var ratio_x = distance_vec.x / width_Delta;
        var ratio_y = distance_vec.y / height_Delta; 
        var ratioDistance = new Vector2(ratio_x, ratio_y);
        var newPosition = worldMap.normalizedPosition - ratioDistance;
        return new Vector2(Mathf.Clamp01(newPosition.x), Mathf.Clamp01(newPosition.y));        
    }

    private Vector3 Clear_Pivot_Offset(RectTransform rec)
    {
        var offset = new Vector3((0.5f - rec.pivot.x) * rec.rect.width, 
        (0.5f - rec.pivot.y) * rec.rect.height, 0.0f);
        var newPosition = rec.localPosition + offset;
        return rec.parent.TransformPoint(newPosition);
    }

第一个方法CenterPoint没啥说的,就是把算法代码化。值得注意的是Clear_Pivot_Offset方法,这个方法的作用是消除Pivot数值的影响,Pivot不是(0.5,0.5)时,最后所计算出来的结果会有误差,各位不妨去掉此函数试一试。如果不明白Pivot的概念,可以看下这个链接,解释得很清楚——https://msd.misuland.com/pd/3070888525579681950。

当新的normalizedPosition求出后,便可以实现缓动效果了,代码如下。

void Update()
    {         
        if (_isSlide)
        {
            _currentTime += Time.deltaTime;
            _ratio = _currentTime / _limitTime;
            if (_currentTime >= _limitTime)
            {
                _isSlide = false;
                _ratio = _limitTime;
                Debug.Log("Arrived");
                _currentTime = 0.0f;
                foreach (var btn in button)
                {
                    btn.interactable = true;
                }
            }
            var tempPosition = Vector2.Lerp(_startPosition, _newPosition, _ratio);
            worldMap.normalizedPosition = tempPosition;           
        }
    }

完整的工程我已经上传至github,链接:https://github.com/codeghosts/ScrollRectAutoSlide 

你可能感兴趣的:(Unity之UGUI,unity,ui)