Координаты React Spring не установлены должным образом, заставляя анимацию прыгать и плохо себя вести - PullRequest
Новая
       10

Координаты React Spring не установлены должным образом, заставляя анимацию прыгать и плохо себя вести

0 голосов
/ 28 июня 2019

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

До сих пор все в моем коде работало хорошо, пока я не попытаюсь снова переместить пузырь.В этот раз пузырь перепрыгивает на последнее место, которое он помнит (до того, как я сделал его прикрепленным к стене), и теперь, когда я перетаскиваю элемент, он не находится под моим курсором.

Я сделал CodeSandBox , чтобы показать вам проблему в действии, или этот код: 

function Helper() {
  const [{ coord }, set] = useSpring(() => ({
    coord: [0, 0],
    config: { mass: 5, tension: 350, friction: 40 }
  }));
  const [drag, setDrag] = React.useState(false);
  const ref = useRef();
  const bind = useGesture({
    onDragStart: () => setDrag(true),
    onDrag: ({ local }) => {
      set({
        coord: [
          local[0] < -230 ? -230 : local[0] > 230 ? 230 : local[0],
          local[1] < -670 ? -670 : local[1] > 120 ? 120 : local[1]
        ]
      });
    },
    onDragEnd: ({ local }) => {
      setDrag(false);
      set({ coord: findNearestWall(local) });
    }
  });

  function findNearestWall(local) {
    const [x, y] = local;

    if (x < 0) {
      return [-230, y];
    } else {
      return [230, y];
    }
  }

  return (
    <animated.div
      ref={ref}
      className={`card ${drag ? "dragging" : ""}`}
      {...bind()}
      style={{ transform: interpolate([coord], trans) }}
    />
  );
}

const trans = ([x, y]) => {
  return `perspective(600px) translate3d(${
    x < -230 ? -230 : x > 230 ? 230 : x
  }px, ${y < -670 ? -670 : y > 120 ? 120 : y}px, 0)`;
};

Требуемый результат предназначен для перетаскивания пузыря, начиная со стены, на которой он застрял, а не из какого-то случайного места на экране.был отброшен ранее.

Это прекрасно работает, если я не приклеиваю его программно к стене с помощью метода findNearestWall.

Спасибо!

...