如何在React Native Reanimated中指定多个动画的执行顺序？

Reanimated的withSequence和withParallel完全可以实现你需要的「顺序执行」和「并行执行」多动画效果，只是写法和原生Animated不同——Reanimated基于共享值（SharedValue）和Worklet，不需要调用.start()，而是通过runOnUI将动画逻辑放到UI线程执行。

顺序动画示例（对应原生Animated.sequence） #

先完成a的动画，再执行b的动画：

import { useSharedValue, withTiming, withSequence, runOnUI } from 'react-native-reanimated';

const a = useSharedValue(0);
const b = useSharedValue(1);

const animateSequence = () => {
  runOnUI(() => {
    withSequence(
      // 第一步：执行a的动画（从0→1，时长1秒）
      () => {
        a.value = withTiming(1, { duration: 1000 });
      },
      // 第二步：a的动画完成后，执行b的动画（从1→0，时长1秒）
      () => {
        b.value = withTiming(0, { duration: 1000 });
      }
    );
  })();
};

并行动画示例（对应原生Animated.parallel） #

a和b的动画同时启动：

import { useSharedValue, withTiming, withParallel, runOnUI } from 'react-native-reanimated';

const a = useSharedValue(0);
const b = useSharedValue(1);

const animateParallel = () => {
  runOnUI(() => {
    withParallel(
      // 同时执行a的动画
      () => {
        a.value = withTiming(1, { duration: 1000 });
      },
      // 同时执行b的动画
      () => {
        b.value = withTiming(0, { duration: 1000 });
      }
    );
  })();
};

额外说明 #

1. 动画完成监听：如果需要在动画结束后执行逻辑，可以在withTiming的第三个参数传入回调：

a.value = withTiming(1, { duration: 1000 }, (isFinished) => {
  if (isFinished) {
    console.log("a的动画已完成");
  }
});

2. Worklet要求：所有动画相关的逻辑必须放在runOnUI包裹的函数中（这是Reanimated的核心机制，确保动画在UI线程执行，避免卡顿）。

内容的提问来源于stack exchange，提问作者Yeummy