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

Я использую движение кадра, чтобы создать взаимодействие смахивания в моем проекте. Я пытаюсь сделать так, чтобы, когда пользователь закончил перетаскивать ребенка, он «защелкивался» обратно в заданное положение.

Я видел из документации, что вы можете использовать пружину для анимации значения движения: 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 framer-motion framerjs
person Jesse Sliter    schedule 23.09.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я еще не экспериментировал с useSpring, но вы можете заставить его работать с useAnimation.

Вот CodeSandbox с похожей ситуацией: https://codesandbox.io/s/framer-motion-bottom-sheet-fixed-m2vls.

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

person amann    schedule 02.10.2019
comment
Похоже, что это не работает с v2 движения Framer. Есть идеи, что нужно изменить? - person Josiah Nunemaker; 11.08.2020
comment
Я быстро посмотрел, но еще не заставил его работать. Мне кажется, что при использовании перетаскивания и useAnimation на одном и том же компоненте возникает ошибка. - person amann; 21.09.2020
comment
Эта проблема все еще сохраняется в v4. Я открыл здесь проблему github.com/framer/motion/issues/1170 - person Moriz Büsing; 24.06.2021