最近做过一个翻页+软过渡的功能,然后用到了 Unity ScrollRect
和 Toggle
记录一下~
先放个最简单的效果图吧如下:
下面是具体步骤
首先新建一个 ScrollView
去掉Scrollbar Vertical
去掉Scrollbar Horizontal
和子物体中的image 组件这样就隐藏掉了下面的滑动区域,点击ScrollView
找到ScrollRect
组件 取消Vertical的勾选(如果有需要勾选上即刻) 并设置好Viewport大小范围 这个是显示页面的大小在
Scroll View -> Viewport->Content
在Content
组件中添加Horizontal Layout Group
和Content Size Fitter
组件 这两个组件的目的就是为了动态添加页面时可以自动增长,详细使用可参考之前的文章 如图所示
增加Toggle Group
创建一个空的GameObject
添加Toggle Group
组件 之后在后面 在创建一个子类的Toggle,并把Game Object 拖拽到Group组中 如图所示
创建翻页 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); } } }
最后
欢迎关注哦~ 慢慢一起成长