Unity-ScrollView實現頁面翻動效果

游戲關卡需要通過觸屏翻動來選擇。

實現：

• 創建panel后在面板下邊創建UI-ScrollView，在content下完成當前游戲所需UI。

 

 

 

示例游戲面板：

 

• 掛載腳本到ScrollVeiw組件下方，代碼如下。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
using System;
using DG.Tweening;

public class SlideScrollView : MonoBehaviour,IBeginDragHandler,IEndDragHandler {

    private RectTransform contentTrans;
    private float beginMousePositionX;
    private float endMousePositionX;
    private ScrollRect scrollRect;

    public int cellLength;
    public int spacing;
    public int leftOffset;
    private float moveOneItemLength;

    private Vector3 currentContentLocalPos;

    public int totalItemNum;
    public int currentIndex;

    private void Awake()
    {
        scrollRect = GetComponent<ScrollRect>();
        contentTrans = scrollRect.content;
        moveOneItemLength = cellLength + spacing;       //移動一個單元格所需距離
        currentContentLocalPos = contentTrans.localPosition;    //UI一出現就把content記錄下位置做初始值
        currentIndex = 1;
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        endMousePositionX = Input.mousePosition.x;      //結束拖拽時也要取得鼠標終止位置
        float offSetX = 0;          //差值先賦值
        float moveDistance = 0;     //具體要去移動的距離 當次需要滑動的距離
        offSetX = beginMousePositionX - endMousePositionX;  

        if (offSetX > 0)                //差值如果大於0就是 右滑
        {
            if (currentIndex >= totalItemNum)       //如果已經滑到最右端了就不能動了
            {
                return;
            }
            moveDistance = moveOneItemLength;
            currentIndex++;
        }
        else                            //否則左滑
        {
            if (currentIndex <= 1)      //已經滑動到最左端
            {
                return;
            }
            moveDistance = moveOneItemLength;
            currentIndex--;
        }
        DOTween.To(() => contentTrans.localPosition, lerpValue => contentTrans.localPosition = lerpValue, currentContentLocalPos + new Vector3(moveDistance,0,0),0.3f).SetEase(Ease.Linear);
        //想要改變局部坐標                 令當前的局部坐標=計算出來的差值        想要達到：當前存在的位置+當次需要具體移動的位置（上邊計算出來的移動距離，y和z不需要移動） 0.5s完成移動 最后是緩動函數
        currentContentLocalPos += new Vector3(moveDistance, 0, 0);
    }

    public void OnBeginDrag(PointerEventData eventData)
    {
        beginMousePositionX = Input.mousePosition.x;        //取鼠標起始位置
    }
}

 

 

 

 右滑體驗感並不好，調整了單個單元格長度、間隙和左偏移值以后還是毫無變化，代碼解釋見注釋，待修改。