React Native Reanimated 动画中断后如何正确恢复

在 React Native 开发中，使用 Reanimated 库创建流畅动画是常见需求。本文将深入探讨一个典型问题：当动画被中断后如何正确恢复运行，特别是进度条动画场景下的解决方案。

问题背景

开发者在实现一个进度条动画时遇到了一个典型问题：当手动更新动画的进度值后，期望动画能够从新值继续运行，但实际上动画却停止了。这种情况常见于需要支持暂停/恢复功能的进度指示器或视频播放进度条等场景。

核心问题分析

问题的根源在于对 Reanimated 动画机制的理解不足。在 Reanimated 中：

1. useSharedValue 用于创建可动画的共享值
2. withTiming 用于创建时间驱动的动画
3. withPause (来自 react-native-redash) 用于实现暂停功能

关键点在于：直接使用 .set() 方法更新共享值会覆盖当前正在运行的动画，导致动画完全停止。

解决方案

正确的做法是分两步操作：

1. 首先使用 .set() 立即更新到目标值
2. 然后重新创建并启动新的动画

const setNewValue = () => {
  paused.value = false; // 确保不在暂停状态
  
  // 第一步：立即设置新值
  progress.set(20);
  
  // 第二步：创建新动画
  progress.value = withPause(
    withTiming(100, { duration: 5000, easing: Easing.linear }),
    paused
  );
};

进阶优化：保持动画速度一致

当从中间值恢复动画时，简单的固定持续时间会导致动画速度变化。为了保持一致的视觉速度，我们需要动态计算剩余时间：

const BASE_DURATION = 5000; // 完整动画的总时间
const MIN = 0;
const MAX = 100;

const calculateRemainingTime = (current) => {
  const remaining = 1 - current / (MAX - MIN);
  return remaining * BASE_DURATION;
};

// 使用时
const newValue = 75;
const newDuration = calculateRemainingTime(newValue);

progress.set(newValue);
progress.value = withPause(
  withTiming(MAX, { duration: newDuration, easing: Easing.linear }),
  paused
);

最佳实践建议

1. 状态管理：清晰区分"暂停状态"和"动画实例"
2. 动画生命周期：每次中断后都需要显式创建新动画
3. 性能考虑：避免在频繁触发的回调中创建动画
4. 用户体验：保持动画速度一致，避免跳跃感

总结

在 React Native Reanimated 中处理可中断动画时，开发者需要明确动画创建和更新的时机。通过本文介绍的两步法（先设置值再创建动画）和动态时间计算，可以实现流畅的进度控制体验。理解这些核心概念后，可以扩展到更复杂的动画场景中。