javascript - PanGestureHandler：从下到上重置为底部然后动画

Question

为了更清楚，我附上了零食。我正在尝试实现类似于 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,
  ),
);

但是，在尝试从底部对其进行动画处理时，它只是将车把捕捉到底部，然后将其动画到顶部。在进一步调试时，我意识到翻译后的位置会重置，然后它会动画。

小吃

score 0 · Accepted Answer

我已经解决了这个问题并用解决方案更新了零食。基本上，有几个问题。

在从上到下拖动手柄时，translationY 的值将是负数，因为您正在向相反方向平移。因此，为了修复它，我将负值与总高度相加add(400, dragY)：
```
    set(
        dragY,
        runTiming(clockY, add(400, dragY), velocityY, 0, gestureState, () => {
          console.log('f2');
        }),
      )
```

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,
  ];
}

javascript - PanGestureHandler：从下到上重置为底部然后动画

1 回答 1

Related

Reference