Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Unity實現滑頁效果(UGUI)

Unity實現滑頁效果(UGUI)

編輯:關於Android編程

簡介

項目需要...直接展示效果吧:

這裡寫圖片描述

原理

使用UGUI提供的ScrollRect和ScrollBar組件實現基本滑動以及自己控制每次移動一頁來達到滑頁的效果。

實現過程

1.創建兩個panel,上面的panel用於顯示,下面的panel用於存放按鈕

這裡寫圖片描述

2.在TopPanel上添加ScrollRect腳本,用於滑動

這裡寫圖片描述

3.在TopPanel下創建一個新的Panel,並在子Panel下拜訪要顯示的對象

這裡寫圖片描述

4.將該子Panel設置為ScrollRect的活動對象

這裡寫圖片描述

5.為ScrollRect添加ScrollBar滾動條,直接在空白處單機右鍵添加ScrollBar即可

這裡寫圖片描述

這裡寫圖片描述

6.將ScrollBar與ScrollRect關聯

這裡寫圖片描述

7.設置ScrollRect的其他參數

這裡寫圖片描述

8.將SliderControl腳本掛在TopPanel上,並關聯ScrollBar

這裡寫圖片描述

9.添加響應事件

這裡寫圖片描述

為按鈕也添加相應的事件(記住是五個按鈕哈)

這裡寫圖片描述

10.運行查看效果吧,如果出錯,請檢查上述步驟

代碼

SliderControl:

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

public class SliderControl : MonoBehaviour
{

    public Scrollbar m_Scrollbar;
    public ScrollRect m_ScrollRect;

    private float mTargetValue;

    private bool mNeedMove = false;

    private const float MOVE_SPEED = 1F;

    private const float SMOOTH_TIME = 0.2F;

    private float mMoveSpeed = 0f;

    public void OnPointerDown()
    {
        mNeedMove = false;
    }

    public void OnPointerUp()
    {
        // 判斷當前位於哪個區間,設置自動滑動至的位置
        if (m_Scrollbar.value <= 0.125f)
        {
            mTargetValue = 0;
        }
        else if (m_Scrollbar.value <= 0.375f)
        {
            mTargetValue = 0.25f;
        }
        else if (m_Scrollbar.value <= 0.625f)
        {
            mTargetValue = 0.5f;
        }
        else if (m_Scrollbar.value <= 0.875f)
        {
            mTargetValue = 0.75f;
        }
        else
        {
            mTargetValue = 1f;
        }

        mNeedMove = true;
        mMoveSpeed = 0;
    }

    public void OnButtonClick(int value)
    {
        switch (value)
        {
            case 1:
                mTargetValue = 0;
                break;
            case 2:
                mTargetValue = 0.25f;
                break;
            case 3:
                mTargetValue = 0.5f;
                break;
            case 4:
                mTargetValue = 0.75f;
                break;
            case 5:
                mTargetValue = 1f;
                break;
            default:
                Debug.LogError("!!!!!");
                break;
        }
        mNeedMove = true;
    }

    void Update()
    {
        if (mNeedMove)
        {
            if (Mathf.Abs(m_Scrollbar.value - mTargetValue) < 0.01f)
            {
                m_Scrollbar.value = mTargetValue;
                mNeedMove = false;
                return;
            }
            m_Scrollbar.value = Mathf.SmoothDamp(m_Scrollbar.value, mTargetValue, ref mMoveSpeed, SMOOTH_TIME);
        }
    }

}

總結

移動用的mathf提供的平滑函數,如果需要阻尼效果,可以自己修改代碼。
   
  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved