策划需求要一个类似圆柱滚动的展示界面,但UGUI自带的Scroll View并不支持缩放变化这些效果,只能百度寻找答案,后发现AnimationCurve的一个案例,通过这个组件可以实现这样的渐变效果
在VS中定义一个AnimationCurve类型的变量,可以通过F12查看其中包含的一些方法和属性
由于我对这个组件了解并不深,所以并没有用代码的形式调整动画曲线,声明称公共的之后可以在面板上很方便的调整,主要用到的是其中的 Evaluate 这一方法
//
// 摘要:
// Evaluate the curve at time.
//
// 参数:
// time:
// The time within the curve you want to evaluate (the horizontal axis in the curve
// graph).
//
// 返回结果:
// The value of the curve, at the point in time specified.
[GeneratedByOldBindingsGeneratorAttribute]
public float Evaluate(float time);
简单来讲就是传入一个x轴的值返回曲线对应的y值。
关于我这个界面的制作,主要是通过实现EventSystem中拖拽点击的几个接口,用百分比值计算获取实际数据的方式设置属性
先说Item,只需要初始化方法和一个移动的方法
public class UI_Control_ScrollFlow_Item : MonoBehaviour
{
private UI_Control_ScrollFlow parent;
[HideInInspector]
public RectTransform rect;
public Image img;
///
/// 所处的百分比值
///
public float v=0;
private Vector3 p, s;
///
/// 缩放值
///
public float sv;
private Color color;
public void Init(UI_Control_ScrollFlow _parent)
{
rect =this. GetComponent();
img = this.GetComponent();
parent = _parent;
color = img.color;
}
public void Drag(float value)
{
v += value;
p=rect.localPosition;
p.x=parent.GetPosition(v);
rect.localPosition = p;
color.a = parent.GetApa(v);
img.color = color;
sv = parent.GetScale(v);
s.x = sv;
s.y = sv;
s.z=1;
rect.localScale = s;
}
}
拖拽的方法只是通过百分比值确定属性进行赋值更改Item的属性,主Rect的控制方法如下,关于形成循环这里还有很大问题,虽然目前可以通过拖拽调整Rect的大小范围进行隐藏,但是当子项数据较多的时候并不好,应当采用刷新Item数据的方式,而不用创建这么多的子物体,动画效果则只需要点击面板上的动画曲线进行调整即可,我这个缩放曲线就是一个二次函数波峰的形状,略微调整了一下透明度,位置曲线是±0.5因为锚点在中间,设置到最左也可以从零开始
public class UI_Control_ScrollFlow : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler, IPointerClickHandler
{
public RectTransform Rect;
public List Items;
///
/// 宽度
///
public float Width = 1920;
///
/// 大小
///
public float MaxScale = 1;
///
/// StartValue开始坐标值,AddValue间隔坐标值,小于vmian 达到最左,大于vmax达到最右
///
public float StartValue = 0.1f, AddValue = 0.2f, VMin = 0.1f, VMax = 0.9f;
///
/// 坐标曲线
///
public AnimationCurve PositionCurve;
///
/// 大小曲线
///
public AnimationCurve ScaleCurve;
///
/// 透明曲线
///
public AnimationCurve ApaCurve;
///
/// 计算值
///
private Vector2 start_point, add_vect;
///
/// 动画状态
///
public bool _anim = false;
///
/// 动画速度
///
public float _anim_speed = 1f;
private float v = 0;
private List GotoFirstItems = new List(), GotoLaserItems = new List();
public event CallBack MoveEnd;
//初始化
public void Refresh()
{
//初始化Item列表
for (int i = 0; i < Rect.childCount; i++)
{
Transform tran = Rect.GetChild(i);
UI_Control_ScrollFlow_Item item = tran.GetComponent();
if (item != null)
{
Items.Add(item);
item.Init(this);
item.Drag(StartValue + i * AddValue);
if (item.v - 0.5 < 0.05f)
{
Current = Items[i];
}
}
}
}
public void OnBeginDrag(PointerEventData eventData)
{
start_point = eventData.position;
add_vect = Vector3.zero;
_anim = false;
}
public void OnDrag(PointerEventData eventData)
{
add_vect = eventData.position - start_point;
v = eventData.delta.x * 1.00f / Width;
//Debug.LogError(v);
for (int i = 0; i < Items.Count; i++)
{
Items[i].Drag(v);
}
Check(v);
}
//判断拖拽方向形成循环
public void Check(float _v)
{
if (_v < 0)
{//向左运动
for (int i = 0; i < Items.Count; i++)
{
if (Items[i].v < (VMin))
{
GotoLaserItems.Add(Items[i]);
}
}
if (GotoLaserItems.Count > 0)
{
for (int i = 0; i < GotoLaserItems.Count; i++)
{
GotoLaserItems[i].v = Items[Items.Count - 1].v + AddValue;
Items.Remove(GotoLaserItems[i]);
Items.Add(GotoLaserItems[i]);
}
GotoLaserItems.Clear();
}
}
else if (_v > 0)
{//向右运动,把超出右边的放到前面来
for (int i = Items.Count - 1; i > 0; i--)
{
if (Items[i].v >= VMax)
{
GotoFirstItems.Add(Items[i]);
}
}
if (GotoFirstItems.Count > 0)
{
for (int i = 0; i < GotoFirstItems.Count; i++)
{
GotoFirstItems[i].v = Items[0].v - AddValue;
Items.Remove(GotoFirstItems[i]);
Items.Insert(0, GotoFirstItems[i]);
}
GotoFirstItems.Clear();
}
}
}
public void OnEndDrag(PointerEventData eventData)
{
float k = 0, v1;
for (int i = 0; i < Items.Count; i++)
{
if (Items[i].v >= VMin)
{
v1 = (Items[i].v - VMin) % AddValue;//还需要位移的百分比
if (add_vect.x >= 0)//判断左右移
{
k = AddValue - v1;
}
else
{
k = v1 * -1;
}
break;
}
}
add_vect = Vector3.zero;
AnimToEnd(k);
}
public void OnPointerClick(PointerEventData eventData)
{
if (add_vect.sqrMagnitude <= 1)
{
UI_Control_ScrollFlow_Item script = eventData.pointerPressRaycast.gameObject.GetComponent();
if (script != null)
{
float k = script.v;
k = 0.5f - k;
AnimToEnd(k);
}
}
}
public float GetApa(float v)
{
return ApaCurve.Evaluate(v);
}
public float GetPosition(float v)
{
return PositionCurve.Evaluate(v) * Width;
}
public float GetScale(float v)
{
return ScaleCurve.Evaluate(v) * MaxScale;
}
private List SortValues = new List();
private int index = 0;
//排序Item的层次关系
public void LateUpdate()
{
for (int i = 0; i < Items.Count; i++)
{
if (Items[i].v >= VMin && Items[i].v <= VMax)
{
index = 0;
for (int j = 0; j < SortValues.Count; j++)
{
if (Items[i].sv >= SortValues[j].sv)
{
index = j + 1;
}
}
SortValues.Insert(index, Items[i]);
}
}
for (int k = 0; k < SortValues.Count; k++)
{
SortValues[k].rect.SetSiblingIndex(k);
}
SortValues.Clear();
}
private float AddV = 0, Vk = 0, CurrentV = 0, Vtotal = 0, VT = 0;
//private float _v1 = 0, _v2 = 0;
//private float start_time = 0, running_time = 0;
public UI_Control_ScrollFlow_Item Current;
//提供保持选项居中所需位移
public void AnimToEnd(float k)
{
AddV = k;
if (AddV > 0) { Vk = 1; }
else if (AddV < 0) { Vk = -1; }
else
{
return;
}
Vtotal = 0;
_anim = true;
}
//检测居中
void Update()
{
if (_anim)
{
CurrentV = Time.deltaTime * _anim_speed * Vk;//一帧时间*动画速度*动画方向=这帧移动的距离向量
VT = Vtotal + CurrentV;//已经挪的距离
//判断还需要挪的距离
if (Vk > 0 && VT >= AddV) { _anim = false; CurrentV = AddV - Vtotal; }
if (Vk < 0 && VT <= AddV) { _anim = false; CurrentV = AddV - Vtotal; }
//==============
for (int i = 0; i < Items.Count; i++)
{
Items[i].Drag(CurrentV);//移动Item位置
if (Items[i].v - 0.5 < 0.05f)
{
Current = Items[i];
}
}
Check(CurrentV);
Vtotal = VT;//用于累加的中间变量
}
}
}