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;        //取鼠标起始位置
    }
}

 

 

 

 右滑体验感并不好，调整了单个单元格长度、间隙和左偏移值以后还是毫无变化，代码解释见注释，待修改。