unity滑动层叠图片轮播展示代码

vjiam

已于 2022-10-31 11:36:47 修改

阅读量4.7k

点赞数 8

文章标签： unity ui c#

于 2022-01-19 16:08:24 首次发布

本文链接：https://blog.youkuaiyun.com/wjmjw307/article/details/122583161

版权

本文介绍了一个使用Unity实现的卡牌移动动画效果及其交互逻辑。通过代码示例详细展示了如何利用Unity UI和DOTween来制作平滑的卡牌翻动动画，并实现了触摸滑动功能以切换卡牌。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;
using System;
using System.Collections.Generic;

public class CardMove : MonoBehaviour
{
    public List<Sprite> Sprites = new List<Sprite>();
    Transform Imgs;  
    int imgId = 0;
    public int CurrentID = 0;

    void Start()
    {
        Imgs = transform.Find("Imgs");
        transform.Find("LeftBtn").GetComponent<Button>().onClick.AddListener(() => { LeftMoveToRight(true); });
        transform.Find("RightBtn").GetComponent<Button>().onClick.AddListener(() => { LeftMoveToRight(false); });
    }

    void LeftMoveToRight(bool IsLeft)
    {
        imgId = IsLeft == true ? GetImgId(0) : GetImgId(1);
        for (int i = 0; i < Imgs.childCount; i++)
        {
            int k = i;
            Transform img = Imgs.GetChild(k).GetChild(0);
            float posX = Imgs.GetChild(i).localPosition.x;
            if (posX == 500)
            {
                if (IsLeft)
                {
                    SetHoming(img, 0, false);
                    if (imgId == 0) { imgId = Sprites.Count - 1; } else { imgId--; }
                    img.GetComponent<Image>().sprite = Sprites[imgId];
                }
                else { SetHoming(img, 3, true); }
            }
            else if (posX == -500)
            {
                if (IsLeft) { SetHoming(img, 2, true); }
                else
                {
                    SetHoming(img, 1, false);
                    if (imgId == Sprites.Count - 1) { imgId = 0; } else { imgId++; }
                    img.GetComponent<Image>().sprite = Sprites[imgId];
                }
            }
            else if (posX == 250) { if (IsLeft) { SetHoming(img, 1, true); } else { SetHoming(img, 4, true); } }
            else if (posX == -250) { if (IsLeft) { SetHoming(img, 4, true); } else { SetHoming(img, 0, true); } }
            else if (posX == 0) { if (IsLeft) { SetHoming(img, 3, true); } else { SetHoming(img, 2, true); } }
        }
        CurrentID = GetImgId(4);
        //Debug.Log(Sprites[CurrentID].name);//居中图片名称
    }

    void SetHoming(Transform img, int index, bool isbreak)
    {
        img.SetParent(Imgs.GetChild(index));
        img.DOLocalMoveX(0, isbreak == true ? 0.2f : 0).SetEase(Ease.Linear);
        img.DOScale(1f, 0.2f).SetEase(Ease.Linear);
        //斜卡片界面需要，不然可以注销
        {
        	img.DOLocalMoveZ(0, 0).SetEase(Ease.Linear);
        	img.localRotation = Quaternion.identity;
        }
    }

    int GetImgId(int childId)
    {
        for (int i = 0; i < Sprites.Count; i++)
        {
            if (Imgs.GetChild(childId).GetChild(0).GetComponent<Image>().sprite.name == Sprites[i].name)
            {
                CurrentID = i;
            }
        }
        return CurrentID;
    }
}

在这里插入图片描述
斜卡片倾斜角度，大概设置一下就行了，这里中间左右的两张图分别旋转了-25°和25°，边上对称的两张图分别旋转了-15°和15°.

图片A:
在这里插入图片描述

图片A布局中的-300_0.7等组件属性为空，-300_0.7表示此组件x相对坐标为-300，组件scale属性为0.7。

Sprite2D的0号位图片在0_1子对象img（Imgs.GetChild(4)），
Sprite2D的1号位图片在150_0.85（Imgs.GetChild(3)），
Sprite2D的2号位图片在300_0.7（Imgs.GetChild(1)），
Sprite2D的倒数第一号位图片在-150_0.85（Imgs.GetChild(2)），
Sprite2D的倒数第二号位图片在-300_0.7（Imgs.GetChild(0)）。

实现效果：
原生JS层叠图片轮播展示代码
在这里插入图片描述
我的项目是12个3D模型在五个点循环轮播。五个点由自己设计，那么三个点就更简单了，如果是七个点就在首位和末尾各加一个点，依此类推。
图片的滑动功能，建议交给外部类处理此方法：CardMove.LeftMoveToRight(true);

	
	/*中间图片在滑动时关闭预留的点击事件，
	若中间的这张图片需要点击后跳转场景，
	判断是滑动还是点击，不能在滑动后就跳转了场景。
	*/
	public static bool IsCanClickBtn = true;
	
    void Update()
    {
        //平板端
        if (Input.touchCount > 0)
        {
            Touch touch = Input.GetTouch(0);
            switch (touch.phase)
            {
                case TouchPhase.Began:
                    startPos = touch.position;
                    break;

                case TouchPhase.Moved:
                    {
                        stayPos = touch.position;
                        if ((startPos - stayPos).magnitude >= 100)
                        {
                            IsCanClickBtn = false;
                        }
                    }
                    break;

                case TouchPhase.Ended:
                    {
                        endPos = touch.position;
                        direction = (startPos - endPos);
                        Debug.Log(direction.magnitude);
                        if (direction.magnitude >= 100)
                        {

                            IsCanClickBtn = false;

                            if (Math.Abs(direction.x) > Math.Abs(direction.y))
                            {

                                if (startPos.x > endPos.x)
                                {
                                    print("左移");
                                    CardMove.LeftMoveToRight(false);
                                }
                                else
                                {
                                    print("右移");
                                    CardMove.LeftMoveToRight(true);
                                }
                            }
                        }
                    }

                    break;
            }
        }
        else
        {
            //桌面端
            if (Input.GetMouseButtonDown(0))
            {
                startPos = Input.mousePosition;
            }
            if (Input.GetMouseButton(0))
            {
                stayPos = Input.mousePosition;
                if ((startPos - stayPos).magnitude >= 100)
                {
                    IsCanClickBtn = false;
                }
            }
            if (Input.GetMouseButtonUp(0))
            {

                endPos = Input.mousePosition;
                direction = (startPos - endPos);
                if (direction.magnitude >= 100)
                {
                    IsCanClickBtn = false;

                    if (Math.Abs(direction.x) > Math.Abs(direction.y))
                    {
                        if (startPos.x > endPos.x)
                        {
                            CardMove.LeftMoveToRight(false);
                        }
                        else
                        {
                            CardMove.LeftMoveToRight(true);
                        }
                    }
                }
            }
        }


        if (Input.GetKeyDown(KeyCode.Escape))
        {
#if UNITY_EDITOR
            UnityEditor.EditorApplication.isPlaying = false;
#else
        Application.Quit();
#endif
        }
    }