如何实时获取CSS动画运行中元素的当前位置？

你之前两个方案失效的核心原因很明确：

• useEffect+useRef的组合只会在依赖变更时执行，CSS动画跑在浏览器合成线程，不会主动触发React的effect重跑，自然拿不到中间值。
• 纯setInterval计算的逻辑和CSS动画的渲染调度完全分离，定时器会受主线程长任务、浏览器刷新率波动影响，必然出现位置不同步的问题。

下面两个方案都是直接对齐浏览器渲染节奏，拿到的位置和你看到的播放头位置完全一致，不会有偏差。

方案1：requestAnimationFrame + DOM位置读取（改造成本最低，完全匹配直接读元素真实位置的需求） #

这个方案是在浏览器每一次屏幕重绘之前，直接读取播放头元素的真实渲染位置，和CSS动画的帧完全同步，不会有任何偏移，改你现有代码只需要几步：

• 给播放头DOM绑定ref
• 播放状态开启时启动rAF循环，每帧读一次元素位置
• 播放停止、组件卸载时取消循环，避免内存泄漏

可直接复用的实现代码：

import { useRef, useEffect, useState } from 'react';

export default function Playhead({ play }) {
  const playheadRef = useRef(null);
  const rafId = useRef(0);
  const [offsetX, setOffsetX] = useState(0);

  useEffect(() => {
    // 非播放状态直接停掉帧循环
    if (!play || !playheadRef.current) {
      cancelAnimationFrame(rafId.current);
      return;
    }

    const getPosition = () => {
      if (!playheadRef.current) return;
      // 读取元素相对视口的真实横向坐标
      const headRect = playheadRef.current.getBoundingClientRect();
      // 如果需要相对播放容器的坐标，减去容器的left值即可
      // const containerRect = playheadRef.current.parentElement.getBoundingClientRect();
      // const currentX = headRect.left - containerRect.left;
      const currentX = headRect.left;
      setOffsetX(currentX);

      // 这里直接写音符触发逻辑就行，判断currentX是否命中对应音符的坐标点
      // 注意不要用全等判断，留1-2px的阈值避免漏触发
      // if (Math.abs(currentX - targetNoteX) < 2) 触发对应音符播放

      rafId.current = requestAnimationFrame(getPosition);
    };

    rafId.current = requestAnimationFrame(getPosition);

    // 组件卸载/播放状态变更时清理循环
    return () => cancelAnimationFrame(rafId.current);
  }, [play]);

  return <div className="playhead" ref={playheadRef} />;
}

别担心读getBoundingClientRect()的性能问题，这个操作是在渲染帧执行的，不会触发额外重排，开销和你直接拿JS变量值差不了多少，比setInterval的稳定性高几个量级。

方案2：Web Animations API 读动画进度（性能最优，无需读DOM布局） #

如果不想每帧读DOM，可以把原来的CSS动画换成Web Animations API驱动，直接从动画实例上拿当前播放进度，换算成位置就行，性能更好，也不会有布局读取的开销：

useEffect(() => {
  if (!play || !playheadRef.current) return;
  const parentWidth = playheadRef.current.parentElement.clientWidth;
  // 定义和你原有CSS完全一致的动画效果
  const headAnimation = playheadRef.current.animate(
    [{ left: "0%" }, { left: "100%" }],
    {
      duration: 4000, // 对应原CSS的4s时长
      easing: "linear",
      iterations: Infinity,
    }
  );

  const rafId = { current: 0 };
  const calcPosition = () => {
    // 直接拿动画当前播放时间算进度，不需要查DOM
    const playProgress = headAnimation.currentTime / 4000;
    const currentX = playProgress * parentWidth;
    setOffsetX(currentX);
    // 音符触发逻辑和方案1一致
    rafId.current = requestAnimationFrame(calcPosition);
  };
  rafId.current = requestAnimationFrame(calcPosition);

  return () => {
    cancelAnimationFrame(rafId.current);
    headAnimation.cancel();
  };
}, [play]);

避坑提示 #

• 尽量不要用offsetLeft拿位置，这个值会受父元素的padding、border、定位属性影响，计算结果很容易出偏差，getBoundingClientRect()返回的值是浏览器渲染时用的真实坐标，100%准确。
• 不要尝试用scroll事件、mouse事件这类原生事件去蹭位置，触发频率和渲染帧不对齐，还是会有延迟。
• 音符触发逻辑不要用currentX === 目标位置的全等判断，浏览器每帧移动的像素距离不固定，留1-2px的误差阈值，才不会漏触发。

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