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

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/httpsstackoverflowcomquestions64077992-j63qv?file=/src/App.js