PanGestureHandler: снизу вверх сбрасывается вниз, а затем анимируется

Я прикрепил закуску для большей ясности. Я пытаюсь добиться анимации, похожей на панель уведомлений iOS/Android.

Я успешно могу перетащить руль вниз, используя приведенный ниже код:

const translateY = cond(
  eq(gestureState, State.END),
  [
    cond(
      greaterThan(dragY, 0),
      set(
        dragY,
        runTiming(clockY, dragY, velocityY, 400, gestureState, () => {
          console.log('f1');
        }),
      ),
      set(
        dragY,
        runTiming(clockY, dragY, velocityY, 0, gestureState, () => {
          console.log('f2');
        }),
      ),
    ),
    set(offsetY, dragY),
    dragY,
  ],
  cond(
    eq(gestureState, State.BEGAN),
    [stopClock(clockY), finalDragY],
    finalDragY,
  ),
);

Но, пытаясь анимировать его снизу, он просто привязывает руль к низу, а затем анимирует вверх. При дальнейшей отладке я понял, что переведенная позиция сбрасывается, а затем анимируется.

Закуски


react-native reactjs javascript react-native-reanimated react-native-gesture-handler
person rash.tay    schedule 18.07.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я решил проблему и обновил закуску решением. В общем, было пару вопросов.

  1. При перетаскивании ручки сверху вниз значение перевода Y будет отрицательным, поскольку вы перемещаетесь в противоположном направлении. Итак, чтобы исправить это, я добавил отрицательное значение с общей высотой add(400, dragY):

        set(
        dragY,
        runTiming(clockY, add(400, dragY), velocityY, 0, gestureState, () => {
          console.log('f2');
        }),
      )

  2. translateY используется для сброса вниз, а затем запускает анимацию. Он никогда не обновлялся со значением, возвращаемым из add(400, dragY). Чтобы исправить это, я добавил его в раздел, где шли часы, и я хотел зафиксировать положение:

      function runTiming(
  clock,
  value,
  velocity,
  dest,
) {
  const state = {
    finished: new Value(0),
    velocity: new Value(0),
    position: new Value(0),
    time: new Value(0),
    frameTime: new Value(0),
  };

  const config = {
    duration: 500,
    toValue: new Value(0),
    easing: Easing.inOut(Easing.ease),
  };

  return [
    cond(
      not(clockRunning(clock)),
      [
        set(state.finished, 0),
        set(state.velocity, velocity),
        set(state.position, value),
        set(config.toValue, dest),
        set(state.time, 0),
        set(state.frameTime, 0),
        startClock(clock),
      ],
      [
        // if the clock is already running we update the value, in case a new value is captured from panning
        set(state.position, value),
      ],
    ),
    timing(clock, state, config),
    cond(state.finished, [
      stopClock(clock),
      // reset animation
      set(state.finished, 0),
      set(config.toValue, 0),
      set(state.time, 0),
      set(state.frameTime, 0),
    ]),
    state.position,
  ];
}
person rash.tay    schedule 20.07.2020