unity 翻页效果ugui 简单关卡

首先创建一个panel ui组件，在这个组件上添加 GridLayout Group

该组件实现了当创建level,并且将父物体设置为Grid后能够自动排版

level  的创建是 第一个是背景图 第二个锁定的图（这里是白色的，透明度很低），第三个是 第几关 ，第四个是

显示星个数，多创建几个level  ，记得选择一下你是水平分布还是垂直分布，这里我们是进行垂直分布。

记得将panel 的中心点  放到左边， 作用是  当把panel进行扩张的的时候，默认是中心点然后向左右扩张，放到左边 则只会向you'右边扩张。

创建完panel  在创建一个panel并把它命名为scrollpanel,大小调整为你想内容展示的范围。在此上添加组件 ScrollRect  组件 ，这样才可以滑动，在把要滑入的内容挂载在content上，。

之后发现 内容会超出 这个时候我们再在ScrollRect 添加mask组件 这样超出的范围就不会显示。

然后在此上添加脚本，命名为A_page,content 代表要滑动的部分，即panel

---

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

public class A_page : MonoBehaviour,IBeginDragHandler, IEndDragHandler
{
   

  private ScrollRect rect;//获取当前挂载物体的scrollrect
  //  private float[] pageArray= new float[] { 0, 0.5f, 1 };
  private List<float> pageArray = new List<float>();
    private float targethorizontal;
    public float smoothing = 3;//敏捷度
    private bool isDrag = false;//是否拖拽
    public RectTransform content;//被拖动的部分

    void Start()
    {
        rect = GetComponent<ScrollRect>();
        var _rectWidth = GetComponent<RectTransform>();
        int t = content.transform.childCount / 6;//获取需要的移动部分的子物体个数，每一页放6个level
    
        var tempWidth = (t * _rectWidth.rect.width);//子对象长度   
        Debug.Log("t   " + _rectWidth.rect.width);

       content.sizeDelta = new Vector2(tempWidth, content.rect.height);

        //未显示的长度
        //Debug.Log(content.rect.width);

        float horizontalLength = tempWidth-_rectWidth.rect.width; //content.rect.width - _rectWidth.rect.width;

        for (int i = 0; i <t; i++)
        {
            pageArray.Add(_rectWidth.rect.width * i / horizontalLength);

            Debug.Log("posList[" + i + "]=" + pageArray[i]);

        }
    }

    void Update()
    {
        if (isDrag==false)
        {
  rect.horizontalNormalizedPosition = Mathf.Lerp(rect.horizontalNormalizedPosition,
            targethorizontal, Time.deltaTime*smoothing);
        }
      
        
    }
    public void OnBeginDrag(PointerEventData eventData)
    {
        isDrag = true;
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        isDrag = false;
        float posX = rect.horizontalNormalizedPosition;
        int index = 0;
        float offest = Mathf.Abs(pageArray[index] - posX);
        for(int i = 1; i < pageArray.Count; i++)
        {
            float offestItemp = Mathf.Abs(pageArray[i] - posX);
            if (offestItemp < offest)
            {
                index = i;
                offest = offestItemp;
            }
        }
        targethorizontal = pageArray[index];
       // rect.horizontalNormalizedPosition = pageArray[index];
    }
}
 

---

这样就做好了 关卡翻页的效果。