Question

如何使用过渡配置为从0到100的纯数字设置动画？

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

Answer 1

发布了Framer Motion 2.8 a new animate function，非常适合此用例：

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

请注意，不是在持续更新React状态的情况下，而是在我的解决方案中手动修补了DOM，以避免调节费用。

请参见this CodeSandbox。

在成帧器运动中，如何为纯数据（例如从0到100的数字）设置动画？

1 个答案: