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,
  ),
);

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

小吃

Answer 1

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

1. 在从上到下拖动手柄时，translationY 的值将是负数，因为您正在向相反方向平移。因此，为了修复它，我将负值与总高度相加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,
     ];
   }