在 framer-motion 中，如何为从 0 到 100 的数字等纯数据设置动画？

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

请注意，我的解决方案中 DOM 不是连续更新 React 状态，而是手动修补以避免协调开销。

见this CodeSandbox。

在 framer-motion 中，如何为从 0 到 100 的数字等纯数据设置动画？

In framer-motion, how to animate pure data like a number from 0 to 100?

javascript

reactjs

framerjs

framer-motion