Javascript 在帧运动中，如何设置纯数据（如0到100之间的数字）的动画？

如何使用转换配置设置从0到100的纯数字的动画

<motion.div>
  {num}
</motion.div>

{num}

发布了Framer Motion 2.8，非常适合此用例：

import { animate } from "framer-motion";
import React, { useEffect, useRef } from "react";

function Counter({ from, to }) {
  const nodeRef = useRef();

  useEffect(() => {
    const node = nodeRef.current;

    const controls = animate(from, to, {
      duration: 1,
      onUpdate(value) {
        node.textContent = value.toFixed(2);
      }
    });

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

  return <p ref={nodeRef} />;
}

export default function App() {
  return <Counter from={0} to={100} />;
}

从“帧运动”导入{animate}；
从“React”导入React，{useffect，useRef}；
函数计数器（{from，to}）{
const nodeRef=useRef（）；
useffect（（）=>{
const node=nodeRef.current；
常量控件=设置动画（从、到、{
持续时间：1，
onUpdate（值）{
node.textContent=value.toFixed（2）；
}
});
return（）=>controls.stop（）；
}，[从，到]；
return
；
}
导出默认函数App（）{
回来
}

请注意，在我的解决方案中，不是不断更新React状态，而是手动修补DOM，以避免对账开销

---

请参阅。

如果不需要，则必须以不需要的速度更改值。你不需要简单的计数器任何库…除非它是颜色、宽度、位置等的值，然后签出文档谢谢，但motionValue只能立即设置（）或跟踪现有样式值，不能设置动画。定义当它从0到100时，什么叫动画？0淡入淡出，而不是1淡入…？听起来仍然像计数器。更新：这将增加您的捆绑大小。Framer motion现在已删除popmotion依赖项，因此您需要单独安装并加载popmotion。该依赖项是否仍然存在？但是值得注意的是，您应该使用可传递的依赖项，例如，如果您

npm安装popmotion

，您的捆绑包中可能会有两个popmotion副本。很抱歉，我误读了framer运动更改日志：您是正确的，popmotion已作为依赖项列出，但framer motion只导入键值对和实用程序函数的列表，其他所有内容都被树分解了。如果您希望使用popmotion，您仍然应该显式地安装它，并了解将有额外的kb从import@DowngoatFramer Motion 2.8在这个用例中添加了一个新的实用功能。我已经相应地更新了我的解决方案。