UGUI各种优化效果
本文所实现的UGUI效果需求如下:
- 支持缩放滑动效果
- 支持动态缩放循环加载
- 支持大数据固定Item复用加载
- 支持不用Mask遮罩无限循环加载
- 支持ObjectPool动态加载
- 支持无限不规则子物体动态加载
- 支持拖动并点击和拖拽
- 支持拖动并拖拽
- 支持ScrollRect拖动自动吸附功能(拖动是否超过一半自动进退)
前言
要实现以上效果,我从网上搜索得到部分解决方案链接,但不是完全满足想要的效果,就自己继续改造优化和添加想要的效果,本文最后会附带上完整Demo下载链接。
效果图
- 缩放滑动效果
- 缩放循环展示卡牌效果
- 大量数据无卡顿动态加载,并且支持拖拽、点击和吸附功能
大量数据循固定Item复用
无限无遮罩动态加载
- 不规则子物体动态循环加载
部分核心代码
- 有遮罩无卡顿加载
思路:并没有使用UGUI的ScrollRect组件,摆放几张卡片,通过移动和缩放来实现
1 | using UnityEngine; |
1 | using UnityEngine; |
有遮罩无卡顿加载
思路:协程加载,先加载屏幕显示的数量,然后返回一帧在继续加载,防止出现数量太大卡顿的现象。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
55while (CardsList.Count > roleInfo.Count)
{
DestroyImmediate(CardsList[0].gameObject);
CardsList.RemoveAt(0);
}
StartCoroutine(createRoleCards());
private IEnumerator createRoleCards()
{
List<CLocalCharInfo> charInfos = new List<CLocalCharInfo>();
charInfos.AddRange(roleInfo);
int index = 0;
for (int i = 0; i < charInfos.Count; i++)
{
_createRoleCard(charInfos[i], index++);
if (index % 10 == 0)
yield return null;
}
}
private void _createRoleCard(CLocalCharInfo roleInfo, int index)
{
CUIPlayedCharCardWidget charCardWidget = null;
if (CardsList.Count > index)
{
charCardWidget = CardsList[index];
}
else
{
var obj = Instantiate(Resources.Load<GameObject>("Prefab/RoleCard")) as GameObject;
if (obj == null)
{
UnityEngine.Debug.LogError("有误");
return;
}
obj.name = roleInfo.Name;
charCardWidget = obj.GetComponent<CUIPlayedCharCardWidget>();
if (charCardWidget == null)
{
UnityEngine.Debug.LogError("有误");
return;
}
obj.transform.parent = Obj_ScrollViewContent.transform;
obj.transform.localScale = Vector3.one;
CardsList.Add(charCardWidget);
}
CUIPlayedCharCardWidget.CUIContent uiContent = new CUIPlayedCharCardWidget.CUIContent();
uiContent.RoleInfo = roleInfo;
uiContent.ScrollRectObj = m_ScrollRect;
uiContent.FixGridRect = m_FixGrid;
charCardWidget.InitContent(uiContent);
}支持ScrollRect拖拽或点击
思路:在卡片的Image上添加一个继承了IBeginDragHandler,IGradHandler,IEndDragHandler的脚本,重写接口里面的Drag事件方法。
1 | using UnityEngine; |
如果想要实现拖拽到目标位置的检测,还要在目标位置放一个Image并且添加上继承了IDropHandler,IPointerEnterHandler,IPointerExitHanler的组件。
1 | using System.Reflection; |
在ScrollRect物体上添加吸附功能组件,工程里面要使用DoTween插件
1 | using System.Collections.Generic; |
具体DemoGit下载链接
欢迎加入U3D开发交流群:159875734优化支持横竖屏的ScrollRect吸附功能
1 | using System.Collections.Generic; |
补充
如果代码创建AnimationCurve默认是曲线,如果想要直线效果,可以在面板里面设置,也可以代码设置,如果代码设置如下:
1 | var curve2 = new AnimationCurve(); |
这样的话就是直线了。