Framer Motion 倒计时动画不精确

Question

我试图在 React 应用程序中使用 Framer Motion 进行 [n 秒] 倒计时，但是当我尝试更改 [n 秒] 之后屏幕上显示的文本时，倒计时到达文本之前的 0 秒改变发生了。

这是进行更改的代码：

const [status, setStatus] = useState("Waiting...");
const count = useMotionValue(5);
const time = useTransform(count, Math.round);

useEffect(() => {
    const animation = animate(count, 0, { duration: 5 });

    setTimeout(() => {
        setStatus("Finished!");
    }, 5 * 1000);

    return animation.stop;
}, []);

用于重现此内容的 GitHub 存储库链接如下：https://github.com/jpfragoso30/jp-framer-sandbox/tree/main

我尝试使用动画的onUpdate方法来检查是否是异步的问题

const animation = animate(count, 0, { duration: 5, onUpdate: (value) => { if (value === 0) setStatus("Finished!"); }, });

还有动画结束时的 .then

const animation = animate(count, 0, { duration: 5, }).then(() => setStatus("Finished!"));;

在所有这些尝试中，我只是得到相同的结果，“完成！”文本有延迟，如果这有意义的话，我认为动画不会自然计数。

Answer 1

你愿意尝试一下吗？

useEffect(() => {
  const controls = animate(count, 0, { duration: 5 });
  
  controls.then(() => {
    setStatus("Finished!");
  });

  return () => controls.stop();
}, []);

由于

useState

的性质，具有像

animate

这样的异步函数，就像关于 lag 的其他问题。