Unity UI拖选卡片之美

目标需求:

在制定区域内部进行拖选,可以获得选中卡片的信息,靠近中间区域的会变大,两侧变小,松手的时候会返回到最靠近的一个卡片当中。

结合我们的需求,下面就教大家实现UI拖选卡片的功能

Unity组件

代码如下

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.Events;
using UnityEngine.EventSystems;

public class UIDragComp : MonoBehaviour,IDragHandler,IEndDragHandler
{
    //-------------------------- Unity obj ------------
    public Transform contant;
    public Transform center;
    Transform _select;
    public List<Transform> objs;
    Coroutine moveToCenter;
    public Transform select { get { return _select; } }
    public int objCount { get { return objs.Count; } }
    public int selcetIndex { get { return objs.IndexOf(_select); } }
    Transform leftTrans;
    Transform rightTrans;
    //------------------------- init ------
    void Awake()
    {
        SetRightLeft();
        FindSelectObj();
    }
    void SetRightLeft()
    {
        float right = -9999;
        float left = 9999;
        Transform rightObj = null;
        Transform leftObj = null;
        for (int i = 0; i < objs.Count; i++)
        {
            if (objs[i].position.x > right)
            {
                rightObj = objs[i];
                right = objs[i].transform.position.x;
            }
            if (objs[i].position.x < left)
            {
                leftObj = objs[i];
                left = objs[i].transform.position.x;
            }
        }
        leftTrans = leftObj;
        rightTrans = rightObj;
    }
    //------------------ function ---------
    Transform FindSelectObj()
    {
        Transform nearly = null;
        float minDis = 999;
        for (int i = 0; i < objs.Count; i++)
        {
            float dis = Vector2.Distance(objs[i].position, center.position);
            if (dis < minDis)
            {
                nearly = objs[i];
                minDis = dis;
            }
        }
        _select = nearly;
        return nearly;
    }
    IEnumerator MoveToSelect()
    {
        Vector3 centerPos = center.position;
        Vector3 targetPos = _select.position;
        float distance = Vector3.Distance(centerPos, targetPos);
        while (distance > 0.03f)
        {
            centerPos = center.position;
            targetPos = _select.position;
            Vector3 pos = Vector3.Lerp(targetPos, centerPos, 0.3f);
            Vector3 contantMove = pos - _select.position;
            contant.Translate(contantMove);
            distance = Vector3.Distance(centerPos, _select.position);
            ScaleTheSize();
            yield return null;
        }
        moveToCenter = null;
    }
    void ScaleTheSize()
    {
        foreach (Transform trans in objs)
        {
            float distance = Vector2.Distance(trans.position, center.position);
            float tLerp = distance / (Screen.width / 2);
            float size = Mathf.Lerp(1f, 0.65f, tLerp);
            trans.localScale = new Vector3(1, 1, 1) * size;
        }
    }
    //------------------------- ui event ---------------
    public void OnDrag(PointerEventData data)
    {
        Vector3 delta = data.delta;
        float xMove = delta.x;
        if (leftTrans.position.x + xMove >= (center.position.x + Screen.width / 4))
            xMove = (center.position.x + Screen.width / 4) - leftTrans.position.x;
        if (rightTrans.position.x + xMove <= (center.position.x - Screen.width / 4))
            xMove = (center.position.x - Screen.width / 4) - rightTrans.position.x;
        contant.Translate(xMove * Vector3.right);
        FindSelectObj();
        ScaleTheSize();
        if (moveToCenter != null) StopCoroutine(moveToCenter);
    }
    public void OnEndDrag(PointerEventData data)
    {
        moveToCenter = StartCoroutine(MoveToSelect());
    }
}

 

 

 

 

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值