如何过渡成帧器运动值？

问题描述

我有一个运动值，只要将组件悬停，它就会更新。我认为成帧器运动会自动将值设置为新状态，但是显然没有。如何转换运动值的新值？同样重要的是要注意，我知道存在的whileHover道具，但是我不想在这里使用它。 这个示例组件说明了我的情况：

{{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",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