根据初始坐标和运动角度计算屏幕位置

Question

给定屏幕上绝对定位元素的初始坐标（left和top css属性）以及移动角度，我如何找出应该输入{{1}的值动画元素？ （元素最终将脱离屏幕，因此其中一个最终坐标将为0或transform: translate或window.innerWidth。）

例如，从window.innerHeight和left: 0开始，并且给定角度为90°，目标点将在top: 0等于left和{{1等于0.如果角度为135°，则元素将在右下角结束，等等。如何计算任何角度？

（transform：translate将deltas作为参数，而不是绝对位置;要么很好）

Answer 1

实际上相当简单的三角形。根据您给出的示例：

1. 您的已知数量是初始坐标{ x: 0, y: 0 }和{ angle: 90 /* in degrees*/ }
2. 找到初始x-coord与{ window.innerWidth if angle is between 90-270 or 0 if angle between 0-90 & 270-360 }
之间的x距离
3. 找出角度的余弦并将其乘以x距离
4. 找到初始y-coord和{window.innerHeight之间的y距离，如果180-360之间的角度，或者0-180之间的角度，则为0}
5. 找到角度的正弦并将其与y距离相乘
6. 使用余弦* x距离的结果添加初始x-coord。这给出了新的x坐标
7. 使用正弦* y距离的结果添加初始y坐标。这给出了新的y坐标
8. 为xnew和ynew添加一些缓冲区，使它们脱离屏幕

要移动元素，您不再需要transform。您只需添加transition CSS属性，并使用添加到该元素的新类定义新的coords。 JSFiddle Demo

HTH