如何配置React Native Animated实现间隔偏移的多波次并行循环动画？

我在应用里有一系列需要逐个执行动画的对象，当前动画实现代码如下：

const fields = FIELDS.map( f => ({ scale:useRef( new Animated.Value( 1 ) ).current, offset:useRef( new Animated.Value( 0 ) ).current, f }) )

const animation = Animated.loop(
      Animated.stagger( 180, fields.map( ({ scale, offset }) => Animated.parallel( [
        Animated.sequence( [
          Animated.timing( scale, { ...OPTS, toValue:1.4 } ),
          Animated.timing( scale, { ...OPTS, toValue:1 } ),
        ] ),
        Animated.sequence( [
          Animated.timing( offset, { ...OPTS, toValue:-1.4 } ),
          Animated.timing( offset, { ...OPTS, toValue:0 } ),
        ] ), 
      ] ) ) ),
    { useNativeDriver:true }
)

当前效果为对象从1到6依次“放大”“缩小”。现需实现波浪效果：对象(3)动画时对象(1)同步动画，对象(4)动画时对象(2)同步动画，即动画分为2个及以上并行波次，偏移时间为2*180ms，且需在loop循环结束前启动动画，请问该如何配置animation对象？

要实现多波次并行的循环波浪动画，核心是将对象按规则分组，让组内对象保持原有间隔启动，不同组之间错开指定时间启动，同时保证循环衔接流畅。

修改后的animation配置代码如下：

// 定义波次间隔：2*180ms = 360ms
const waveDelay = 180 * 2;
// 组内对象的启动间隔保持原180ms
const itemDelay = 180;

// 将对象分为2个波组：索引0/2/4对应对象1/3/5，索引1/3/5对应对象2/4/6
const waveGroups = [
  fields.filter((_, index) => index % 2 === 0),
  fields.filter((_, index) => index % 2 === 1)
];

const animation = Animated.loop(
  // 两个波组并行执行，第二组延迟waveDelay启动
  Animated.parallel(
    waveGroups.map((group, groupIndex) =>
      Animated.sequence([
        // 波组启动延迟：第一组无延迟，第二组晚waveDelay时间启动
        Animated.delay(groupIndex * waveDelay),
        // 组内对象按原间隔依次执行动画
        Animated.stagger(itemDelay, group.map(({ scale, offset }) =>
          Animated.parallel([
            Animated.sequence([
              Animated.timing(scale, { ...OPTS, toValue: 1.4 }),
              Animated.timing(scale, { ...OPTS, toValue: 1 }),
            ]),
            Animated.sequence([
              Animated.timing(offset, { ...OPTS, toValue: -1.4 }),
              Animated.timing(offset, { ...OPTS, toValue: 0 }),
            ]),
          ])
        ))
      ])
    ),
    // 关闭同步停止，确保两个波组各自完成后无缝衔接循环
    { stopTogether: false }
  ),
  { useNativeDriver: true }
);

关键逻辑说明 #

• 分组规则：按奇偶索引拆分对象，确保第一组的第n个对象和第二组的第n个对象正好错开2个item的启动间隔，完美匹配“对象3与1同步、4与2同步”的需求。
• 波次偏移：通过Animated.delay让第二个波组比第一个晚启动360ms（即2*180ms），形成波浪的错位效果。
• 循环衔接：设置parallel的stopTogether: false，避免两个波组强制同步结束，保证循环时前后动画无缝衔接，无停顿。
• 复用原有动画：组内对象的缩放、位移逻辑完全复用原代码，仅调整启动时机的编排。

如果需要更多波次（比如3个），只需修改分组规则（例如按index % 3拆分），同时将波次延迟改为3*180ms即可。

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