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

Compute screen location based on initial coords and angle of movement

给定屏幕上绝对定位元素的初始坐标（left 和 top css 属性）和移动角度，如何找出我的值应该提供给 transform: translate 来为元素设置动画？（该元素最终会脱离屏幕，因此最终坐标之一将为 0 或 window.innerWidth 或 window.innerHeight。）

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

(transform: translate 以deltas为参数，不是绝对位置；两者都可以)

实际上是相当简单的触发。根据您给出的示例：

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

要移动元素，您不再需要 transform。您可以简单地添加一个 transition CSS 属性并定义新的坐标，并将新的 class 添加到该元素。 JSFiddle Demo

HTH

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

Compute screen location based on initial coords and angle of movement

javascript

trigonometry

css-animations