react-native-reanimated 如何在 'Animated.timing' 函数之间使用延迟

Question

我使用 react-native-reanimated version: '1.7.1' 并尝试处理 4 个不同计时函数之间的延迟。我试图在网上找到说明，但没有找到明确的说明： https://docs.swmansion.com/react-native-reanimated/docs/1.x.x/about#reanimated-overview https://docs.swmansion.com/react-native-reanimated/docs/1.x.x/declarative

我知道在 original reactNative API 中有延迟所以我试图找到与这个好库相媲美的东西

export const createTimingAnimation = (value: Animated.Node<number>, duration = 500, easing = Easing.inOut(Easing.ease), toValue = 1) => {
  return Animated.timing(value, {
    toValue,
    duration,
    easing,
  });
};

Answer 1

我没有找到任何正式的方法，所以我创建了一个：

export const timingAnimationWithDelay = (delay: number, timingAnimation: Animated.BackwardCompatibleWrapper, finishCallback?: any): void => {
  setTimeout(() => {
    timingAnimation.start(() => {
      finishCallback && finishCallback();
    });
  }, delay);
};

然后你这样称呼它：

const greetingNfnTiming = createTimingAnimation(animatedValue, 480, Easing.out(Easing.cubic));

timingAnimationWithDelay(1000, greetingNfnTiming, onGreetingFinish);

react-native-reanimated 如何在 'Animated.timing' 函数之间使用延迟

react-native-reanimated how to use delay between 'Animated.timing' functions

react-native

react-native-reanimated