Reanimated 2中共享值连续赋值时首个赋值被跳过如何解决？

问题原因 #

Reanimated 对同一事件循环内的 shared value 赋值做了批量优化，同一帧下连续对同一个 shared value 赋值只会生效最后一次，你写的两次赋值中，第一次将elevation设为500的操作会被直接丢弃，仅剩从初始值0到目标值0的动画逻辑，因此看不到任何位移效果。

解决方案 #

方案1：使用withSequence组合动画（官方推荐） #

withSequence 是Reanimated提供的序列动画API，会按顺序执行传入的所有动画配置。你可以用duration为0的withTiming实现瞬间跳转到500的效果，再衔接回落动画，完全符合Reanimated的运行逻辑，不会出现丢帧或时序问题：

const handleClick = () => {
  elevation.value = withSequence(
    withTiming(500, { duration: 0 }), // 0耗时立即定位到500位置
    withTiming(0, { duration: 1000 })
  )
}

方案2：拆分赋值到不同渲染帧 #

如果需要分开控制两次赋值的逻辑，也可以将回落动画的赋值放到下一渲染帧执行，避开批量优化的合并逻辑：

const handleClick = () => {
  elevation.value = 500;
  requestAnimationFrame(() => {
    elevation.value = withTiming(0, { duration: 1000 });
  })
}

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