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

基于扑克牌分发效果制作时的问题总结

其基本效果如图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1. 在overlay模式下直接使用position来移动

实现代码

public class Card : MonoBehaviour
{public RectTransform target;public Button cardButton;private bool isPack = false;public List<RectTransform> cards = new List<RectTransform>();public List<Vector3> positions = new List<Vector3>();   //记录每张牌的原始屏幕位置void Start(){for (int i = 0; i < cards.Count; i++){//positions.Add(cards[i].anchoredPosition);positions.Add(cards[i].position);}cardButton.onClick.AddListener(CardClicked);}private void CardClicked()  //这里的关键是坐标转换,源UI的坐标系和目标UI的坐标系不一样,因为锚点位置不一样{ DOTween.KillAll();if (!isPack)    {isPack = true;Sequence se = DOTween.Sequence();for (int i = 0; i < cards.Count; i++){se.Append(cards[i].transform.DOMove(target.position, 0.2f));se.AppendInterval(0.1f);}}else{isPack = false;Sequence se = DOTween.Sequence();for (int i = positions.Count - 1; i >= 0; i--){//se.Append(cards[i].DOAnchorPos(positions[i], 0.2f));se.Append(cards[i].transform.DOMove(positions[i], 0.2f));se.AppendInterval(0.1f);}}}
}

使用DoTween来实现移动的动画。
positions 列表用来记录每张牌的原始屏幕坐标,因为Canvas是overlay模式,所以每个Image的position就是屏幕坐标,而这里的target就是中心点Center,注意,Center的锚点是在中心且聚拢的,而对于牌,因为要适配不同分辨率的屏幕,所以锚点都做了自适应。
对于将牌移动到中心点,直接将目标点设置为target.position,对于将牌还原,这里将目标点设置为提前记录的每张牌的原始position,以上成立的逻辑是因为在Canvas是overlay模式,UI元素的position就是屏幕坐标

2. 使用anchoredPosition移动

而如果要用anchoredPosition来做移动,那么情况就有些不同了,因为anchoredPosition的本质是从Anchor到Pivot的向量,即当锚点聚拢时,RectTransform的PosX和PosY就是从Anchor到Pivot的距离
在这里插入图片描述
在这里插入图片描述
此时PosY的值为200
如果将Pivot的位置移动到正方形Image的最底边
在这里插入图片描述

在这里插入图片描述
发现值变成了150,即原先的200 - 50,因为正方形边长的一半是50,此时Pivot的值是(0.5,0)

实现代码

public class Card : MonoBehaviour
{public RectTransform target;public Button cardButton;private bool isPack = false;public List<RectTransform> cards = new List<RectTransform>();public List<Vector3> positions = new List<Vector3>();     //记录每张牌的原始屏幕位置void Start(){for (int i = 0; i < cards.Count; i++){positions.Add(cards[i].anchoredPosition);//positions.Add(cards[i].position);}cardButton.onClick.AddListener(CardClicked);}private void CardClicked()  //这里的关键是坐标转换,源UI的坐标系和目标UI的坐标系不一样{ DOTween.KillAll();if (!isPack)    {isPack = true;Sequence se = DOTween.Sequence();for (int i = 0; i < cards.Count; i++){//se.Append(cards[i].transform.DOMove(target.position, 0.2f));GetTargetAnchorPos(cards[i].anchorMin);se.Append(cards[i].DOAnchorPos(target.anchoredPosition, 0.2f));se.AppendInterval(0.1f);}}else{isPack = false;Sequence se = DOTween.Sequence();for (int i = positions.Count - 1; i >= 0; i--){se.Append(cards[i].DOAnchorPos(positions[i], 0.2f));//se.Append(cards[i].transform.DOMove(positions[i], 0.2f));se.AppendInterval(0.1f);}}}/// <summary>/// 得到锚点修改后的taregt的anchoredPosition/// </summary>/// <param name="anchorCenter"></param>public void GetTargetAnchorPos(Vector2 anchorCenter){Vector2 oldAnchorCenter = (target.anchorMin + target.anchorMax) / 2;Vector2 oldAnchorPos = target.anchoredPosition;target.anchorMin = anchorCenter;target.anchorMax = anchorCenter;Vector2 deltaAnchor = oldAnchorCenter - anchorCenter;    //计算锚点的偏移Vector2 deltaMove = new Vector2(deltaAnchor.x * 1125, deltaAnchor.y * 2436);  //计算位置的偏移target.anchoredPosition = oldAnchorPos + deltaMove;}
}

增加了一个GetTargetAnchorPos方法,用来重新计算在当前这张牌所在的锚点下,中心点需要更改为这个牌的锚点,并且重新计算anchoredPosition ,前提是这些牌的锚点都是聚拢的,然后移动的时候将目标点都设置为对应点的anchoredPosition

相关文章:

基于扑克牌分发效果制作时的问题总结

其基本效果如图 1. 在overlay模式下直接使用position来移动 实现代码 public class Card : MonoBehaviour {public RectTransform target;public Button cardButton;private bool isPack false;public List<RectTransform> cards new List<RectTransform>(…...

老榕树的Java专题:Redis 从入门到实践

一、引言 在当今的软件开发领域&#xff0c;数据的高效存储和快速访问是至关重要的。Redis&#xff08;Remote Dictionary Server&#xff09;作为一个开源的、基于内存的数据结构存储系统&#xff0c;因其高性能、丰富的数据类型和广泛的应用场景&#xff0c;成为了众多开发者…...

【玩转 Postman 接口测试与开发2_019】第15章:利用 Postman 初探 API 性能测试(含实战截图)

《API Testing and Development with Postman》最新第二版封面 文章目录 第十五章 API 接口性能测试1 性能负载的类型2 Postman 负载配置3 Postman 性能测试实战3.1 Fixed 型负载下的性能测试3.2 基于数据驱动的 Postman 接口性能测试 4 性能测试的注意事项 写在前面 终于来到了…...

在 Qt 开发中,可以将 QML 封装成库

在 Qt 开发中&#xff0c;可以将 QML 封装成库&#xff0c;以便在多个项目中复用 QML 组件或模块。下面通过一个简单的例子说明如何将 QML 封装成库并在其他项目中使用。 1. 创建 QML 库项目 首先&#xff0c;我们创建一个新的 Qt 项目&#xff0c;专门用于封装 QML 组件。假…...

换电脑了如何快速导出vscode里的插件

当你换电脑了&#xff0c;之前vscode里的插件又不想全部手动重装&#xff0c;那么恭喜你&#xff0c;刷到了这篇文章。 1. 将 VSCode 添加到系统路径 macOS 打开 VSCode。按下 Command Shift P 打开命令面板。 3。 输入 Shell Command: Install ‘code’ command in PATH …...

点大商城V2-2.6.6源码全开源uniapp +搭建教程

一.介绍 点大商城V2独立开源版本&#xff0c;版本更新至2.6.6&#xff0c;系统支持多端&#xff0c;前端为UNiapp&#xff0c;多端编译。 二.搭建环境&#xff1a; 系统环境&#xff1a;CentOS、 运行环境&#xff1a;宝塔 Linux 网站环境&#xff1a;Nginx 1.21 MySQL 5.…...

9 Pydantic复杂数据结构的处理

在构建现代 Web 应用时&#xff0c;我们往往需要处理复杂的输入和输出数据结构。例如&#xff0c;响应数据可能包含嵌套字典、列表、元组&#xff0c;甚至是多个嵌套对象。Pydantic 是一个强大的数据验证和序列化库&#xff0c;可以帮助我们轻松地处理这些复杂的数据结构&#…...

springboot+redis实现将树形结构存储到redis

1.pom配置redis <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency>2.yml文件配置&#xff1a; spring:redis:database: 0host: 1.1.1.1port: 6379timeout:…...

6、使用one-api管理统一管理大模型,并开始使用本地大模型

文章目录 本节内容介绍集中接入&#xff1a;将大模型统一管理起来当使用了大模型代理大模型代理示例 开源模型&#xff1a;如何使用Hugging Face上的模型modelscope使用 pipeline 调用模型用底层实现调用模型流式输出 如何在项目中使用开源模型使用 LangChain使用集中接入开始使…...

Windows安装Lyx

Lyx介绍 LyX 是一个基于 LaTeX 的可视化编辑器&#xff0c;可以让在不编写 LaTeX 代码的情况下使用 LaTeX 的排版功能。 需要依赖Latex环境&#xff0c;如Tex live 或者 MiKTeX Lyx 官网 Lyx官网 安装包下载 点击download默认进入最新版本下载界面 在Recent News/ News里可选…...

一文讲透大模型部署工具ollama--结合本地化部署deepseek实战

Ollama 是一个开源的人工智能平台&#xff0c;专注于在本地高效运行大型语言模型&#xff08;LLMs&#xff09;。通过 Ollama&#xff0c;开发者可以在自己的机器上运行多种大规模语言模型&#xff0c;而不必依赖于云端服务。它支持对大模型的管理和本地化部署&#xff0c;并且…...

网络防御高级

接口配置&#xff1a; SW2: [sw2]vlan 10 [sw2]vlan 20 [sw2]interface GigabitEthernet 0/0/1 [sw2-GigabitEthernet0/0/1]port link-type trunk [SW2-GigabitEthernet0/0/1]port trunk allow-pass vlan 10 20 [sw2]interface GigabitEthernet 0/0/2 [sw2-GigabitEthernet0/0/…...

使用PyCharm进行Django项目开发环境搭建

如果在PyCharm中创建Django项目 1. 打开PyCharm&#xff0c;选择新建项目 2.左侧选择Django&#xff0c;并设置项目名称 3.查看项目解释器初始配置 4.新建应用程序 执行以下操作之一&#xff1a; 转到工具| 运行manage.py任务或按CtrlAltR 在打开的manage.pystartapp控制台…...

如何定义“破坏环境”

当我们谈论破坏环境时&#xff0c;通常会从人类活动对自然生态造成负面影响的角度来定义。例如&#xff0c;大规模的森林砍伐、工业污染排放、温室气体增加等&#xff0c;都是典型的破坏环境的行为。我们常常看到这些行为导致了生态系统的破坏、物种灭绝、气候变化等问题&#…...

现代前端开发的演进与未来趋势:从工具革新到技术突破

在过去的十年中&#xff0c;前端开发经历了翻天覆地的变化。从最初的静态页面到如今复杂的单页应用&#xff08;SPA&#xff09;&#xff0c;从手动操作 DOM 到基于虚拟 DOM 的高效渲染&#xff0c;从前端“三剑客”&#xff08;HTML/CSS/JS&#xff09;到全栈框架的兴起&#…...

活动预告 |【Part1】Microsoft 安全在线技术公开课:安全性、合规性和身份基础知识

课程介绍 通过参加“Microsoft 安全在线技术公开课&#xff1a;安全性、合规性和身份基础知识”活动提升你的技能。在本次免费的介绍性活动中&#xff0c;你将获得所需的安全技能和培训&#xff0c;以创造影响力并利用机会推动职业发展。你将了解安全性、合规性和身份的基础知识…...

idea Ai工具通义灵码,Copilot我的使用方法以及比较

我用过多个idea Ai 编程工具&#xff0c;大约用了1年时间&#xff0c;来体会他们那个好用&#xff0c;以下只是针对我个人的一点分享&#xff0c;不一定对你适用 仅作参考。 介于篇幅原因我觉得能说上好用的 目前只有两个 一个是阿里的通义灵码和Copilot&#xff0c;我用它来干…...

【JavaScript】《JavaScript高级程序设计 (第4版) 》笔记-Chapter8-对象、类与面向对象编程

八、对象、类与面向对象编程 ECMA-262 将对象定义为一组属性的无序集合。严格来说&#xff0c;这意味着对象就是一组没有特定顺序的 值。对象的每个属性或方法都由一个名称来标识&#xff0c;这个名称映射到一个值。正因为如此&#xff08;以及其他还未讨论的原因&#xff09;&…...

介绍下SpringBoot常用的依赖项

Spring Boot 是一个用于快速开发 Spring 应用程序的框架&#xff0c;它通过自动配置和依赖管理简化了开发过程。以下是一些 Spring Boot 项目中常用的依赖项&#xff1a; 1. Spring Boot Starter Web 作用: 用于构建 Web 应用程序&#xff0c;包括 RESTful 服务。依赖项: spr…...

深度解析策略模式:从理论到企业级实战应用

一、策略模式的本质&#xff1a;面向接口的算法工厂 策略模式&#xff08;Strategy Pattern&#xff09;是行为型设计模式的典型代表&#xff0c;其核心思想是将算法族抽象为独立对象&#xff0c;使其能够相互替换。这种模式完美体现了以下面向对象设计原则&#xff1a; 开闭原…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...