使用两个动画 div 检测碰撞

Question

我正在使用 CSS 动画在屏幕上移动两个矩形 div 标签。每一个都像一根杆子（高过宽）。动画使每个 div 旋转，使其在返回指向上方之前处于一定角度。 一个动画是由用户触发的，另一个是不断地向另一个 div 移动。

我曾尝试使用 getBoundingClientRect() 来检测一个 div 的角何时拦截向它移动的 div。我还使用 jQuery 来获取它们的 .position()，但它们返回 left: 0.

在屏幕上移动的 div 是使用 margin-left 属性完成的。

有没有我应该研究的方法，或者有没有人可以解决类似的问题？

谢谢， DH

Answer 1

您应该使用transform: translate 来移动它们。

此外，由于您在 javascript 中移动元素，因此您应该将它们的状态存储在内存中，并完全在 javascript 中进行碰撞检测。

应该不需要为此使用 DOM API。

Answer 2

DOM 上没有任何方法可以让您检测重叠对象。我建议使用场景的几何模型并自己进行三角测量，以查看两个框之间何时有交集。使用 JS 显式地为您的对象设置动画也更容易，因为您不必担心与浏览器的 CSS 动画或过渡不同步。

您基本上是在寻找line-line intersection。