簡介
項目需要...直接展示效果吧：
原理
使用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.運行查看效果吧，如果出錯，請檢查上述步驟
代碼
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82
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提供的平滑函數，如果需要阻尼效果，可以自己修改代碼。
以上內容是小編給大家介紹的Unity UGUI教程之實現滑頁效果，希望對大家有所幫助！
