React 与 React Native 动画库深度技术对比

在现代前端开发中，动画不仅是视觉点缀，更是提升用户体验的关键手段。然而，面对 framer-motion、lottie-react-native、react-native-animatable、react-native-reanimated、react-spring 和 react-transition-group 这些主流动画库，开发者常陷入“选哪个”的困境。本文从真实工程视角出发，深入剖析它们的核心机制、适用边界与性能特征，助你做出精准技术决策。

🧩 核心定位与平台支持

首先明确一点：这些库并非完全可互换。它们分为 Web 专用、React Native 专用 和 跨平台 三类。

• Web 专用：framer-motion、react-spring（默认配置）、react-transition-group
• React Native 专用：lottie-react-native、react-native-animatable、react-native-reanimated
• 跨平台：react-spring（通过 @react-spring/native 支持 RN）

⚠️ 注意：react-native-animatable 自 2019 年起已无实质性更新，官方仓库标记为“不再积极维护”，强烈不建议在新项目中使用。

🖥️ Web 端动画：声明式 vs 物理模型 vs 状态过渡

基础进入/离开动画：react-transition-group

如果你只需要在组件挂载/卸载时添加简单过渡（如淡入淡出），react-transition-group 是最轻量的选择。它不处理复杂动画逻辑，而是帮你管理 CSS 类名切换。

// react-transition-group
import { CSSTransition } from 'react-transition-group';

function Fade({ in: inProp }) {
  return (
    <CSSTransition in={inProp} timeout={300} classNames="fade">
      <div>Hello</div>
    </CSSTransition>
  );
}

/* 对应 CSS */
.fade-enter { opacity: 0; }
.fade-enter-active { opacity: 1; transition: opacity 300ms; }

声明式高阶动画：framer-motion

framer-motion 以极简 API 实现复杂交互动画，尤其擅长布局动画和手势集成。

// framer-motion
import { motion } from 'framer-motion';

<motion.div
  animate={{ x: 100, rotate: 360 }}
  transition={{ type: 'spring', stiffness: 300 }}
/>

// 布局动画示例
<motion.div layout>
  {isOpen && <motion.div layoutId="panel">Content</motion.div>}
</motion.div>

物理驱动动画：react-spring

react-spring 基于弹簧物理模型，适合需要自然弹性效果的场景（如拖拽回弹、数据可视化）。

// react-spring
import { useSpring, animated } from 'react-spring';

function SpringBox() {
  const props = useSpring({ x: 100, rotate: 360 });
  return <animated.div style={props} />;
}

// 手势集成
const [{ x, y }, api] = useSpring(() => ({ x: 0, y: 0 }));
const bind = useDrag(({ offset: [x, y] }) => api.start({ x, y }));
return <animated.div {...bind()} style={{ x, y }} />;

📱 React Native 动画：性能是核心分水岭

高性能原生动画：react-native-reanimated

react-native-reanimated 的核心优势在于将动画逻辑移至 UI 线程执行，彻底规避 JavaScript 线程卡顿。其 API 分为 v1（回调式）和 v2（工作lets），v2 更推荐。

// react-native-reanimated (v2)
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';

function ReanimatedBox() {
  const offset = useSharedValue(0);
  const animatedStyle = useAnimatedStyle(() => {
    return { transform: [{ translateX: offset.value }] };
  });

  const onPress = () => {
    offset.value = withSpring(100);
  };

  return <Animated.View style={animated_style} onTouchEnd={onPress} />;
}

Lottie 动画播放器：lottie-react-native

该库仅用于渲染设计师导出的 Lottie JSON 文件，不提供程序化动画能力。

// lottie-react-native
import LottieView from 'lottie-react-native';

<LottieView
  source={require('./animation.json')}
  autoPlay
  loop
/>

已过时的简易方案：react-native-animatable

所有动画在 JS 线程运行，性能较差，仅作历史参考。

// react-native-animatable (不推荐)
import Animatable from 'react-native-animatable';

<Animatable.View animation="fadeIn" duration={500} />

⚡ 性能与线程模型对比

🛠️ 何时选择哪个库？实战场景分析

场景 1：Web 应用中的路由切换动画

• 需求：页面切换时平滑过渡，支持共享元素（如图片放大）
• 推荐：framer-motion
• 原因：内置 AnimatePresence 和 layoutId 完美解决此问题

// framer-motion 路由动画
import { AnimatePresence, motion } from 'framer-motion';

<AnimatePresence mode="wait">
  <motion.div
    key={location.pathname}
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
  >
    {children}
  </motion.div>
</AnimatePresence>

场景 2：React Native 中的可拖拽抽屉

• 需求：用户可拖拽面板，松手后自动吸附到最近位置
• 推荐：react-native-reanimated + react-native-gesture-handler
• 原因：必须 UI 线程执行以保证 60fps 流畅度

// reanimated 拖拽示例（简化）
const dragX = useSharedValue(0);
const gestureHandler = useAnimatedGestureHandler({
  onActive: (event) => { dragX.value = event.translationX; },
  onEnd: () => { dragX.value = withSpring(0); }
});
const style = useAnimatedStyle(() => ({ transform: [{ translateX: dragX.value }] }));

return <PanGestureHandler onGestureEvent={gestureHandler}>
  <Animated.View style={style} />
</PanGestureHandler>;

场景 3：跨平台的数据仪表盘

• 需求：数字变化带动画（如 0 → 1000），需在 Web 和 RN 一致表现
• 推荐：react-spring
• 原因：@react-spring/web 和 @react-spring/native 提供统一 API

// react-spring 跨平台数字动画
import { useSpring, animated } from '@react-spring/web'; // Web
// import { useSpring, animated } from '@react-spring/native'; // RN

function NumberDisplay({ value }) {
  const { number } = useSpring({ number: value });
  return <animated.text>{number.to(n => n.toFixed(0))}</animated.text>;
}

场景 4：App 启动 Logo 动画

• 需求：播放设计师提供的品牌 Logo 动效
• 推荐：lottie-react-native（RN）或 lottie-web（Web）
• 原因：Lottie 是行业标准矢量动画格式，无需编码

📌 关键结论

• Web 项目：

  • 简单过渡 → react-transition-group
  • 交互动画/布局动画 → framer-motion
  • 物理模拟/跨平台 → react-spring

• React Native 项目：

  • 高性能交互动画 → react-native-reanimated
  • 播放 Lottie 动画 → lottie-react-native
  • 避免使用 react-native-animatable

• 通用原则：

  • 优先选择 原生线程执行 的方案（如 Reanimated）
  • 复杂动画尽量 避免在 JS 线程运行
  • 设计师交付的动效优先考虑 Lottie 格式

最终，没有“最好”的库，只有“最合适”的工具。理解每个库的底层机制和设计哲学，才能在正确的时间选用正确的武器。