服务器之家

服务器之家 > 正文

Unity UGUI教程之实现滑页效果

时间:2021-11-17 14:36     来源/作者:玄雨

简介

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

Unity UGUI教程之实现滑页效果

原理

使用ugui提供的scrollrect和scrollbar组件实现基本滑动以及自己控制每次移动一页来达到滑页的效果。

实现过程

1.创建两个panel,上面的panel用于显示,下面的panel用于存放按钮

Unity UGUI教程之实现滑页效果

2.在toppanel上添加scrollrect脚本,用于滑动

Unity UGUI教程之实现滑页效果

3.在toppanel下创建一个新的panel,并在子panel下拜访要显示的对象

Unity UGUI教程之实现滑页效果

4.将该子panel设置为scrollrect的活动对象

Unity UGUI教程之实现滑页效果

5.为scrollrect添加scrollbar滚动条,直接在空白处单机右键添加scrollbar即可

Unity UGUI教程之实现滑页效果

Unity UGUI教程之实现滑页效果

6.将scrollbar与scrollrect关联

Unity UGUI教程之实现滑页效果

7.设置scrollrect的其他参数

Unity UGUI教程之实现滑页效果

8.将slidercontrol脚本挂在toppanel上,并关联scrollbar

Unity UGUI教程之实现滑页效果

9.添加响应事件

Unity UGUI教程之实现滑页效果

为按钮也添加相应的事件(记住是五个按钮哈)

Unity UGUI教程之实现滑页效果

10.运行查看效果吧,如果出错,请检查上述步骤

代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
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教程之实现滑页效果,希望对大家有所帮助!

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部