Привязка к положению onDragEnd с помощью motionValues ​​с помощью Framer Motion и React

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.

Надеюсь это поможет!