UIGrid实现卡牌曲线层叠效果

先上一张效果图.原理就是动态修改grid下每个节点的Y轴坐标和旋转角度
这里写图片描述

    // 枚举类型加入Curve排序方式
    public enum Arrangement
    {
        Horizontal,
        Vertical,
        CellSnap,
        Curve
    }

    /// <summary>
    /// 曲线旋转差值
    /// </summary>
    public float CurveAngleD_val = 1f;

    /// <summary>
    /// 曲线坐标递减
    /// </summary>
    public float CurveY_D_val = 2f;

    /// <summary>
    /// 卡牌基础层级
    /// </summary>
    public int CardBaseDepth = 10;

修改UIGrid中的ResetPosition方法:

// 总数是否为奇数
bool isListOdd = list.Count % 2 != 0;
// 中间值
var midVal = isListOdd ? list.Count / 2 : (list.Count / 2) - 1;
if (arrangement == Arrangement.Curve)
            {
                // 只有一张牌 放在正中心无旋转
                if (list.Count == 1)
                {
                    t.rotation = Quaternion.identity;
                    if (widget != null)
                        widget.depth = CardBaseDepth*4;
                    pos = new Vector3(cellWidth * x, -cellHeight * y, depth);
                }
                else if (list.Count == 2)
                {
                    float angle = i%2 == 0 ? CurveAngleD_val : -CurveAngleD_val;
                    t.rotation = Quaternion.Euler(new Vector3(0, 0, angle));
                    if (widget != null)
                        widget.depth = i % 2 == 0 ? CardBaseDepth * 3 : CardBaseDepth * 3 - 5;
                    pos = new Vector3(cellWidth * x, -cellHeight * y, depth);
                }
                else
                {
                    // 总数为奇数 中间卡不旋转
                    if (isListOdd && i == midVal)
                    {
                        t.rotation = Quaternion.identity;
                        if (widget != null)
                            widget.depth = CardBaseDepth * (list.Count/2 + 1);
                    }   
                    else
                    {
                        float angle = 0f;
                        if (isListOdd)
                        {// 奇数
                            angle = (i < midVal) ? CurveAngleD_val : -CurveAngleD_val;
                            angle = Mathf.Abs(midVal - i) * angle;
                            pos = new Vector3(cellWidth * x, -Mathf.Abs(CurveY_D_val * Mathf.Abs(midVal - i)), depth);
                            if (widget != null)
                                widget.depth = (i < midVal) ? (i+1) * CardBaseDepth : (list.Count-i) * CardBaseDepth - 5;
                        }
                        else
                        {// 偶数
                            if (i <= midVal)
                            {
                                var idx = Mathf.Abs((midVal - i) + 1);
                                angle = idx * CurveAngleD_val;
                                pos = new Vector3(cellWidth * x, -Mathf.Abs(CurveY_D_val * idx), depth);
                            }                             
                            else
                            {
                                var idx = Mathf.Abs((midVal - i));
                                angle = idx * (-CurveAngleD_val);
                                pos = new Vector3(cellWidth * x, -Mathf.Abs(CurveY_D_val * idx), depth);
                            }    
                            if (widget != null)
                                widget.depth = (i <= midVal) ? (i + 1) * CardBaseDepth : (list.Count - i) * CardBaseDepth - 5;
                        }  
                        t.rotation = Quaternion.Euler(new Vector3(0, 0, angle));
                    }
                }
            }

修改UIGrid下Resetposition修正坐标方法

if (pivot != UIWidget.Pivot.TopLeft)
        {
            Vector2 po = NGUIMath.GetPivotOffset(pivot);

            float fx, fy;

            if (arrangement == Arrangement.Horizontal || arrangement == Arrangement.Curve)
            {
                fx = Mathf.Lerp(0f, maxX * cellWidth, po.x);
                fy = Mathf.Lerp(-maxY * cellHeight, 0f, po.y);
            }
            else
            {
                fx = Mathf.Lerp(0f, maxY * cellWidth, po.x);
                fy = Mathf.Lerp(-maxX * cellHeight, 0f, po.y);
            }

            for (int i = 0; i < myTrans.childCount; ++i)
            {
                Transform t = myTrans.GetChild(i);
                if (arrangement == Arrangement.Curve && list.Count > 0)
                    t = list[i];
                SpringPosition sp = t.GetComponent<SpringPosition>();

                if (sp != null)
                {
                    if (isListOdd && i == midVal && arrangement == Arrangement.Curve)
                    { //  设置中间卡坐标
                        if (list.Count <= 1 || pivot == UIWidget.Pivot.Top || pivot == UIWidget.Pivot.Center || pivot == UIWidget.Pivot.Bottom )
                        {
                            sp.target = Vector3.zero;
                        }
                        else
                        { 
                            //sp.target = new Vector3(list[i-1].transform.localPosition.x + cellWidth,0,0);
                            sp.target = new Vector3(cellWidth * i, 0, 0);
                        }  
                    }
                    else
                    {
                        sp.target.x -= fx;
                        sp.target.y -= fy;
                    }
                    sp.enabled = true;
                }
                else
                {
                    Vector3 pos = t.localPosition;
                    if (i == midVal && isListOdd && arrangement == Arrangement.Curve)
                    { //  设置中间卡坐标
                        if (list.Count <= 1 || pivot == UIWidget.Pivot.Top || pivot == UIWidget.Pivot.Center || pivot == UIWidget.Pivot.Bottom)
                        {
                            pos = Vector3.zero;
                        }
                        else
                        { 
                            pos = new Vector3(cellWidth * i, 0, 0);
                        }
                    } 
                    else
                    {
                        pos.x -= fx;
                        pos.y -= fy;
                    } 
                    t.localPosition = pos;
                }
            }
        }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值