JavaScript & CSS: как записать положение деления между началом и концом перевода css

Question

В основном мне нужно выполнить анимацию столкновения и отскока для трех шаров, движущихся случайным образом в кадре / контейнере, расположенных так, как показано на рисунке ниже.

Чтобы проверить, сталкивается ли шар с чем-либо, мне нужно отслеживать каждую позицию деления во время состояния перевода в css, используя javascript.Используя getBoundingClientRect(), я получу только конечную позицию div, но мне нужно отслеживать / записывать каждую точку пути, по которому идет div, когда мы используем css translate.

Я буду использовать обычный угловойанимации, и я не планирую добавлять дополнительные 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

Так что в основном вам нужно анимировать шары с помощью JS вместо CSS и обнаруживать столкновения в каждом кадре анимации.Поэтому ваш код должен выглядеть примерно так:

const balls = [{
    $el: document.getElementsByClassName("animation1")[0],
    r: 25, // ball radius
    vs: 0.1, // speed in pixels per frame
  },
  {
    $el: document.getElementsByClassName("animation2")[0],
    r: 25, // ball radius
    vs: 0.3, // speed in pixels per frame
  },
  {
    $el: document.getElementsByClassName("animation3")[0],
    r: 25, // ball radius
    vs: 0.5, // speed in pixels per frame
  }
];

function isColliding(ball1, ball2) {
  const a = ball1.r + ball2.r;
  const dx = ball1.$el.offsetLeft - ball2.$el.offsetLeft;
  const dy = ball1.$el.offsetTop - ball2.$el.offsetTop;
  return a > Math.sqrt((dx ** 2) + (dy ** 2));
}

function tick() {
  // Change positions
  balls.forEach((ball) => {
    ball.$el.style.y += ball.vs;
  });

  // Detect collisions
  for (let i = 0; i < balls.length - 1; i++) {
    for (let j = i + 1; j < balls.length; j++) {
      if (isColliding(balls[i], balls[j])) {
        // Collision detected
      }
    }
  }
  
  requestAnimationFrame(tick);
}

requestAnimationFrame(tick);

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

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

Answer 2

Возможно, вы можете сделать что-то вроде опроса, чтобы проверить, сталкиваются ли эти два шара или пересекаются друг с другом?

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 () возвращает размер элемента и его положение относительновидовой экран. MDN Web Docs