React Native Reanimated中withSequence()序列动画异常求助

核心问题分析 #

1. 动画被意外重置：你在动画结束回调中调用setCurrentIndex，这会触发组件重渲染，导致useAnimatedStyle重新执行，动画直接从头开始，打断了原本的循环序列，这是序列乱序的主要原因。
2. 序列逻辑可能不符合预期：当前代码中withRepeat包裹了整个包含4000ms延迟和上移的序列，意味着每次循环都会重复“下移→回位→等待4000ms→上移”的完整流程，如果你预期的是循环“下移→回位”后再执行一次上移，这个逻辑就有偏差。

修复方案 #

1. 解决动画重置问题

使用useSharedValue替代useState管理索引，避免触发组件重渲染打断动画：

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

// 用sharedValue管理索引，更新时不会触发组件重渲染
const currentIndex = useSharedValue(0);
// 可选：如果需要在JS线程使用索引值，同步到useState
const [currentIndexJS, setCurrentIndexJS] = useState(0);

const animatedStyle = useAnimatedStyle(() => {
  return {
    transform: [
      {
        translateY: withRepeat(
          withSequence(
            withTiming(50, { duration: 200 }),
            withTiming(0, { duration: 200 }),
            withDelay(
              4000,
              withTiming(-50, { duration: 700 }, (finished) => {
                if (finished) {
                  // 直接更新sharedValue，无重渲染触发
                  currentIndex.value += 1;
                }
              })
            )
          ),
          -1, // 无限循环
          false // 不反向执行动画
        )
      }
    ]
  };
});

// 可选：监听sharedValue变化，同步到JS线程的状态
useAnimatedReaction(
  () => currentIndex.value,
  (newValue) => {
    setCurrentIndexJS(newValue);
  }
);

2. 调整序列逻辑（按需选择）

如果你的需求是先循环“下移→回位”N次，再执行上移并更新索引，可以拆分动画序列：

const animatedStyle = useAnimatedStyle(() => {
  return {
    transform: [
      {
        translateY: withSequence(
          // 循环10次下移→回位的动画
          withRepeat(
            withSequence(
              withTiming(50, { duration: 200 }),
              withTiming(0, { duration: 200 })
            ),
            10, // 指定循环次数，替换为你的需求值
            false
          ),
          // 等待4000ms后执行上移
          withDelay(
            4000,
            withTiming(-50, { duration: 700 }, (finished) => {
              if (finished) {
                currentIndex.value += 1;
              }
            })
          )
        )
      }
    ]
  };
});

内容的提问来源于stack exchange，提问作者Satya Prakash Satyam