JavaScript&；CSS：如何在CSS翻译开始和结束之间记录div的位置

基本上，我需要为在帧/容器中随机移动的三个球执行碰撞和反弹动画，放置方式与下图类似

为了检查球是否与任何物体碰撞，我需要使用javascript在css的translate状态下跟踪div的每个位置。 使用

getBoundingClientRect（）

我将只获得div的最终位置，但在使用css translate时，我需要跟踪/记录div后面路径的每个点

我将使用纯角度动画，我不打算为此任务添加额外的jQuery

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

函数getRandomInt（最小值、最大值）{ 返回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]； 函数动作（）{ var randomNumMin1=getRandomInt（-100100）； var randomNumMin2=getRandomInt（-100100）； var randomNumMin3=getRandomInt（-100100）； var randomNumMax1=getRandomInt（-100100）； var randomNumMax2=getRandomInt（-100100）； var randomNumMax3=getRandomInt（-100100）； 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； } 行动（） var interval=setInterval（（）=>{ 行动（） }，3000）

[class*=动画]{
宽度：50px；
高度：50px；
背景：红色；
边界半径：50%；
}

---

您可能可以执行类似轮询的操作，以检查两个球是否相互碰撞/相交

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
  }
}

函数冲突（ball1，ball2）{
var obj1=ball1.getBoundingClientRect（）；
var obj2=ball2.getBoundingClientRect（）；
如果（obj1.leftobj2.left&&
obj1.topobj2.top）{
//变换/反转等。
}
否则{
//还没有碰撞
}
}

getBoundingClientRect（）方法返回元素的大小及其相对于视口的位置。

---

因此，基本上，您需要使用JS而不是CSS为球设置动画，并在每个动画帧上检测碰撞。因此，您的代码应该如下所示：

const balls=[{
$el:document.getElementsByClassName（“animation1”）[0]，
r:25，//球半径
vs:0.1，//以每帧像素为单位的速度
},
{
$el:document.getElementsByClassName（“动画2”）[0]，
r:25，//球半径
vs:0.3，//以每帧像素为单位的速度
},
{
$el:document.getElementsByClassName（“动画3”）[0]，
r:25，//球半径
vs:0.5，//以每帧像素为单位的速度
}
];
函数集合（ball1，ball2）{
常数a=ball1.r+ball2.r；
常数dx=ball1.$el.offsetLeft-ball2.$el.offsetLeft；
const dy=ball1.$el.offsetTop-ball2.$el.offsetTop；
返回a>Math.sqrt（（dx**2）+（dy**2））；
}
函数tick（）{
//换位
balls.forEach（（ball）=>{
ball.$el.style.y+=ball.vs；
});
//检测碰撞
for（设i=0；i
[class*=动画]{
宽度：50px；
高度：50px；
背景：红色；
边界半径：50%；
}

您好，您的解决方案对我来说很好，让我试试。顺便说一句，我更新了一点问题。@Ankitkumarsing这只是一种常见的方法。基本上，您有一些实体列表，甚至可能是管理器，在每个屏幕帧上，您都在执行一些计算或只是应用一个状态（如果您在tick函数之外的某个地方更改它，例如，在某些setTimeout回调或用户交互中）