Unity3D UGUI中ScrollRect的一些知識點

 需求

這幾天在公司里，項目需要將游戲游戲中的2D城堡界面在拉動的時候顯示出3D的拉近效果。當時是在Cocos2d-x下實現的。回家的時候自己重新用Unity實現的了一遍。

雖然現在Unity已經到了5.0時代，從4.6時代起Unity就開始支持原生2D了，網絡上大部分的教程還是NGUI。畢竟原生的也是開源的，詳細以后也會慢慢取代NGUI。

 解決思路

 需要在拉動的過程中顯示出由遠及近不通層次的效果，自然想到了利用Scroll類型的控件。Unity中原生2D中使用到的時ScrollRect組件。

 在Canvas中，我新建了一個ScrollRect。修改名字為ScrollView。ScrollRect的使用十分的簡單，Content與滾動內容進行關聯后就可以直接使用。Horizontal,Vertical設置十分允許在水平、垂直方向滾動。MovementType可以設置3中滾動類型。Inertia可以控制是否在拖動結束后繼續慣性滑行一段距離。具體參數說明Unity官方有詳細的API資料。

創建ScrollView成功之后，添加了需要滾動的控件。我要做的是在ScrollRect滾動的時候，根據滾動的情況對其內部控件進行縮放。

在insparcter面板的右下角同時列出了ScrollRect在運用工程中可以使用的控件。

我需要在拖動的時候進行操作，這里就需要用到OnDrag事件。

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

public class BackgroundManager : MonoBehaviour,IDragHandler
{
    ScrollRect scrollRect;
    RectTransform content;

    public float startNum = 263f;
    public float scaleArg1 = 0.5f;
    public float scaleArg2 = 0.2f;
    public float scaleArg3 = 0.1f;

    public GameObject top;
    public GameObject middle;
    public GameObject buttom;

    void Start ()
    {
        scrollRect = gameObject.GetComponent<ScrollRect> () as ScrollRect;
        content = scrollRect.content;
    
    }
    public void OnDrag (PointerEventData data)
    {
        //Debug.Log (content.position);
        float changeScale1 = GetChangeScale (content.position.y, 1);
        float changeScale2 = GetChangeScale (content.position.y, 2);
        float changeScale3 = GetChangeScale (content.position.y, 3);
        buttom.gameObject.transform.localScale = 
            new Vector3 (changeScale1, changeScale1, 1);
        middle.gameObject.transform.localScale = 
            new Vector3 (changeScale2, changeScale2, 1);
        top.gameObject.transform.localScale = 
            new Vector3 (changeScale3, changeScale3, 1);
    }

    float GetChangeScale (float changeCondition, int position)
    {
        float changeScale = 1f;
        switch (position) {
        case 1:
            changeScale = 1 + Mathf.Sin ((startNum - changeCondition) * Mathf.PI / 224) * scaleArg1;
            break;
        case 2:
            changeScale = 1 + Mathf.Sin ((startNum - changeCondition) * Mathf.PI / 224) * scaleArg2;
            break;
        case 3:
            changeScale = 1 + Mathf.Sin ((startNum - changeCondition) * Mathf.PI / 224) * scaleArg3;
            break;
        default:
            changeScale = 1 + Mathf.Sin ((startNum - changeCondition) * Mathf.PI / 224);
            break;
        }

        return changeScale;
    }

}

我這里只由於只使用到OnDrag，所以只繼承了IDragHander接口。

將寫好的腳本添加到ScrollRect中，初始化運行后就可以看到效果了。

 擴展

 使用到了滾動層，在實際的應用中自然少不了遮罩的問題。在之前的博文中，我有寫到了文字跑馬燈的實現。其實可以直接使用ScrollRect+遮罩的方式進行實現。

原生2D中的Mash可以很方便的實現。在Mash中添加Image可以控制Mash的樣式。

也可以設置Image的Source Image自定義遮罩的形狀。

 結論

 原生的ScrollRect用起來還是比較方便的，游戲開發中道具的展示，場景的切換控制都常需要用到。

 有需要的朋友可以下載源代碼自己運行：下載

 

博客地址： http://www.cnblogs.com/nightcat/
博客版權： 本文以學習、研究和分享為主，歡迎轉載，但必須在文章頁面明顯位置給出原文連接。
如文中有不妥或者錯誤的地方還望高手的指出，以免誤人子弟。如果覺得本文對您有所幫助請【推薦】一下！如果你有更好的建議，不妨留言一起討論，共同進步！ 再次感謝您耐心的讀完本篇文章。