reactjs - 使用 Framer Motion 和 React 使用 motionValues 捕捉到位置 onDragEnd

Question

我正在使用成帧器动作在我的项目中创建滑动交互。我正在努力做到这一点，以便当用户完成拖动孩子时，它会“快速”回到设定的位置。

我从文档中看到，您可以使用弹簧来为运动值设置动画：const y = useSpring(x, { damping: 10 })，但我想我做得不对？这是我的代码：

export default function SwipeContainer(props) {
  const x = useMotionValue(0);
  const m = useSpring(x, { damping: 10 });

  const handleDragEnd = (evt) => {
    console.log(evt);
    m.set(200);
  }

  return (
    <div className={styles.swipeContainer}>
      <motion.div
        style= {{ x, m }}
        className={styles.motionDiv}
        drag="x"
        onDragEnd={handleDragEnd}
      >
        {props.children}
      </motion.div>
    </div>
  );

}

我期待当 dragEnd 事件发生时，孩子将动画到 x:200，但那没有发生。我是否错误地设置了值，或者可能是我如何将运动值应用于motion.div？

Answer 1

我还没有尝试过useSpring，但你可以让它与useAnimation.

这是一个类似情况的 CodeSandbox：https ://codesandbox.io/s/framer-motion-bottom-sheet-fixed-m2vls 。

希望这可以帮助！