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)的更多相关文章
- Unity实现滑页嵌套(解决ScrollRect嵌套冲突问题)
简介 由于项目需要+有网友咨询,所以做了个横向滑页+某一横向滑页中有竖向滑页的demo,实现有点绕弯子,但基本功能还是比较完善,发上来共享一下. 效果 思路 第一步的思路是自己判断触屏拖动位置,然后控 ...
- ViewPager、Fragment、Matrix综合使用实现Tab滑页效果
原文地址:http://www.cnblogs.com/kross/p/3372987.html 我们实现一个上面是一个可以左右滑动的页面,下面是三个可点击切换的tab按钮,tab按钮上还有一个激活条 ...
- Android viewPager+fragment实现滑页效果
先上图,手指在手机向左或者向右滑就可以实现相应的页面切换. 先看activity_main.xml文件,非常简单,主要是三个标题TextView和viewpager <?xml version= ...
- webapp应用--模拟电子书翻页效果
前言: 现在移动互联网发展火热,手机上网的用户越来越多,甚至大有超过pc访问的趋势.所以,用web程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文 ...
- 利用GPU实现翻页效果
0x00 前言 有一段时间没有更新博客了,在考虑写点什么的时候正好赶上了这个月我的书<Unity 3D脚本编程>又加印了.因此写篇小文聊聊利用shader来实现翻书的效果吧. 虽然本文是这 ...
- 利用GPU实现翻页效果(分享自知乎网)
https://zhuanlan.zhihu.com/p/28836892?utm_source=qq&utm_medium=social 首发于Runtime 写文章 利用GPU实现翻页效果 ...
- ViewPager实现滑动翻页效果
实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下: import android.content.Context; import andr ...
- 简单做出HTML5翻页效果文字特效
之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的,主要利用了CSS3的transfor ...
- 实战Jquery(四)--标签页效果
这两天完毕了实战四五六的样例,实例四是标签页的实现方法,实例五是级联菜单下拉框,实例六是窗体效果,都是web层经常使用的效果.越到后面越发认为技术这东西,就是一种思路的展现,懂了要实现 ...
随机推荐
- HPUX 大文件系统扩容
1.比对出新增加的磁盘 ioscan -fnuC disk ioscan -m dsf ioscan -fnC disk ioscan -m dsf 2.创建物理卷 pvcrea ...
- gitignore for vs
*/**/bin/Debug*/**/bin/Release*/**/obj/Debug*/**/obj/Release*/**/x86/Debug*/**/x86/Release*/**/x64/D ...
- 菜鸟类库诞生记二:通过反射转换DataRow为对象
虽然大数据量的环境下,通过反射转换DataRow为对象性能会很低,但是在数据量适中的时候,这样能够减少很多的代码量,性能也确实不错. 所以在数据量不是很大的情况下,推荐使用. 如果数据量很大,可以使用 ...
- [AX]AX2012 Number sequence framework :(三)再谈Number sequence
AX2012的number sequence framework中引入了两个Scope和segment两个概念,它们的具体作用从下面序列的例子说起. 法国/中国的法律要求财务凭证的Journal nu ...
- VS2005 / windows sdk7.1配置
VS2005工程需要调用一些后期VS带的库 1. VS2005 安装顺序 1.vs20052.msdn(optional)3.VS80sp1-KB926601-X86-ENU_SP1.exe4.VS8 ...
- Controller_Abstract的改造
Controller_Abstract 是所有Controller的父类,改造它可以节省很多时间. 比如execute方法,execute是每个action执行时都在执行的方法. function e ...
- Shooting Algorithm
Shooting算法是Wenjiang提出的一种优化Lasso(L1 Regularization)和Bridge Regression的算法, 本文以Lasso为例. 对于线性回归问题$\mathb ...
- 解决在IE下LABEL中IMG图片无法选中RADIO的几个方法
转http://www.cnblogs.com/chenxianbin89/archive/2012/11/25/2787258.html . 方法三,THML代码控制: 在IMG中加一个属性,dis ...
- CSS的sprite和单位
(1).关于css sprite技术 比方说: 有个论坛频道,其中有个一些论坛特有的小图标(火啊,顶啊之类),基于整站小图标大团结的思想,这些小图标也放在了那个icon背景图片上了.然而,数年下来,我 ...
- Django数据模型及操作
转自:http://blog.sina.com.cn/s/blog_a73687bc0101cygy.html (一) 初始化测试运行环境 import os; import sys; sys.pat ...