Unity實現滑動更換界面效果

在做2048這個遊戲時,因為菜單頁面還能查看遊戲規則,而這些規則又不在同一個頁上,所以需要滑動頁面實現頁面切換,但是僅僅使用unity提供的組件做出的效果僅有一個切換的意思,交互感很差,所以在組件的基礎上又寫瞭一個控制頁面切換的類。而界面切換就是實現一個滾動的視圖。

在unity編輯器中實現滾動視圖的基本操作:需要用Scroll Rect組件

首先可以看看官方用戶手冊中關於Scroll Rect組件的講解,說的很明白。最精辟的描述就是用於使子 RectTransform 滾動的組件。

滾動視圖中的重要元素包括視口、滾動內容以及可選的一個或兩個滾動條。

ScrollView是滾動視圖,Viewport是視口,Content是滾動內容的集合(在其他地方可能就是一張大圖),這些都是panel。Viewport會顯示Content的一部分內容。

註意ScrollView、Viewport的大小都是和畫佈一樣的,而Content大小應該是其下所有內容大小的和,如下圖。
下面是Content中對應的內容。看到圖也應該知道實現滑動更換界面功能的原理瞭,正是把該顯示的放在視口下。

Scroll Rect組件的配置:

為ScrollView添加Scroll Rect組件,並把Viewport拖給Scroll Rect組件的Viewport屬性,再把Content拖給Scroll Rect組件的Content屬性,滾動條看需要加吧,我加瞭一個水平滾動條,滾動條並不用加以過多的控制,unity已經把滾動條和Scroll Rect的組合使用做的很好瞭。其他屬性的配置在官方手冊中講的很清楚。

有一個節省Content性能的組件——Mask:

因為我們隻能看到視口下的內容,由於Content可能有很多界面組成,所以我們可以采取遮罩的方式來不渲染我們看不到的東西,也就是隻渲染視口,來提高效率,unity給我們提供瞭這樣一個組件幫助我們實現這個功能:

這個組件當然要給到視口上,可以看到除瞭一開始在視口上的菜單界面,其餘規則界面都沒有渲染。

這個組件在全屏的切換時確實隻能節省性能,但是在某一部分實現滑動更換界面時卻可以遮住Content中不應該顯示的部分,很方便,也很必要。

到此,unity中可以幫我們的最大限度就到這瞭,現在運行會發現確實可以移動,但是到達邊界是會出現瑕疵、卡動,並且滑到一半不滑瞭也不會自動彈回,所以我們仍需要自己編寫腳本給與更好的控制。

用代碼控制靈敏度、彈回速度。。。:

需要瞭解的:

當然少不瞭用到Scroll Rect組件對應的API:ScrollRect,此外,因為要自己寫代碼控制滑動界面,必須要用到Event事件的實現接口,這裡我用的是拖拽類的IBeginDragHandler, IEndDragHandler。

基本的原理:

就是記錄每一次開始拖拽到結束拖拽的距離,求出現在的位置,和每個界面的位置比較,顯示最近的界面即可。雖然這看起來很簡單,但是將交互的效果提升瞭1000000000000000000000000個檔次。
值得註意的是,盡管在代碼中註釋瞭很多次,但是還是提一下,就是在ScrollRect中有horizontalNormalizedPosition屬性,用來記錄水平滾動位置,以 0 到 1 之間的值表示,0 表示位於左側。所以我們在記錄每個界面的位置時,應當記錄每個界面的臨界比例,且在0-1之間,比如一共有四頁,那麼第一頁和第二頁之間的臨界應在0.333333.

代碼實現:

代碼中用到的API均可在ScrollRect找到,不難理解。並且基本所有地方都加瞭註釋。

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

public class PageView : MonoBehaviour, IBeginDragHandler, IEndDragHandler
{
    //   1)Smooting表示停止滑動後,當前頁碼歸正的速率
    //   2)sensitivity 滑動的敏感度,如果數值過大會導致翻多頁
    //   3)OnPageChanged 當前頁碼改變時回調
    //   4)方法pageTo 直接跳轉到某一頁
    //註意點:ScrollView下的Content的長度是每頁的寬度* 頁數,每頁的寬度與ScrollView的寬度相同
    
    private ScrollRect rect;    //滑動組件 
    private float targethorizontal = 0;     //滑動的起始坐標          
    private bool isDrag = false;                 //是否拖拽結束  
    private List<float> posList = new List<float>();     //求出每頁的臨界值(0-1)
    //private int currentPageIndex = -1;  //記錄當前是第幾頁,頁索引從0開始 ,這裡不需要顯示,有需求可以自己顯示
    //public Action<int> OnPageChanged;

    private bool stopMove = true;   //是否停止移動
    public float smooting = 4;      //滑動速度  
    public float sensitivity = 0;   //靈敏度
    private float startTime;        //從開始拖動到結束的時間

    private float startDragHorizontal;//記錄當前開始滑動的位置(0-1)


    void Awake()
    {
        rect = transform.GetComponent<ScrollRect>();
        //Content水平寬度的大小減去視口大小
        float horizontalLength = rect.content.rect.width - GetComponent<RectTransform>().rect.width;
        //print(horizontalLength);
        posList.Add(0);
        for (int i = 1; i < rect.content.transform.childCount - 1; i++)
        {//求出每頁的臨界值(0-1)
            posList.Add(GetComponent<RectTransform>().rect.width * i / horizontalLength);
            //print(GetComponent<RectTransform>().rect.width * i / horizontalLength);
        }
        posList.Add(1);
    }

    void Update()
    {
        if (!isDrag && !stopMove)//如果拖動沒有結束並且界面還沒停止移動就繼續移動
        {
            startTime += Time.deltaTime;
            float t = startTime * smooting;
            //水平滾動位置,以 0 到 1 之間的值表示,0 表示位於左側。用lerp可以實現平緩過渡
            rect.horizontalNormalizedPosition = Mathf.Lerp(rect.horizontalNormalizedPosition, targethorizontal, t);
            if (t >= 1)
                stopMove = true;
        }
    }
    /// <summary>
    /// 移動到第幾頁,如果需要可在界面進行交互
    /// </summary>
    /// <param name="index"></param>
    //public void pageTo(int index)
    //{
    //    if (index >= 0 && index < posList.Count)
    //    {
    //        rect.horizontalNormalizedPosition = posList[index];
    //        SetPageIndex(index);
    //    }
    //    else
    //    {
    //        Debug.LogWarning("頁碼不存在");
    //    }
    }
    //private void SetPageIndex(int index)
    //{
    //    if (currentPageIndex != index)
    //    {
    //        currentPageIndex = index;
    //        if (OnPageChanged != null)
    //            OnPageChanged(index);
    //    }
    //}

    //下面就是拖拽事件,eventData存拖拽的信息
    public void OnBeginDrag(PointerEventData eventData)
    {
        isDrag = true;
        startDragHorizontal = rect.horizontalNormalizedPosition;//開始滑動位置(0-1)
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        float posX = rect.horizontalNormalizedPosition;//結束拖拽的位置(0-1)
        posX += ((posX - startDragHorizontal) * sensitivity);//拖拽距離乘以靈敏度
        posX = posX < 1 ? posX : 1;
        posX = posX > 0 ? posX : 0;
        //計算當前拖拽到的位置到哪個界面最近就顯示哪個界面
        int index = 0;
        float offset = Mathf.Abs(posList[index] - posX);
        for (int i = 1; i < posList.Count; i++)
        {
            float temp = Mathf.Abs(posList[i] - posX);
            if (temp < offset)
            {
                index = i;
                offset = temp;
            }
        }
        //SetPageIndex(index);
        targethorizontal = posList[index]; //設置當前坐標,更新函數進行插值  
        isDrag = false;
        startTime = 0;
        stopMove = false;
    }
}

一開始還在自己用移動函數和SetActive去控制界面的切換,但把自己搞蒙瞭,搜瞭半天才知道還有這麼好用的組件,搞瞭兩個小時終於搞明白瞭,多看手冊積累經驗很重要!

以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。

推薦閱讀: