代码之家 › 专栏 › 技术社区 › Marek JedliÅski

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

trigonometry css-animations javascript

Marek JedliÅski · 技术社区 · 6 年前

给定初始坐标( left 和 top css属性)和一个移动角度,如何才能找到应该输入的值 transform: translate 为元素设置动画?(元素最终会从屏幕上掉下来,因此最终坐标之一为0或 window.innerWidth 或 window.innerHeight .)

例如,从 left: 0 和 top: 0 ,并且给定90°的角度,终点将位于 左边 等于 窗内部宽度 和 顶部 等于0。如果角度为135°,则元素将位于右下角等。如何计算任何角度的角度?

(transform:translate将Delta作为参数,而不是绝对位置;两者都可以)

1 回复 | 直到 6 年前

Harsh Gupta 6 年前

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

已知数量为初始坐标 { x: 0, y: 0 } 和 { angle: 90 /* in degrees*/ }
找到初始x坐标和 { window.innerWidth if angle is between 90-270 or 0 if angle between 0-90 & 270-360 }
求出角度的余弦并将其乘以x距离
求初始y坐标和{window.innerHeight(如果角度在180-360之间)之间的y距离,或求0(如果角度在0-180之间)}
求出角度的正弦,并将其与y距离相乘
将初始x坐标与余弦*x距离的结果相加。这将提供新的x坐标
将初始y坐标与正弦*y距离的结果相加。这将提供新的y坐标
向xnew和ynew添加一些缓冲区,以便它们从屏幕上消失

要移动图元,您不再需要 transform . 您只需添加 transition 属性并定义新的坐标,并将新类添加到该元素中。 JSFiddle Demo

HTH公司

推荐文章

jpp · 级数展开的三角函数

6 年前

Jack Wild · 三名JS直接在摄像机前获得地面位置

6 年前

urukh · Arduino波发生器

6 年前

Michael K. · 如何以java度求反余弦

6 年前

user4683497 · 如何从Unity3D中的第三人称相机的localEulerAngels中获得1对1的浮点值?

6 年前

Fedir Tsapana · OpenCV三角:查找离摄影机最近的对象

6 年前

RectangleEquals · 计算三维平面圆的最小半径

6 年前

Marek JedliÅski · 根据初始坐标和运动角度计算屏幕位置

6 年前

alex dave · 如何在梯形边上添加点?[已关闭]

6 年前

Rick T · csc(余割)周期方程及其意外结果

6 年前