JavaScript 和 CSS : How to log position of a div between css translate start and end

Question

基本上我需要为在框架/容器内随机移动的三个球执行碰撞和反弹动画，放置类似于下图。

为了检查球是否与任何东西发生碰撞，我需要使用 javascript 在 css 中的翻译状态期间跟踪 div 的每个位置。使用 getBoundingClientRect() 我只会得到 div 的最终位置，但是当我们使用 css translate 时，我需要跟踪/记录 div 后面的路径的每个点。

我将使用普通的 Angular 动画，我不打算为此任务添加额外的 jQuery。

这是我在浏览器控制台上尝试的示例演示，它帮助我随机移动球，但它们有时会重叠，当球接触到容器边缘或另一个球的表面时，我需要反弹。

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

var anim2 = document.getElementsByClassName("animation1")[0];
var anim1 = document.getElementsByClassName("animation2")[0];
var anim4 = document.getElementsByClassName("animation3")[0];

function action() {

  var randomNumMin1 = getRandomInt(-100, 100);
  var randomNumMin2 = getRandomInt(-100, 100);
  var randomNumMin3 = getRandomInt(-100, 100);

  var randomNumMax1 = getRandomInt(-100, 100);
  var randomNumMax2 = getRandomInt(-100, 100);
  var randomNumMax3 = getRandomInt(-100, 100);

  var num1 = `translate(${randomNumMin1}px, ${randomNumMax1}px)`;
  var num2 = `translate(${randomNumMin2}px, ${randomNumMax2}px)`;
  var num4 = `translate(${randomNumMin3}px, ${randomNumMax3}px)`;

  anim1.style.transition = 'all 3s';
  anim1.style.transform = num1;

  anim2.style.transition = 'all 3s';
  anim2.style.transform = num2;

  anim4.style.transition = 'all 3s';
  anim4.style.transform = num4;
}

action()
var interval = setInterval(() => {
  action()
}, 3000)

[class*=animation] {
    width: 50px;
    height: 50px;
    background: red;
    border-radius: 50%;
}

<div class="animation1"></div>
<div class="animation2"></div>
<div class="animation3"></div>

需要帮助。

提前致谢。

Answer 1

你或许可以做一些类似轮询的事情来检查两个球是否相互碰撞/相交？

function collides(ball1, ball2){
  var obj1 = ball1.getBoundingClientRect();
  var obj2 = ball2.getBoundingClientRect();

  if (obj1.left < obj2.left + obj2.width  && obj1.left + obj1.width  > obj2.left &&
        obj1.top < obj2.top + obj2.height && obj1.top + obj1.height > obj2.top) {
    // change transform / reverse etc.
  }
  else{
    // not collided yet
  }
}

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口(viewport)的位置。 MDN Web Docs