react-native - 动画完成后如何触发功能？

Question

我正在使用React-native-reanimatedand react-native-gesture-handler，我需要在动画完成后触发一个函数，这是我的代码：

  let a = new Value(1);
  let onStateChange = event([
    {
      nativeEvent: ({state}) =>
        block([
          cond(
            eq(state, State.END),
            set(a, runTiming(new Clock(), 1, 0)),
          ),
        ]),
    },
  ]);

return <TapGestureHandler onHandlerStateChange={onStateChange}>

我需要这样的东西：

      onStateChange = event => {
        if (event.nativeEvent.state === State.END) {
          alert("I'm being pressed");
        }
        return block([
          cond(
            eq(event.nativeEvent.state, State.END),
            set(a, runTiming(new Clock(), 1, 0)),
          ),
        ]);
      },

但不起作用。：/

Answer 1

有一种call方法可以处理从本机部分返回到 JS。

Answer 2

call动画完成后，您可以使用该方法 ( state.END)。

此示例适用于普通动画，但您的案例的实现应该类似，请注意，当您使用时，call您可以将参数传回您要使用的函数。

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

  const config = {
    duration: ANIMATION_DURATION,
    toValue: dest,
    easing: Easing.inOut(Easing.ease),
  };

  return block([
    cond(clockRunning(clock), 0, [
      set(state.finished, 0),
      set(state.time, 0),
      set(state.position, value),
      set(state.frameTime, 0),
      set(config.toValue, dest),
      startClock(clock),
    ]),
    timing(clock, state, config),
    cond(state.finished, [
      stopClock(clock),
      call([dest], (d) => afterAnimationActions(d)), // <-- Add this
    ]),
    state.position,
  ]);
}

有了它，你可以runTiming这样调用：

transY = runTiming({
    clock: this.clock,
    value: this.from,
    dest: this.toValue,
    afterAnimationActions: this.afterAnimationActions,
});

afterAnimationActions 应该是这样的：

afterAnimationActions = ([dest]) => {
    // `dest` is the param we passed using `call`
    // The function logic here
};