Unity ScrollRect和Toggle使用制作翻页过渡的效果

最近做过一个翻页+软过渡的功能，然后用到了 Unity ScrollRect 和 Toggle 记录一下~

先放个最简单的效果图吧如下：

下面是具体步骤

1. 首先新建一个 ScrollView
   
   去掉Scrollbar Vertical
   去掉 Scrollbar Horizontal 和子物体中的image 组件这样就隐藏掉了下面的滑动区域，点击ScrollView 找到 ScrollRect组件 取消Vertical的勾选（如果有需要勾选上即刻） 并设置好Viewport大小范围 这个是显示页面的大小

2. 在Scroll View -> Viewport->Content 在Content组件中添加 Horizontal Layout Group 和 Content Size Fitter 组件 这两个组件的目的就是为了动态添加页面时可以自动增长，详细使用可参考之前的文章 如图所示
   

3. 增加Toggle Group
   创建一个空的 GameObject 添加 Toggle Group组件 之后在后面 在创建一个子类的Toggle，并把Game Object 拖拽到Group组中 如图所示
   

4. 创建翻页 Button 和脚本 （脚本代码会完整的放在文章末尾）添加鼠标拖动监听的函数名字,部分代码如下

   public void OnPointerUp()
    {
        float a = (scrollbar.value + 1.5f * nodeValue) / nodeValue;
        curPage =  Mathf.FloorToInt(((scrollbar.value+ 1.5f * nodeValue) / nodeValue) - 1.0f);
        targetValue = curPage * nodeValue;
        setToggle();
        isMove = true;
    }

   我是把脚本添加在了Canvas 上面 然后在ScrollView上添加 EventTrigger 把Canvas拖拽到上面选择脚本的监听事件
   
   ui界面差不多这样就ok 了
   把所有的组件拖拽到脚本中即可
   
   下面是完整代码以及注释 这个只是最简单的demo 还有很多完善的地方，

   using System.Collections;
   using System.Collections.Generic;
   using UnityEngine;
   using UnityEngine.UI;
   public class NewBehaviourScript : MonoBehaviour
   {
    public Button nextBtn;
    public Button preBtn;
    // image 实体
    public GameObject image;
    public GameObject imageGroup;
    //横向滑动
    public Scrollbar scrollbar;
    public Toggle toggle;
    public GameObject ToggleGroup;
   
    // 当前显示的页面的序号
    private int curPage = 0;
    // 过度速度
    private float moveSpeed = 1f;
    // 过渡到目标页面
    private float targetValue = 0.0f;
    // 每个页面所占用的长度
    private float nodeValue;
    // 是否翻页
    private bool isMove = false;
    void Start()
    {
        for (int j = 0; j < 5; j++)
        {
            GameObject.Instantiate(image, imageGroup.transform);
            GameObject.Instantiate(toggle, ToggleGroup.transform);
        }
        nextBtn.onClick.AddListener(nextClick);
        preBtn.onClick.AddListener(preClick);
        nodeValue = 1.0f / 5.0f;
    }
    // 拖拽时的监听函数
    public void OnPointerUp()
    {
        // 1.5 的目的是 过渡到一半的时候 是过渡到下一页！ 
        curPage =  Mathf.FloorToInt(((scrollbar.value+ 1.5f * nodeValue) / nodeValue) - 1.0f);
        targetValue = curPage * nodeValue;
        setToggle();
        isMove = true;
    }
    private void nextClick()
    {
        curPage += 1;
        targetValue += nodeValue;
        isMove = true;
        setToggle();
    }
    private void preClick()
    {
        curPage -= 1;
        targetValue -= nodeValue;
        isMove = true;
        setToggle();
    }
    private void setToggle()
    {
        // Toggle每次只是会显示一个
        ToggleGroup.transform.GetChild(curPage).GetComponent<Toggle>().isOn = true;
    }
    void Update()
    {
        if (isMove)
        {
            if (Mathf.Abs(scrollbar.value - targetValue) < 0.01f)
            {
                scrollbar.value = targetValue;
                isMove = false;
                return;
   
            }
            scrollbar.value = Mathf.SmoothDamp(scrollbar.value, targetValue, ref moveSpeed, 0.2f);
        }
    }
   }

   最后

   欢迎关注哦~ 慢慢一起成长