Unity3D实现页面的滑动切换功能

38 篇文章 2 订阅

请添加图片描述
在unity中实现页面的滑动切换功能,主要使用ScrollRect组件,通过监测拖动手势的开启、结束来实现此效果。
UI布局截图:
在这里插入图片描述

预设体下载链接(直接拖到Canvas下面就可以用了):
https://download.csdn.net/download/qq_43505432/24279487

源码如下:
下面展示一些 内联代码片

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

/// <summary>
/// 滑动页面效果
/// </summary>
public class PageView : MonoBehaviour, IBeginDragHandler, IEndDragHandler
{
    private ScrollRect rect;
    private float targethorizontal = 0;
    private List<float> posList = new List<float>();//存四张图片的位置(0, 0.333, 0.666, 1) 
    private bool isDrag = true;
    private float startTime = 0;
    private float startDragHorizontal;
    private int curIndex = 0;

    public float speed = 4;      //滑动速度  
    public float sensitivity = 0;
    public Text curPage;


    void Start()
    {
        rect = GetComponent<ScrollRect>();
        float horizontalLength = rect.content.rect.width - GetComponent<RectTransform>().rect.width;
        var _rectWidth = GetComponent<RectTransform>().rect.width;
        for (int i = 0; i < rect.content.transform.childCount; i++)
        {
            posList.Add(_rectWidth * i / horizontalLength);   //存四张图片的位置(0, 0.333, 0.666, 1) 
        }
        curIndex = 0;
        curPage.text = String.Format("当前页码:0");

    }

    void Update()
    {
        if (!isDrag)
        {
            startTime += Time.deltaTime;
            float t = startTime * speed;
            //加速滑动效果
            rect.horizontalNormalizedPosition = Mathf.Lerp(rect.horizontalNormalizedPosition, targethorizontal, t);
            //缓慢匀速滑动效果
            //rect.horizontalNormalizedPosition = Mathf.Lerp(rect.horizontalNormalizedPosition, targethorizontal, Time.deltaTime * speed);

        }
    }

    public void OnBeginDrag(PointerEventData eventData)
    {
        isDrag = true;
        //开始拖动
        startDragHorizontal = rect.horizontalNormalizedPosition;  //horizontalNormalizedPosition这个参数是scrollRect滑动期间变化的x坐标值,在(0, 1)之间
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        //Debug.Log("OnEndDrag");
        float posX = rect.horizontalNormalizedPosition;
        int index = 0;
        float offset = Mathf.Abs(posList[index] - posX);  //计算当前位置与第一页的偏移量,初始化offect
        for (int i = 1; i < posList.Count; i++)
        {    //遍历页签,选取当前x位置和每页偏移量最小的那个页面
            float temp = Mathf.Abs(posList[i] - posX);
            if (temp < offset)
            {
                index = i;
                offset = temp;
            }
        }
        curIndex = index;
        targethorizontal = posList[curIndex]; //设置当前坐标,更新函数进行插值  
        isDrag = false;
        startTime = 0;
        curPage.text = String.Format("当前页码:{0}", curIndex.ToString());
    }

    public void pageTo(int index)
    {
        Debug.Log("pageTo......");
        curIndex = index;
        targethorizontal = posList[curIndex]; //设置当前坐标,更新函数进行插值  
        isDrag = false;
        startTime = 0;
        curPage.text = String.Format("当前页码:{0}", curIndex.ToString());
    }
}
  • 12
    点赞
  • 50
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 13
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小程小程,永不消沉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值