当前位置: 首页 > news >正文

unity | 动画模块之卡片堆叠切换

一、预览动画

可以放很多图,可以自己往后加,可以调图片x轴和y轴间距,可以调图片飞出方向,可以调堆叠方向。

图1 图片堆叠动画预览

二、纯净代码

有粉丝问我这个效果,最近很忙,没有时间细写,先发上来给有需要的朋友用。

如果帮到你了,请给我一个赞,预制体同步上传

using System.Collections;
using UnityEngine;
using UnityEngine.EventSystems;public class CardStack2D : MonoBehaviour,IPointerDownHandler,IPointerUpHandler
{//卡片移动速度[SerializeField] private float cardMoveSpeed = 8f;//按钮冷却时间private bool canUseHorizontalAxis = true;[SerializeField] private float buttonCooldownTime = 5f;//x轴间隔[SerializeField] private int xPowerDifference;//y轴间隔[SerializeField] private int cardYMultiplier = 32;//z轴间隔[SerializeField] private int cardZMultiplier = 32;//调整终点X[SerializeField] private int endXPos = 1280;//卡片[SerializeField] private int cardIndex;[SerializeField] private Transform[] cards;public bool isLeftGroup = true;[SerializeField] private Vector3[] cardPositions;//鼠标拖拽private bool isDraggingCard;private float lastMouseX;private float deltaX;private void Start(){//xPowerDifference = 9 - cards.Length;//卡片位置共有  x*2-1个cardPositions = new Vector3[cards.Length * 2 - 1];//左半部分卡片for (int i = cards.Length; i > -1; i--){if (i < cards.Length - 1){float positionX;if (isLeftGroup){positionX = -xPowerDifference+ cardPositions[i + 1].x;}else{positionX = xPowerDifference+ cardPositions[i + 1].x;}//设置卡片的初始位置cardPositions[i] = new Vector3(positionX, cardYMultiplier * Mathf.Abs(i + 1 - cards.Length), cardZMultiplier * Mathf.Abs(i + 1 - cards.Length));}else{cardPositions[i] = Vector3.zero;}}//右半部分卡片for (int i = cards.Length; i < cardPositions.Length; i++){cardPositions[i] = new Vector3(endXPos + 4 * (i - cards.Length), 0, -2 + -2 * (i - cards.Length));}}private void Update(){for (int i = 0; i < cards.Length; i++){cards[i].localPosition = Vector3.Lerp(cards[i].localPosition, cardPositions[i + cardIndex],Time.deltaTime * cardMoveSpeed);if (Mathf.Abs(cards[i].localPosition.x - cardPositions[i + cardIndex].x) < 0.01f){cards[i].localPosition = cardPositions[i + cardIndex];if (cards[i].localPosition.x == 0){cards[i].gameObject.GetComponent<CanvasGroup>().interactable = true;}else{cards[i].gameObject.GetComponent<CanvasGroup>().interactable = false;}}}}private void LastCard(){if (!canUseHorizontalAxis||(cardIndex-1)<0) return;cardIndex--;StartCoroutine(ButtonCooldown());}private void NextCard(){if (!canUseHorizontalAxis||(cardIndex+1)>=cards.Length) return;cardIndex++;StartCoroutine(ButtonCooldown());}private IEnumerator ButtonCooldown(){canUseHorizontalAxis = false;yield return new WaitForSeconds(buttonCooldownTime);canUseHorizontalAxis = true;}public void OnPointerDown(PointerEventData eventData){isDraggingCard = true;lastMouseX = Input.mousePosition.x;}public void OnPointerUp(PointerEventData eventData){if(!isDraggingCard) return;isDraggingCard = false;deltaX = Input.mousePosition.x - lastMouseX;Debug.Log(deltaX);switch (deltaX){case > 50:NextCard();break;case < -50:LastCard();break;}}private void OnDisable(){cardIndex = 0;}
}

http://www.lryc.cn/news/492069.html

相关文章:

  • 前端开发工程师需要学什么?
  • 网络常见命令
  • logminer挖掘日志归档查找问题
  • Flume和kafka的整合:使用Flume将日志数据抽取到Kafka中
  • springboot实战(19)(条件分页查询、PageHelper、MYBATIS动态SQL、mapper映射配置文件、自定义类封装分页查询数据集)
  • ScreenshotToCode安装教程
  • 最佳实践:如何在 Vue.js 项目中使用 Jest 进行单元测试
  • MySQL 与 MongoDB 存储差异分析
  • 【2024】前端学习笔记19-ref和reactive使用
  • 2024.11.26总结
  • 《通俗易懂 · JSqlParser 解析和构造SQL》
  • OSPTrack:一个包含多个生态系统中软件包执行时生成的静态和动态特征的标记数据集,用于识别开源软件中的恶意行为。
  • 路由器中继与桥接
  • 香橙派--安装RKMPP、x264、libdrm、FFmpeg(支持rkmpp)以及opencv(支持带rkmpp的ffmpeg)(适用于RK3588平台)
  • 【spark-spring boot】学习笔记
  • 【Python】九大经典排序算法:从入门到精通的详解(冒泡排序、选择排序、插入排序、归并排序、快速排序、堆排序、计数排序、基数排序、桶排序)
  • 【346】Postgres内核 Startup Process 通过 signal 与 postmaster 交互实现 (5)
  • Jmeter中的测试片段和非测试原件
  • 利用 Jsoup 进行高效 Web 抓取与 HTML 处理
  • 【Java】二叉树:数据海洋中灯塔式结构探秘(上)
  • 微信小程序 WXS 的概念与基本用法教程
  • Vue.js 中 v-bind 和 v-model 的用法与异同
  • K8s的水平自动扩容和缩容HPA
  • 【AI日记】24.11.26 聚焦 kaggle 比赛
  • 大型语言模型LLM - Finetuning vs Prompting
  • 【IEEE独立出版 | 厦门大学主办】第四届人工智能、机器人和通信国际会议(ICAIRC 2024,12月27-29日)
  • 【GPT】力量训练是什么,必要吗,有可以替代的方式吗
  • 【03】Selenium+Python 八种定位元素方法
  • 笔记:jQuery追加js时会自动加“_时间戳“参数,导致百度统计失败
  • 【PyTorch】(基础二)---- 张量