使用 Framer Motion 和 React 使用 motionValues 捕捉到位置 onDragEnd答案

【问题标题】：Snapping to position onDragEnd with motionValues using Framer Motion and React使用 Framer Motion 和 React 使用 motionValues 捕捉到位置 onDragEnd
【发布时间】：2019-09-23 20:53:49
【问题描述】：

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

我从文档中看到您可以使用弹簧来为运动值设置动画：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？

【问题讨论】：

标签： reactjs framerjs framer-motion

【解决方案1】：

我还没有尝试使用 useSpring，但你可以让它与 useAnimation 一起使用。

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

希望这会有所帮助！

【讨论】：

这似乎被 Framer 运动 v2 打破了。知道需要改变什么吗？
我快速浏览了一下，但还没有让它工作。在我看来，当您在同一组件上使用拖动和 useAnimation 时，会出现错误。
这个问题在 v4 中仍然存在。我在这里打开了一个问题github.com/framer/motion/issues/1170