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

其基本效果如图

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