问题根源：独立动画循环的时间累积误差 #

你遇到的同步漂移问题，核心原因是每个Wave组件都在维护自己独立的动画循环。React Native的Animated.delay和Animated.timing虽然精度很高，但长期运行时，JS线程的调度波动、Native动画的微小时间偏差会在每个独立循环中累积。多个循环之间没有统一的时间锚点，这些微小误差叠加后，就会出现明显的不同步现象。

举个例子：假设第一个循环某次延迟比预期慢了1ms，第二个慢了2ms，第三个慢了3ms，几次循环后，三个动画的时间差就会从原本的300ms逐渐拉开，最终完全错开。

最优解决方案：用单一全局时钟驱动所有动画 #

要彻底解决同步问题，我们需要放弃多个独立循环，改用统一的全局时间轴来驱动所有波纹动画。所有Wave都基于同一个动画进度值计算自己的缩放状态，这样就不会有多个独立循环的误差叠加了。

修改后的完整代码

import React, { useEffect, useRef } from 'react';
import { View, StyleSheet, Animated, Easing } from 'react-native';

// 现在Wave组件依赖全局progress，不再自己维护循环
const Wave = ({ progress, startTime, endTime, totalDuration }) => {
  // 将时间转换为总时长的比例（0~1区间）
  const startRatio = startTime / totalDuration;
  const endRatio = endTime / totalDuration;

  // 基于全局进度计算当前波纹的缩放值
  const scaleAnim = progress.interpolate({
    inputRange: [0, startRatio, endRatio, endRatio, 1],
    outputRange: [0, 0, 1, 0, 0],
    extrapolate: 'clamp',
  });

  return (
    <Animated.View
      style={[
        styles.wave,
        { transform: [{ scale: scaleAnim }] },
      ]}
    />
  );
};

const App = () => {
  const totalDuration = 2000; // 统一总时长
  // 全局进度值：0对应动画开始，1对应一个周期结束（2000ms）
  const progress = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    // 只维护一个全局循环：让progress从0线性到1，循环往复
    const globalAnimation = Animated.loop(
      Animated.timing(progress, {
        toValue: 1,
        duration: totalDuration,
        easing: Easing.linear,
        useNativeDriver: true,
      }),
      { resetBeforeLoop: true } // 每次循环前重置progress到0，避免累积误差
    );

    globalAnimation.start();
    return () => globalAnimation.stop();
  }, [progress, totalDuration]);

  return (
    <View style={styles.container}>
      <Wave progress={progress} startTime={0} endTime={1300} totalDuration={totalDuration} />
      <Wave progress={progress} startTime={300} endTime={1600} totalDuration={totalDuration} />
      <Wave progress={progress} startTime={600} endTime={2000} totalDuration={totalDuration} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  wave: {
    position: 'absolute',
    width: 200,
    height: 200,
    borderRadius: 100,
    borderWidth: 2,
    borderColor: '#007AFF',
  },
});

export default App;

为什么这个方案能解决同步问题？ #

1. 单一时间源：所有波纹动画都依赖同一个progress值，这个值由唯一的全局循环驱动，不存在多个独立定时器的误差叠加。
2. 无累积误差：resetBeforeLoop: true确保每次循环开始时progress都会重置为0，避免长时间运行后进度值的微小偏移。
3. Native驱动优化：全局动画使用Native Driver，运行在UI线程，比JS线程的调度更稳定，进一步降低时间偏差。

额外优化建议 #

• 如果你需要调整总时长，只需要修改totalDuration即可，所有波纹的时间比例会自动适配，不需要逐个修改Wave的参数。
• 可以把totalDuration、波纹的时间配置抽成常量，方便后续维护。
• 如果需要更复杂的动画曲线（比如非线性缩放），只需要修改interpolate的outputRange或添加自定义缓动逻辑即可，所有波纹的同步性依然能保证。

你可以试试运行修改后的代码，不管跑多久，三个波纹都会保持300ms的固定间隔~