React Native Animated与Reanimated性能对比：哪个更高效？

你遇到的问题确实是Animated的固有局限：它的原生驱动仅支持不触发布局重排的属性（比如opacity、transform），像height这类会改变布局的属性，只能在JS线程执行（也就是设置useNativeDriver: false），这种情况下一旦JS线程有其他任务（比如网络请求、组件渲染），动画很容易卡顿。

下面从核心维度对比两者的性能表现：

1. 线程执行逻辑 #

• Animated：
  • 原生驱动模式下，动画在UI线程执行，但支持的属性范围窄；
  • 非原生驱动模式下，动画逻辑完全在JS线程运行，JS线程的任何阻塞都会直接导致动画掉帧。
• Reanimated：
  • 所有动画逻辑会被编译为原生代码，全程在UI线程执行，完全不占用JS线程资源。不管是height这类布局属性，还是常规的视觉属性，都能在原生层完成计算，从根源上避免了JS线程阻塞带来的卡顿。

2. 复杂动画与手势联动 #

• Animated：做多属性组合动画、手势联动动画时，JS线程和UI线程的通信开销会显著增加，动画延迟、卡顿的概率大幅上升，尤其是在中低端设备上表现更差。
• Reanimated：支持原生级别的手势处理、复杂动画组合（比如弹簧动画、关键帧动画），所有计算都在UI线程完成，即便是复杂场景下，流畅度也远高于Animated。

3. 布局类动画的表现 #

• Animated：处理height、width这类布局属性动画时，只能依赖JS线程计算布局变化，性能损耗大，且实现步骤繁琐。
• Reanimated：可以通过原生布局动画钩子或自定义逻辑，高效处理布局属性的动态变化，动画流畅度和原生应用一致。

总结建议 #

如果你需要频繁操作height这类布局属性，或者涉及复杂动画、手势联动场景，Reanimated的性能是全方位优于Animated的，完全值得替换。如果只是做简单的opacity、位移动画，Animated的原生驱动模式也能满足需求，但从长期维护和扩展性来看，Reanimated是更优的选择。

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