Unity實(shí)現(xiàn)滑動(dòng)更換界面效果
在做2048這個(gè)游戲時(shí),因?yàn)椴藛雾撁孢€能查看游戲規(guī)則,而這些規(guī)則又不在同一個(gè)頁上,所以需要滑動(dòng)頁面實(shí)現(xiàn)頁面切換,但是僅僅使用unity提供的組件做出的效果僅有一個(gè)切換的意思,交互感很差,所以在組件的基礎(chǔ)上又寫了一個(gè)控制頁面切換的類。而界面切換就是實(shí)現(xiàn)一個(gè)滾動(dòng)的視圖。
在unity編輯器中實(shí)現(xiàn)滾動(dòng)視圖的基本操作:需要用Scroll Rect組件
首先可以看看官方用戶手冊(cè)中關(guān)于Scroll Rect組件的講解,說的很明白。最精辟的描述就是用于使子 RectTransform 滾動(dòng)的組件。
滾動(dòng)視圖中的重要元素包括視口、滾動(dòng)內(nèi)容以及可選的一個(gè)或兩個(gè)滾動(dòng)條。
ScrollView是滾動(dòng)視圖,Viewport是視口,Content是滾動(dòng)內(nèi)容的集合(在其他地方可能就是一張大圖),這些都是panel。Viewport會(huì)顯示Content的一部分內(nèi)容。
注意ScrollView、Viewport的大小都是和畫布一樣的,而Content大小應(yīng)該是其下所有內(nèi)容大小的和,如下圖。
下面是Content中對(duì)應(yīng)的內(nèi)容??吹綀D也應(yīng)該知道實(shí)現(xiàn)滑動(dòng)更換界面功能的原理了,正是把該顯示的放在視口下。
Scroll Rect組件的配置:
為ScrollView添加Scroll Rect組件,并把Viewport拖給Scroll Rect組件的Viewport屬性,再把Content拖給Scroll Rect組件的Content屬性,滾動(dòng)條看需要加吧,我加了一個(gè)水平滾動(dòng)條,滾動(dòng)條并不用加以過多的控制,unity已經(jīng)把滾動(dòng)條和Scroll Rect的組合使用做的很好了。其他屬性的配置在官方手冊(cè)中講的很清楚。
有一個(gè)節(jié)省Content性能的組件——Mask:
因?yàn)槲覀冎荒芸吹揭暱谙碌膬?nèi)容,由于Content可能有很多界面組成,所以我們可以采取遮罩的方式來不渲染我們看不到的東西,也就是只渲染視口,來提高效率,unity給我們提供了這樣一個(gè)組件幫助我們實(shí)現(xiàn)這個(gè)功能:
這個(gè)組件當(dāng)然要給到視口上,可以看到除了一開始在視口上的菜單界面,其余規(guī)則界面都沒有渲染。
這個(gè)組件在全屏的切換時(shí)確實(shí)只能節(jié)省性能,但是在某一部分實(shí)現(xiàn)滑動(dòng)更換界面時(shí)卻可以遮住Content中不應(yīng)該顯示的部分,很方便,也很必要。
到此,unity中可以幫我們的最大限度就到這了,現(xiàn)在運(yùn)行會(huì)發(fā)現(xiàn)確實(shí)可以移動(dòng),但是到達(dá)邊界是會(huì)出現(xiàn)瑕疵、卡動(dòng),并且滑到一半不滑了也不會(huì)自動(dòng)彈回,所以我們?nèi)孕枰约壕帉懩_本給與更好的控制。
用代碼控制靈敏度、彈回速度。。。:
需要了解的:
當(dāng)然少不了用到Scroll Rect組件對(duì)應(yīng)的API:ScrollRect,此外,因?yàn)橐约簩懘a控制滑動(dòng)界面,必須要用到Event事件的實(shí)現(xiàn)接口,這里我用的是拖拽類的IBeginDragHandler, IEndDragHandler。
基本的原理:
就是記錄每一次開始拖拽到結(jié)束拖拽的距離,求出現(xiàn)在的位置,和每個(gè)界面的位置比較,顯示最近的界面即可。雖然這看起來很簡單,但是將交互的效果提升了1000000000000000000000000個(gè)檔次。
值得注意的是,盡管在代碼中注釋了很多次,但是還是提一下,就是在ScrollRect中有horizontalNormalizedPosition屬性,用來記錄水平滾動(dòng)位置,以 0 到 1 之間的值表示,0 表示位于左側(cè)。所以我們?cè)?span style="color: #800000">記錄每個(gè)界面的位置時(shí),應(yīng)當(dāng)記錄每個(gè)界面的臨界比例,且在0-1之間,比如一共有四頁,那么第一頁和第二頁之間的臨界應(yīng)在0.333333.
代碼實(shí)現(xiàn):
代碼中用到的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表示停止滑動(dòng)后,當(dāng)前頁碼歸正的速率 // 2)sensitivity 滑動(dòng)的敏感度,如果數(shù)值過大會(huì)導(dǎo)致翻多頁 // 3)OnPageChanged 當(dāng)前頁碼改變時(shí)回調(diào) // 4)方法pageTo 直接跳轉(zhuǎn)到某一頁 //注意點(diǎn):ScrollView下的Content的長度是每頁的寬度* 頁數(shù),每頁的寬度與ScrollView的寬度相同 private ScrollRect rect; //滑動(dòng)組件 private float targethorizontal = 0; //滑動(dòng)的起始坐標(biāo) private bool isDrag = false; //是否拖拽結(jié)束 private List<float> posList = new List<float>(); //求出每頁的臨界值(0-1) //private int currentPageIndex = -1; //記錄當(dāng)前是第幾頁,頁索引從0開始 ,這里不需要顯示,有需求可以自己顯示 //public Action<int> OnPageChanged; private bool stopMove = true; //是否停止移動(dòng) public float smooting = 4; //滑動(dòng)速度 public float sensitivity = 0; //靈敏度 private float startTime; //從開始拖動(dòng)到結(jié)束的時(shí)間 private float startDragHorizontal;//記錄當(dāng)前開始滑動(dòng)的位置(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)//如果拖動(dòng)沒有結(jié)束并且界面還沒停止移動(dòng)就繼續(xù)移動(dòng) { startTime += Time.deltaTime; float t = startTime * smooting; //水平滾動(dòng)位置,以 0 到 1 之間的值表示,0 表示位于左側(cè)。用lerp可以實(shí)現(xiàn)平緩過渡 rect.horizontalNormalizedPosition = Mathf.Lerp(rect.horizontalNormalizedPosition, targethorizontal, t); if (t >= 1) stopMove = true; } } /// <summary> /// 移動(dòng)到第幾頁,如果需要可在界面進(jìn)行交互 /// </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;//開始滑動(dòng)位置(0-1) } public void OnEndDrag(PointerEventData eventData) { float posX = rect.horizontalNormalizedPosition;//結(jié)束拖拽的位置(0-1) posX += ((posX - startDragHorizontal) * sensitivity);//拖拽距離乘以靈敏度 posX = posX < 1 ? posX : 1; posX = posX > 0 ? posX : 0; //計(jì)算當(dāng)前拖拽到的位置到哪個(gè)界面最近就顯示哪個(gè)界面 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]; //設(shè)置當(dāng)前坐標(biāo),更新函數(shù)進(jìn)行插值 isDrag = false; startTime = 0; stopMove = false; } }
一開始還在自己用移動(dòng)函數(shù)和SetActive去控制界面的切換,但把自己搞蒙了,搜了半天才知道還有這么好用的組件,搞了兩個(gè)小時(shí)終于搞明白了,多看手冊(cè)積累經(jīng)驗(yàn)很重要!
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
解析從源碼分析常見的基于Array的數(shù)據(jù)結(jié)構(gòu)動(dòng)態(tài)擴(kuò)容機(jī)制的詳解
本篇文章是對(duì)從源碼分析常見的基于Array的數(shù)據(jù)結(jié)構(gòu)動(dòng)態(tài)擴(kuò)容機(jī)制進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-05-05C#中的out參數(shù)、ref參數(shù)和params可變參數(shù)用法介紹
這篇文章介紹了C#中的out參數(shù)、ref參數(shù)和params可變參數(shù)用法,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-01-01DataGridView控件顯示行號(hào)的正確代碼及分析
今天要用到DataGridView,想給它動(dòng)態(tài)的顯示行號(hào)。于是在網(wǎng)上找了一下解決方法。結(jié)果發(fā)現(xiàn)了不少問題。然而就是這么一段有錯(cuò)的代碼,幾乎充斥著整個(gè)互聯(lián)網(wǎng),千篇一律的COPY,沒有一個(gè)人糾正2013-08-08