unity Scroll View元素拖拽自動吸附居中、卡牌效果

利用Scroll View控件做拖拽自動吸附居中效果

1、新建一個Scrool View控件,去掉兩個Scroolbar,因爲不需要;

然後在Viewport下建一個CenterPoint空對象跟Content同級作爲中心位置用來比較;

最後給Content添加元素。

2、取消垂直拖拽,即去掉Vertical的勾選;Movement Type 設置爲Unrestricted,如下圖。

3、yiyi對應引用對象;添加Event Trigger組件,再添加Begin Drag和End Drag事件,再調用腳本代碼。

4、代碼如下

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class testttt : MonoBehaviour {
    public RectTransform viewport;
    public RectTransform[] elements;
    public RectTransform centerPoint;
    public RectTransform content;

    private  Vector2 newPos;
    private int distanceBetweenEles;
    private float[] distanceToCenter;
    private int minEleNum;
    private bool isDragging = false;
    // Use this for initialization
    void Start () {
       
        int elelength = elements.Length;
        distanceToCenter = new float[elelength];
        //獲得元素間隔距離
        distanceBetweenEles = (int)Mathf.Abs(elements[1].anchoredPosition.x - elements[0].anchoredPosition.x);
    }

    
    void Update()
    {

         //當前位置跟計算得到吸附位置接近的時候不再進行計算最小位置
        if (Vector2.Distance(content.anchoredPosition, newPos)>5f)
        {
            for (int i = 0; i < elements.Length; i++)
            {
                //得到每個元素到中心點的距離
                distanceToCenter[i] = Mathf.Abs(centerPoint.transform.position.x - elements[i].transform.position.x);
            }
            //獲得最近距離
            float minDist = Mathf.Min(distanceToCenter);

            for (int i = 0; i < elements.Length; i++)
            {
                //找到最小距離的元素索引
                if (minDist == distanceToCenter[i])
                {
                    minEleNum = i;
                }
            }
        }
        if(!isDragging)
        {
            //當前沒有拖拽,自動吸附居中
            newPos = new Vector2(minEleNum * -distanceBetweenEles, viewport.anchoredPosition.y);
            content.anchoredPosition = Vector2.Lerp(content.anchoredPosition, newPos, Time.deltaTime * 5f);
        }
    }

    public void StartDrag()
    {
        isDragging = true;
    }
    public void EndDrag()
    {
        isDragging = false;
    }
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章