Unity UGUI教程之实现滑页效果

简介

项目需要...直接展示效果吧：

原理

使用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.运行查看效果吧，如果出错，请检查上述步骤

代码

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教程之实现滑页效果，希望对大家有所帮助！

赞 (0)

相关推荐

  • Unity3D获取当前键盘按键及Unity3D鼠标、键盘的基本操作

    Unity3D获取当前键盘按键及Unity3D鼠标、键盘的基本操作

    获取当前键盘按键,代码如下: using UnityEngine; using System.Collections; public class GetCurrentKey : MonoBehaviour { KeyCode currentKey; void Start () { currentKey = KeyCode.Space; } void OnGUI() { if (Input.anyKeyDown) { Event e = Event.current; if (e.isKey) {

  • Unity3d获取系统时间

    Unity是由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏.建筑可视化.实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎.Unity类似于Director,Blender game engine, Virtools 或 Torque Game Builder等利用交互的图型化开发环境为首要方式的软件其编辑器运行在Windows 和Mac OS X下,可发布游戏至Windows.Mac.Wii.iPhone.Windows pho

  • Unity编辑器下重启的方法

    Unity编辑器下重启的方法

    Unity编辑器下重启的方法 我们项目AssetBundle打包走的是全自动化流程,打包之前要进行各种资源检测,如果检测顺利通过,则进入打包,否则提示错误资源名称及路径,打包中断!有时候即使资源检测通过也会打包崩溃,初步断定是Unity的内存爆了,因为Unity在编辑器下打开工程中的资源不会释放掉,所以内存一直在占用,打包时要进行一系列资源依赖分析,我们也知道,如果资源量非常大时候,Unity要保存资源依赖的堆栈,所以会有内存崩掉的风险,所以我就想着,打包之前重启下Unity,让Unity释放掉

  • unity实现摄像头跟随

    代码很简单,这里就不多废话了,直接奉上代码 using UnityEngine; using System.Collections; public class FllowTarget : MonoBehaviour { public Transform character; //摄像机要跟随的人物 public float smoothTime = 0.01f; //摄像机平滑移动的时间 private Vector3 cameraVelocity = Vector3.zero; private

  • Unity3D中shader 轮廓描边效果实现代码

    Unity3D中shader 轮廓描边效果实现代码

    Unity3D中shader 轮廓描边效果 想利用Unity3D中shader这个功能实现描边轮廓边框效果该怎么做呢,相信有很多搞开发的人想知道,为此下面就给大家介绍下方法. Shade实现描边效果,如下图中的3D球效果图         Shade代码如下: Shader "Outlined/Silhouetted Diffuse" { Properties { _Color ("Main Color", Color) = (1,1,1,1) _OutlineCo

  • C#中Socket与Unity相结合示例代码

    前言 初步接触了Socket,现使其与Unity相结合,做成一个简单的客户端之间可以互相发送消息的一个Test.下面话不多说了,来一起看看详细的介绍吧. 方法如下: 首先,是服务端的代码. 创建一个连接池,用于存储客户端的数量. using System; using System.Net; using System.Net.Sockets; using System.Collections; using System.Collections.Generic; namespace Server

  • centos 6.5下 mysql-community-server. 5.7.18-1.el6安装

    使用下面的命令检查是否安装有MySQL Server [root@localhost etc]# rpm -qa | grep mysql // 这个命令就会查看该操作系统上是否已经安装了mysql数据库 有的话,我们就通过 rpm -e 命令 或者 rpm -e --nodeps 命令来卸载掉 [root@localhost ~]# rpm -e mysql // 普通删除模式 [root@localhost ~]# rpm -e --nodeps mysql // 强力删除模式,如果使用上面

  • Unity3d发布IOS9应用时出现中文乱码的解决方法

    简单的说,解决方法就是批量修改NGUI的label字体,修复ios就删除arial引起的中文乱码 我们来看具体如何操作 static public void yaheifont() { uf = AssetDatabase.LoadAssetAtPath("Assets/yahei.prefab",typeof( UIFont)) as UIFont; UnityEngine.Object[] objs = Selection.GetFiltered (typeof(UnityEngi

  • Unity UGUI教程之实现滑页效果

    Unity UGUI教程之实现滑页效果

    简介 项目需要...直接展示效果吧: 原理 使用UGUI提供的ScrollRect和ScrollBar组件实现基本滑动以及自己控制每次移动一页来达到滑页的效果. 实现过程 1.创建两个panel,上面的panel用于显示,下面的panel用于存放按钮 2.在TopPanel上添加ScrollRect脚本,用于滑动 3.在TopPanel下创建一个新的Panel,并在子Panel下拜访要显示的对象 4.将该子Panel设置为ScrollRect的活动对象 5.为ScrollRect添加Scroll

  • unity scrollRect实现按页码翻页效果

    本文实例为大家分享了unity实现按页码翻页效果的具体代码,供大家参考,具体内容如下 用来做背包 商店的按页翻页功能,先上效果图 其中,dragNum 表示的是 如果为3,便是滑动距离超过当前页面宽度的百分之三十位成功 connect表示 scrollRect下connet的大小 然后是函数的初始化方法 这里提供了两个方法  一个是直接提供页数 参数分别代表 总页数,要显示的页数 以及切换到要显示的页数是否播放滑动动画 以及当时用来做背包.商店的方法2 和上面不用的是传入的是物品的数量以及每页显

  • Unity UGUI实现滑动翻页效果

    本文实例为大家分享了Unity UGUI实现滑动翻页效果的具体代码,供大家参考,具体内容如下 这个问题真的是老生常谈的事情了,不过在这里还是要说一下,以便以后之需 首先看一下效果图 最后在Content下面是一些Image using UnityEngine; using System.Collections; using UnityEngine.UI; using System.Collections.Generic; using UnityEngine.EventSystems; using

  • Unity UGUI实现滑动翻页直接跳转页数

    本文实例为大家分享了Unity UGUI实现滑动翻页,直接跳转页数的具体代码,供大家参考,具体内容如下 首先看一下最终效果 其实这个功能基本上是老生常谈了,所以代码还是很简单 using UnityEngine; using System.Collections; using UnityEngine.UI; using System.Collections.Generic; using UnityEngine.EventSystems; using System; public class Pa

  • Unity实现引导页效果

    本文实例为大家分享了Unity实现引导页效果的具体代码,供大家参考,具体内容如下 效果图: 1.创建Canvas,设置RenderMode=ScreenSpace-Overlay,UIScaleMode = ScaleWithScreenSize, ReferenceResolution(x=1080,y=1920) 2.创建一个RawImage,命名为(parentGoImg),并做如下设置 3.在parentGoImg下建几个RawImage,赋予想展示的图片,并做如下设置 4.添加如下脚本

  • unity实现翻页效果

    unity实现翻页效果

    本文实例为大家分享了unity实现翻页效果的具体代码,供大家参考,具体内容如下 一.示意图 二.步骤 创建物体ToPanel:添加组件ScrollRect, 在下面创建一个空物体用来装需要移动的子物体, 创建一个Scrollbar: 三.代码 下面展示一些 内联代码片. using UnityEngine; using System.Collections; using UnityEngine.UI; using System.Collections.Generic; public class

  • Unity Shader实现3D翻页效果

    Unity Shader实现3D翻页效果

    本文实例为大家分享了Unity Shader实现3D翻页效果的具体代码,供大家参考,具体内容如下 参考文章:UnityShader使用Plane实现翻书效果 效果图: 原理:Shader顶点动画 在顶点着色器进行对顶点Y值的偏移(使用了Sin函数模拟翻页时产生的弯曲),对顶点X值的偏移实现纸张在翻页时的收缩(一般是不用收缩),最后对顶点进行围绕Z轴旋转实现Plane翻页(Z轴是本例的旋转轴,请根据你具体情况修改,上面的两个偏移同理). Shader "Unlit/PaperTurnMilkSha

  • Android基于ViewPager+Fragment实现左右滑屏效果的方法

    本文实例讲述了Android基于ViewPager+Fragment实现左右滑屏效果的方法.分享给大家供大家参考,具体如下: 1.xml布局模板 <android.support.v4.view.ViewPager android:id="@+id/local_software_viewpager" android:layout_width="match_parent" android:layout_height="match_parent"

  • JQuery标签页效果实例详解

    JQuery标签页效果实例详解

    本文实例讲述了JQuery标签页效果实现方法.分享给大家供大家参考,具体如下: 第一个标签页中鼠标滑过显示不同的标签页,第二个标签页中点击不同标签加载其他页面中的内容,加载等待的图片缓慢隐藏,效果图如下: /WebRoot/4.Tab.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> &l

  • 值得分享的Bootstrap Ace模板实现菜单和Tab页效果

    值得分享的Bootstrap Ace模板实现菜单和Tab页效果

    本文分享了项目中使用Ace模板的菜单样式和基于iframe的Tab页效果. 一.效果展示 折腾了好久,终于将菜单样式和Tab页的效果从项目中抽出来了. 1.初始加载出来的效果 2.展开菜单(支持多级展开,后面代码介绍) 3.点击子菜单,以Tab页的形式打开对应的页面 4.支持菜单折叠 5.打开的菜单过多时自动换行显示,折叠后自适应 二.代码示例 有现成的东西用很方便的,总的来说Bootstrap Ace模板的功能还是比较强大的,并且支持各种终端设备.本文主要使用的它的菜单的效果,下面就来看看Ac

随机推荐