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

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

有一个 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
};

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

How i can trigger a function after animating done?

react-native

react-native-reanimated

react-native-gesture-handler