React 动画库深度技术对比：从 Web 到 React Native 的正确选择

在 React 生态中实现流畅动画看似简单，实则涉及渲染线程、声明式抽象、平台差异等深层工程问题。本文将深入剖析六个主流动画库的技术本质、适用边界和真实代码表现，帮助你在架构层面做出精准决策。

⚠️ 首要原则：平台决定技术栈

Web 项目应排除 react-native-animatable 和 react-native-reanimated —— 它们仅适用于 React Native。同理，React Native 项目无法直接使用 framer-motion（除非通过社区桥接方案，但非官方支持）。react-spring 和 react-transition-group 则同时支持 Web 与 React Native。

此外，react-motion 已被官方标记为废弃（GitHub 仓库归档，README 明确建议迁移到 react-spring），新项目绝不应采用。

🧪 核心能力对比：声明式 vs 命令式 vs 状态驱动

场景 1：实现一个简单的淡入淡出动画

这是最常见的 UI 动画需求。各库如何应对？

framer-motion（Web）

import { motion, AnimatePresence } from 'framer-motion';

function FadeComponent({ isVisible }) {
  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.3 }}
        />
      )}
    </AnimatePresence>
  );
}

react-spring（Web / React Native）

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

function FadeComponent({ isVisible }) {
  const props = useSpring({
    opacity: isVisible ? 1 : 0,
    config: { duration: 300 }
  });
  
  return <animated.div style={props} />;
}

react-transition-group（Web / React Native）

import { Transition } from 'react-transition-group';

function FadeComponent({ isVisible }) {
  return (
    <Transition in={isVisible} timeout={300}>
      {(state) => (
        <div style={{
          opacity: state === 'entered' ? 1 : 0,
          transition: 'opacity 300ms'
        }} />
      )}
    </Transition>
  );
}

react-native-animatable（React Native）

import Animatable from 'react-native-animatable';

function FadeComponent({ isVisible }) {
  return (
    <Animatable.View
      animation={isVisible ? 'fadeIn' : 'fadeOut'}
      duration={300}
    />
  );
}

💡 关键区别：framer-motion 和 react-spring 自身驱动动画；react-transition-group 仅管理状态，依赖 CSS 实现视觉变化；react-native-animatable 提供预设命名动画。

场景 2：实现手势驱动的拖拽交互（如抽屉菜单）

这类高性能交互动画对帧率和响应性要求极高。

framer-motion（Web）

<motion.div
  drag="x"
  dragConstraints={{ left: -100, right: 0 }}
  style={{ x: 0 }}
/>

react-spring（Web / React Native）

import { useDrag } from 'react-use-gesture'; // 需额外依赖

const [{ x }, api] = useSpring(() => ({ x: 0 }));
const bind = useDrag(({ offset: [x] }) => {
  api.start({ x: Math.min(0, Math.max(-100, x)) });
});

return <animated.div {...bind()} style={{ x }} />;

react-native-reanimated（React Native）

import { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';

function Draggable() {
  const translateX = useSharedValue(0);
  
  const gesture = Gesture.Pan()
    .onChange((event) => {
      translateX.value = Math.min(0, Math.max(-100, event.translationX));
    })
    .onEnd(() => {
      translateX.value = withSpring(0);
    });
  
  const style = useAnimatedStyle(() => ({
    transform: [{ translateX: translateX.value }]
  }));
  
  return <GestureDetector gesture={gesture}>
    <Animated.View style={style} />
  </GestureDetector>;
}

💡 关键区别：framer-motion 内置手势支持；react-spring 需配合 react-use-gesture；react-native-reanimated 必须与 react-native-gesture-handler 联用，并通过 useSharedValue 在 JS 与原生线程间共享数据。

⚙️ 底层机制：谁在驱动动画？

• framer-motion：Web 端使用 requestAnimationFrame + CSS transforms，关键动画属性（如 x, y, scale）直接作用于合成层，避免重排重绘。
• react-spring：基于弹簧物理模型，通过 rafz（requestAnimationFrame 封装）驱动值更新，支持自定义插值器。
• react-transition-group：零动画逻辑，仅触发 enter/exit 等状态变更，动画完全由外部 CSS 或样式系统实现。
• react-native-animatable：通过 Animated API（JavaScript 线程）驱动，复杂动画易掉帧。
• react-native-reanimated：动画逻辑编译为原生代码，在 UI 线程执行，彻底绕过 JavaScript 线程瓶颈。

📱 React Native 专项对比：何时用 Animatable vs Reanimated？

🌐 跨平台一致性考量

若需同时支持 Web 和 React Native：

• react-spring 是唯一提供近乎一致 API 的方案（Web 用 animated.div，RN 用 animated.View）。
• 其他库均存在平台割裂：framer-motion 无 RN 支持；RN 专属库无法用于 Web。

🛠️ 架构建议：组合优于单打独斗

• Web 项目：framer-motion + react-transition-group 组合。前者处理复杂交互动画，后者管理路由/列表过渡状态。
• React Native 项目：简单动画用 react-native-animatable，复杂交互必须上 react-native-reanimated + react-native-gesture-handler。
• 跨平台项目：react-spring 作为统一动画层，但需接受其较重的运行时和学习成本。

📌 总结：按场景精准匹配

最终，没有“最好”的动画库，只有“最合适”当前平台、性能需求和团队能力的工具。理解每个库的底层约束和设计哲学，才能避免在错误的场景中强行使用，导致性能瓶颈或维护噩梦。