动画期间或结束后能否获取形状位置？如何实现碰撞检测？

一、动画结束后的最简检测方式 #

直接利用动画完成的回调时机触发检测，逻辑简单不易出错：

1. CSS动画场景 #

通过animationend事件监听动画结束，执行碰撞检测：

const animatedEl = document.getElementById('animated-box');
const targetEl = document.getElementById('target-box');

animatedEl.addEventListener('animationend', () => {
  // 轴对齐矩形碰撞检测逻辑
  const rectA = animatedEl.getBoundingClientRect();
  const rectB = targetEl.getBoundingClientRect();
  const isCollided = !(
    rectA.right < rectB.left ||
    rectA.left > rectB.right ||
    rectA.bottom < rectB.top ||
    rectA.top > rectB.bottom
  );
  console.log('动画结束后碰撞状态:', isCollided);
});

2. JS手动动画场景 #

在动画循环的终止条件里直接调用检测函数：

let progress = 0;
const maxProgress = 100;
const animatedEl = document.getElementById('animated-box');
const targetEl = document.getElementById('target-box');

function animate() {
  progress++;
  animatedEl.style.transform = `translateX(${progress}px)`;

  if (progress < maxProgress) {
    requestAnimationFrame(animate);
  } else {
    // 动画结束，执行检测
    checkCollision();
  }
}

function checkCollision() {
  const rectA = animatedEl.getBoundingClientRect();
  const rectB = targetEl.getBoundingClientRect();
  const isCollided = !(
    rectA.right < rectB.left ||
    rectA.left > rectB.right ||
    rectA.bottom < rectB.top ||
    rectA.top > rectB.bottom
  );
  console.log('动画结束后碰撞状态:', isCollided);
}

animate();

二、动画期间的实时碰撞检测 #

需要将检测逻辑嵌入到动画的帧更新循环中，确保每帧都能获取元素最新位置：

1. CSS动画场景 #

用requestAnimationFrame同步监听元素位置，实时检测：

const animatedEl = document.getElementById('animated-box');
const targetEl = document.getElementById('target-box');

function checkCollisionInAnimation() {
  const rectA = animatedEl.getBoundingClientRect();
  const rectB = targetEl.getBoundingClientRect();
  const isCollided = !(
    rectA.right < rectB.left ||
    rectA.left > rectB.right ||
    rectA.bottom < rectB.top ||
    rectA.top > rectB.bottom
  );

  if (isCollided) {
    console.log('动画期间发生碰撞');
    // 可选：暂停动画
    animatedEl.style.animationPlayState = 'paused';
    return;
  }

  // 动画仍在运行则继续监听
  if (getComputedStyle(animatedEl).animationPlayState === 'running') {
    requestAnimationFrame(checkCollisionInAnimation);
  }
}

// 启动实时检测
checkCollisionInAnimation();

2. JS手动动画场景 #

在每一帧的动画更新后直接执行检测：

let progress = 0;
const maxProgress = 100;
const animatedEl = document.getElementById('animated-box');
const targetEl = document.getElementById('target-box');

function animate() {
  progress++;
  animatedEl.style.transform = `translateX(${progress}px)`;

  // 每帧执行碰撞检测
  const rectA = animatedEl.getBoundingClientRect();
  const rectB = targetEl.getBoundingClientRect();
  const isCollided = !(
    rectA.right < rectB.left ||
    rectA.left > rectB.right ||
    rectA.bottom < rectB.top ||
    rectA.top > rectB.bottom
  );

  if (isCollided) {
    console.log('动画期间发生碰撞');
    // 可选：终止动画
    return;
  }

  if (progress < maxProgress) {
    requestAnimationFrame(animate);
  }
}

animate();

三、之前检测失败的常见排查点 #

1. 碰撞逻辑错误：确认是否用了正确的轴对齐矩形判断逻辑，不要搞反边界条件；
2. CSS动画同步问题：直接在普通定时器里检测CSS动画元素位置，会因为浏览器重绘时机导致获取到旧坐标，必须用requestAnimationFrame同步监听；
3. 元素定位偏差：检查元素是否有父级偏移、transform变换等，getBoundingClientRect返回的是视口坐标，确保对比的两个元素坐标基准一致；
4. 动画状态判断错误：比如动画已暂停/结束，但检测循环仍在执行，导致误判。

内容的提问来源于stack exchange，提问作者D T