如何不使用setInterval，用withRepeat实现React Native Reanimated循环动画？

完全可行，而且用Reanimated原生动画API替代setInterval能避免Web API与原生动画线程的同步问题，让动画更流畅，也无需手动清理定时器。

原逻辑分析 #

你当前的实现是每3秒触发一次：用2秒将progress从当前值+1，当达到阈值5时重置为0，再重复循环。我们可以用Reanimated的withSequence（按顺序执行动画）+withRepeat（无限重复）来复刻这个逻辑。

替代实现代码 #

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

const SomeThreshold = 5;

const YourComponent = () => {
  const progress = useSharedValue(0);

  useEffect(() => {
    // 构建完整的动画序列：0→1→2→3→4→5→0，再重复
    const animationSequence = [];

    // 逐步从0增加到5的每一步动画
    for (let i = 0; i < SomeThreshold; i++) {
      // 从当前值i动画到i+1，耗时2秒
      animationSequence.push(withTiming(i + 1, { duration: 2000 }));
      // 每一步动画后等待1秒（3秒间隔 - 2秒动画时长），最后一步到5后不需要等待
      if (i < SomeThreshold - 1) {
        animationSequence.push(withDelay(1000, () => {}));
      }
    }

    // 从5重置为0（无过渡动画）
    animationSequence.push(withTiming(0, { duration: 0 }));
    // 重置后等待1秒，开启下一轮循环
    animationSequence.push(withDelay(1000, () => {}));

    // 无限重复整个动画序列
    progress.value = withRepeat(withSequence(...animationSequence), -1);

    return () => {
      // 组件卸载时重置动画值
      progress.value = 0;
    };
  }, []);

  // 后续使用progress的代码...
};

关键API说明 #

• withSequence: 按顺序执行传入的多个动画步骤，前一步完成后才会执行下一步。
• withRepeat: 重复指定的动画，第二个参数传-1表示无限重复。
• withDelay: 用于添加步骤间的等待时间，对应原setInterval中动画外的间隔时长。

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