React Native中动画停止后无法重新启动该如何解决？

问题原因 #

• 你调用Animated实例的stop()方法终止动画后，该实例的执行上下文会被完全销毁，仅保留动画属性的当前值，同一实例再次调用start()无法恢复循环动画逻辑。
• useMemo依赖项不完整，缺少animSpeed参数，后续animSpeed修改时不会触发动画实例更新。
• useEffect依赖项缺少anim实例，动画实例重新生成时，启停逻辑无法同步作用到新实例。

修复方案 #

方案1：使用pause()/resume()实现临时启停（从暂停位置继续播放）

这是最适配启停需求的方案，无需重构动画创建逻辑，仅需修改启停调用方法：

const anim = useMemo(() => {
    return Animated.loop(
        Animated.sequence([
            Animated.timing(figureScale, { toValue: 2, duration: animSpeed, useNativeDriver: true}),
            Animated.timing(figureScale, { toValue: 1, duration: animSpeed, useNativeDriver: true})
        ])
    )
// 补全所有依赖项
}, [figureScale, animSpeed])

useEffect(()=>{
    if(isPaused) {
      anim.pause()
    } else {
      // 兼容首次启动和暂停后恢复两种场景
      anim.isPlaying ? anim.resume() : anim.start()
    }
// 补全anim依赖
}, [isPaused, anim])

方案2：每次启动从头播放动画

如果需求是每次启动都从头开始执行动画，不保留暂停位置，可以通过重置动画实例实现：

// 新增动画重置标记
const [animResetKey, setAnimResetKey] = useState(0)

// 按钮点击切换逻辑示例
const toggleAnim = () => {
  setIsPaused(prev => {
    // 启动时更新重置标记，强制生成新的动画实例
    if(prev) setAnimResetKey(val => val + 1)
    return !prev
  })
}

const anim = useMemo(() => {
    return Animated.loop(
        Animated.sequence([
            Animated.timing(figureScale, { toValue: 2, duration: animSpeed, useNativeDriver: true}),
            Animated.timing(figureScale, { toValue: 1, duration: animSpeed, useNativeDriver: true})
        ])
    )
// 依赖中加入重置标记
}, [figureScale, animSpeed, animResetKey])

useEffect(()=>{
    if(isPaused) {
      anim.stop()
    } else {
      anim.start()
    }
}, [isPaused, anim])

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