Как я могу запустить функцию после завершения анимации?

Question

Я использую React-native-reanimated а также 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

E сть call для возврата из собственного раздела в JS.

Answer 2

Вы можете использовать метод после завершения анимации ( 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
};