React Native 中动画是如何工作的？

Question

Accepted Answer

React Native 通过内置的 **Animated** API 和流行的 **Reanimated** 库来支持**动画**。动画通过平滑的运动和过渡增强用户体验。性能（在本地线程上运行动画）是一个关键考虑因素。 ## Animated API（内置） ```jsx import { Animated } from 'react-native'; const fadeAnim = useRef(new Animated.Value(0)).current; // an animated value // animate it (e.g. fade in) Animated.timing(fadeAnim, { toValue: 1, duration: 500, useNativeDriver: true, // run on the NATIVE thread (smooth — important!) }).start(); // apply it to a component ... ``` **Animated** API 使用应用于 `Animated.View` 等的动画值。关键的 `useNativeDriver: true` 在**本地线程**上运行动画（平滑、不被 JS 阻塞）。 ## Reanimated（推荐用于复杂动画） ```text REACT NATIVE REANIMATED → a popular library for performant, complex animations: → runs animations on the native/UI thread (smooth, off the JS thread) → supports gestures (with react-native-gesture-handler), worklets, spring physics → better for complex, interactive, gesture-driven animations than the basic Animated API → The go-to for advanced animations in React Native. ``` ## 为什么性能在这里很重要 ```text ⚠️ Animations driven by the JS thread can be JANKY (the JS thread is busy / blocked) → → useNativeDriver (Animated) or Reanimated run animations on the NATIVE/UI thread → smooth even if JS is busy → Running animations natively (not on the JS thread) is KEY to smooth animations in RN. ``` ## 为什么这很重要理解 React Native 中的动画很有价值，因为**动画通过平滑的运动和过渡增强用户体验**，使应用感觉更加精美，所以这是有用的实用知识——而且性能考虑在 React Native 中特别重要。内置的 **Animated** API（使用应用于 Animated 组件的动画值）为动画提供了基础。关键是，理解性能方面——**由 JavaScript 线程驱动的动画可能会出现卡顿**（如果 JS 线程繁忙）以及在**本地/UI 线程**上运行动画（通过 Animated 中的 `useNativeDriver: true` 或通过 Reanimated）即使 JS 繁忙时也能保持平滑——是 React Native 中高性能动画的关键见解，考虑到 React Native 的 JS/本地线程模型，这是一个显著的考虑因素。理解 **Reanimated**（用于高性能、复杂、手势驱动的动画的流行库，在本地线程上运行，支持 worklets、弹簧物理和手势）很有价值，因为它是 React Native 中**高级动画的首选**，比基础 Animated API 更适合复杂的交互动画。同时理解两者——用于简单动画的内置 Animated API（带有 useNativeDriver）和用于复杂动画的 Reanimated，两者都强调在本地运行动画以实现平滑——涵盖了动画工具包。精美的动画显著改进了用户体验，而让它们保持平滑（通过在本地线程上运行）是 React Native 的架构所呈现的关键挑战。由于平滑的动画增强了用户体验，而 React Native 中的动画性能在很大程度上取决于在本地线程上运行动画（通过 useNativeDriver 或 Reanimated），而且理解 Animated API、Reanimated，尤其是本地线程性能考虑使得构建平滑动画成为可能，理解 React Native 中的动画是有价值的、实际相关的知识——对于通过运动增强用户体验很有用，其中在本地运行动画的 React Native 特定关注点对平滑性特别重要，是构建精美 React Native 应用的宝贵技能。