您如何转换成帧器运动值？

Question

我有一个运动值，只要鼠标悬停在组件上，它就会更新。我认为 framer-motion 会自动处理将值动画化到其新状态，但显然它不会。如何转换运动值的新值？同样重要的是要注意，我知道存在 whileHover 道具，但我不想在这里使用它。这个示例组件说明了我的情况：

const Component = () => {
    const scale = useMotionValue(defaultScale);

    return (
        <motion.img
        style={{ scale }}
        onMouseEnter={ () => scale.set(1.35) }
        onMouseLeave={ () => scale.set(defaultScale) }
        />
    )
}

Answer 1

你试过了吗useSpring？

const Component = () => {
  const scale = useSpring(1);

  return (
    <motion.div
      style={{ scale, background: "tomato", width: "100px", height: "100px" }}
      onMouseEnter={() => scale.set(1.35)}
      onMouseLeave={() => scale.set(1)}
    />
  );
};

文档：https://www.framer.com/api/motion/motionvalue/#usespring

或者您也可以使用 useAnimation 创建自定义控件和转换：

const Component2 = () => {
  const controls = useAnimation();

  return (
    <motion.div
      style={{ background: "blue", width: "100px", height: "100px" }}
      animate={controls}
      onMouseEnter={() => controls.start({ scale: 1.35 })}
      onMouseLeave={() => controls.start({ scale: 1 })}
    />
  );
};

文档：https://www.framer.com/api/motion/animation/#animation-controls

包含两个示例的 Codesandbox：https://codesandbox.io/s/httpsWhosebugcomquestions64077992-j63qv?file=/src/App.js

您如何转换成帧器运动值？

How do you transition framer motion values?

reactjs

react-hooks

framer-motion