序
一直想实现一种滚动列表能自动吸附居中,最中间的物品能有自动放大的效果,但是还不与主要逻辑有关联,独立成可以每个项目都使用的效果插件,但是我查了查市面上的,没有得到想要的答案。
于是我尝试自己去迭代,我记不清时间有多久远了,只知道我做过一款《二哈下楼记》的游戏,里面选择角色非常顺滑,效果如下:
于是我决定开始制作这么一款插件!
起步
刚开始觉得吧挺简单,后面处理起来发现这是一件非常困难的事情,以至于我认为做成这件事需要很强的程序功底、对Unity UGUI特别熟练、和站在用户的角度去定制需求的能力。
有件事情让我必须得定下来:玩家需要几步才能实现出这种效果,我最开始希望的是1步,即:在你想要加上效果的滚动列表的父对象上添加“效果组件”!
本着这个需求,我开始了我的制作之旅。
吸附细节
我需要在什么时候进行吸附:
- 当加载此页面时
- 当我点击某个非居中的物品时
- 当我点击独立按钮《下一个》或《上一个》时
- 当玩家手指松开并且滑动列表在滑动时的速度小于某一个值时
- 当滚动列表超出边界进行反弹时
然后就是脚本实现功能,篇幅太大就不加进来了
该怎么知道玩家是否松开了手指,添加如下脚本::
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 |
using UnityEngine.UI; using UnityEngine; using UnityEngine.EventSystems; [RequireComponent(typeof(ScrollRect))] /// <summary> /// 用来判断是否还在拖动列表 /// </summary> public partial class MzUGUIScroll : MonoBehaviour , IBeginDragHandler, IEndDragHandler { public bool isDraging { private set; get; } internal MzUGUIScrollCtrl ctrl; public virtual void OnBeginDrag(PointerEventData eventData) { isDraging = true; } public virtual void OnEndDrag(PointerEventData eventData) { isDraging = false; if(ctrl) ctrl.StickWithDragEnd(); } } |
为了简单用户的操作,这个脚本会由主脚本自动生成。
放大效果
这个比吸附就简单多了,因为ScrollView在滑动或者是手指拖动时,是能监听的,所以在这两个地方,可以实现放大的效果:离中心点越近,物品越大,反之就小
监听的事件:
1 |
scrollRect.onValueChanged.AddListener(OnScroll); |
scrollRect 是 ScrollRect类,OnScroll是方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
private void OnScroll(Vector2 pos) { if (isCenterScaleEffect) { for (int i = 0; i < items.Count; i++) { MzUGUIScrollItem item = items[i]; //根据不同类型的列表,进行距离的判断 float dis = 0; if (IsHorizontal && IsVertical) dis = Mathf.Abs(Vector2.Distance(centerPos, item.worldPos)); else if (IsHorizontal) dis = Mathf.Abs(centerPos.x - item.worldPos.x); else dis = Mathf.Abs(centerPos.y - item.worldPos.y); float size = Mathf.Lerp(1, itemEffectSize, 1 - dis / scaleRange); item.SetScale(size); } } } |
外放的参数包括:
- isCenterScaleEffect – 是否有中心缩放效果
- scaleRange – 放大效果覆盖的范围
- itemEffectSize – 放大效果的最大值
成果
最后实现出来,效果参数有8个,默认情况下是不需要调整的。
加入历史选择的记录功能,用户可以选用此功能。
加入了一个Demo场景,介绍了该如何进行动态加载。
2020年11月9号正式上线,定价4.99$,10天卖出了4份。(棒棒)
商店页面:http://u3d.as/28nR
视频演示: