动画系统

相关源文件

• packages/react-native/Libraries/Animated/Animated.js
• packages/react-native/Libraries/Animated/Animated.js.flow
• packages/react-native/Libraries/Animated/AnimatedEvent.js
• packages/react-native/Libraries/Animated/AnimatedExports.js
• packages/react-native/Libraries/Animated/AnimatedExports.js.flow
• packages/react-native/Libraries/Animated/AnimatedImplementation.js
• packages/react-native/Libraries/Animated/components/AnimatedScrollView.js
• packages/react-native/Libraries/Animated/createAnimatedComponent.js
• packages/react-native/Libraries/Animated/useAnimatedValue.js
• packages/react-native/Libraries/Components/ScrollView/ScrollView.d.ts
• packages/react-native/Libraries/Components/ScrollView/ScrollView.js
• packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js
• packages/react-native/Libraries/Components/Switch/Switch.js
• packages/react-native/Libraries/Components/Touchable/TouchableOpacity.d.ts
• packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.d.ts
• packages/react-native/Libraries/Components/View/View.js
• packages/react-native/Libraries/Components/View/ViewPropTypes.d.ts
• packages/react-native/Libraries/Components/View/__tests__/View-test.js
• packages/react-native/Libraries/Lists/SectionList.js
• packages/react-native/Libraries/Types/CoreEventTypes.d.ts
• packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
• packages/react-native/React/Fabric/Mounting/RCTMountingManager.mm
• packages/react-native/React/Fabric/RCTSurfacePresenter.mm
• packages/react-native/ReactAndroid/src/main/jni/react/fabric/Binding.h
• packages/react-native/ReactAndroid/src/main/jni/react/fabric/FabricMountingManager.cpp
• packages/react-native/ReactAndroid/src/main/jni/react/fabric/FabricMountingManager.h
• packages/react-native/ReactAndroid/src/main/jni/react/fabric/JFabricUIManager.cpp
• packages/react-native/ReactAndroid/src/main/jni/react/fabric/JFabricUIManager.h
• packages/react-native/ReactAndroid/src/main/jni/react/fabric/MountItem.cpp
• packages/react-native/ReactAndroid/src/main/jni/react/fabric/MountItem.h
• packages/react-native/ReactCommon/react/renderer/animations/LayoutAnimationDriver.cpp
• packages/react-native/ReactCommon/react/renderer/animations/LayoutAnimationKeyFrameManager.cpp
• packages/react-native/ReactCommon/react/renderer/animations/LayoutAnimationKeyFrameManager.h
• packages/react-native/ReactCommon/react/renderer/animations/primitives.h
• packages/react-native/ReactCommon/react/renderer/animations/utils.h
• packages/react-native/ReactCommon/react/renderer/mounting/ShadowViewMutation.cpp
• packages/react-native/ReactCommon/react/renderer/mounting/ShadowViewMutation.h
• packages/react-native/ReactCommon/react/renderer/mounting/stubs/StubViewTree.cpp
• packages/react-native/ReactCommon/react/renderer/uimanager/UIManagerAnimationDelegate.h
• packages/react-native/src/private/animated/NativeAnimatedHelper.js
• packages/react-native/types/__typetests__/index.tsx

React Native 的动画系统提供了一种灵活高效的方式来在您的应用程序中创建各种动画。本文档解释了 React Native 动画系统的架构、组件和使用模式。

概述

React Native 提供了两个互补的动画系统

1. Animated API：用于创建具有精细控制的精确、交互式动画
2. 布局动画：用于自动动画化视图布局的变化

Animated API 主要用于插值动画，而布局动画则用于在布局发生变化时自动执行动画。

Animated API 架构

Animated API 以输入和输出之间的声明性关系为中心，中间包含可配置的转换，以及简单的启动/停止方法来控制基于时间的动画执行。

核心组件

来源

• packages/react-native/Libraries/Animated/AnimatedImplementation.js
• packages/react-native/Libraries/Animated/AnimatedExports.js
• packages/react-native/Libraries/Animated/createAnimatedComponent.js
• packages/react-native/Libraries/Animated/AnimatedEvent.js

动画值节点

动画系统的核心围绕着 AnimatedValue 节点构建，这些节点代表可以随时间动画化的值。这些值可以是

1. AnimatedValue：一个单一的数值
2. AnimatedValueXY：一个带有 x 和 y 坐标的二维点
3. AnimatedColor：一个带有 r, g, b, a 分量的颜色值

这些值节点可以通过加、减、乘、除等运算组合，创建复杂的动画。

动画类型

来源

• packages/react-native/Libraries/Animated/animations/Animation.js
• packages/react-native/Libraries/Animated/animations/TimingAnimation.js
• packages/react-native/Libraries/Animated/animations/SpringAnimation.js
• packages/react-native/Libraries/Animated/animations/DecayAnimation.js

React Native 提供了三种动画类型

1. Timing：使用缓动函数随时间动画化一个值
2. Spring：创建具有弹跳和张力等物理属性的弹簧动画
3. Decay：模拟渐进减速效果

原生驱动

原生驱动是一项关键的性能优化，它允许动画在原生 UI 线程而不是 JavaScript 线程上运行。这可以防止动画受到 JavaScript 线程阻塞的影响。

要使用原生驱动，您可以在动画配置中设置 useNativeDriver: true。只有某些属性才能通过原生驱动进行动画处理

• transform 属性
• opacity
• backgroundColor（在某些平台上）
• borderBottomColor, borderEndColor, 等。

来源

• packages/react-native/src/private/animated/NativeAnimatedHelper.js
• packages/react-native/Libraries/Animated/NativeAnimatedModule.js
• packages/react-native/Libraries/Animated/NativeAnimatedTurboModule.js

动画组件

React Native 提供了一组使用 createAnimatedComponent 函数构建的预动画组件

来源

• packages/react-native/Libraries/Animated/createAnimatedComponent.js
• packages/react-native/Libraries/Animated/components/AnimatedView.js
• packages/react-native/Libraries/Animated/components/AnimatedText.js
• packages/react-native/Libraries/Animated/components/AnimatedImage.js
• packages/react-native/Libraries/Animated/components/AnimatedScrollView.js

动画组件如何工作

当您使用 createAnimatedComponent 创建动画组件时，它会包装一个标准的 React Native 组件并添加动画化其属性的功能。工作原理如下：

1. createAnimatedComponent 函数返回一个包装了原始组件的新 React 组件
2. 它使用 useAnimatedProps hook 来处理 props 中的动画值
3. 对于原生驱动动画，它会设置特殊处理，允许原生端直接操作视图
4. 它将动画值与静态值合并，并将它们传递给底层组件

来源

• packages/react-native/Libraries/Animated/createAnimatedComponent.js84-149

创建动画

基本动画模式

动画组合

React Native 提供了几种组合动画的方式

1. Sequence：按顺序依次运行动画
2. Parallel：同时运行动画
3. Stagger：以交错的延迟启动动画
4. Loop：循环播放动画
5. Decay：以初始速度开始并逐渐减速停止

插值

插值允许您将输入范围映射到输出范围，并带有可选的缓动函数。

来源

• packages/react-native/Libraries/Animated/nodes/AnimatedInterpolation.js

布局动画

布局动画提供了一种在视图布局更改时自动为其新位置设置动画的方法。此系统独立于 Animated API，通常用于动画化添加、删除或重新排列视图时发生的布局更改。

来源

• packages/react-native/ReactCommon/react/renderer/animations/LayoutAnimationKeyFrameManager.cpp
• packages/react-native/ReactCommon/react/renderer/animations/LayoutAnimationKeyFrameManager.h
• packages/react-native/ReactAndroid/src/main/jni/react/fabric/FabricMountingManager.cpp

布局动画按以下步骤处理

1. 您使用 LayoutAnimation.configureNext() 配置布局动画
2. 当 React Native 在下一次渲染中检测到布局更改时，它会通过 LayoutAnimationKeyFrameManager 处理这些更改
3. LayoutAnimationKeyFrameManager 为动画生成关键帧
4. 原生挂载层（Android 上的 FabricMountingManager，iOS 上的 RCTMountingManager）将这些关键帧应用于视图，以动画化其新位置

动画与挂载管线的集成

动画系统与 React Native 的挂载管线集成，以高效地应用动画

来源

• packages/react-native/ReactAndroid/src/main/jni/react/fabric/FabricMountingManager.cpp
• packages/react-native/React/Fabric/RCTSurfacePresenter.mm
• packages/react-native/React/Fabric/Mounting/RCTMountingManager.mm

当动画运行时

1. 对于 JavaScript 驱动的动画（useNativeDriver: false），JavaScript 线程会在每一帧计算新值并更新组件 props
2. 对于原生驱动的动画（useNativeDriver: true），动画通过原生动画模块完全在 UI 线程上运行
3. 对于布局动画，LayoutAnimationKeyFrameManager 会截获布局更改，并创建在挂载过程中应用的动画关键帧

特殊情况与优化

ScrollView 中的吸顶标题

动画系统对 ScrollView 组件中的吸顶标题进行了特殊处理，使用 AnimatedInterpolation 来计算用户滚动时标题的位置。

来源

• packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js71-105

内存性能优化

React Native 包含多项优化，以使动画更具内存效率

1. 重用动画值
2. 批量处理动画操作
3. 对常用动画属性的特殊处理
4. FlatList 和 ScrollView 等组件的视图回收

来源

• packages/react-native/src/private/animated/NativeAnimatedHelper.js39-67

动画 API 参考

主要导出对象和函数

类型	描述
Animated.Value	用于驱动动画的单个值
Animated.ValueXY	用于驱动 2D 动画（例如平移手势）的 2D 值
Animated.Color	用于动画化颜色属性的专用值
Animated.timing()	使用缓动函数随时间动画化一个值
Animated.spring()	创建弹簧动画
Animated.decay()	以初始速度开始并逐渐减速停止
Animated.sequence()	按顺序运行动画
Animated.parallel()	并行运行动画
Animated.stagger()	以交错的延迟启动动画
Animated.loop()	循环动画
Animated.View, Animated.Text 等	预包装的动画组件
Animated.createAnimatedComponent()	创建新的动画组件

来源

• packages/react-native/Libraries/Animated/AnimatedExports.js.flow14-62
• packages/react-native/Libraries/Animated/AnimatedImplementation.js42-330

常见动画模式

淡入/淡出

滑动进入/滑出

顺序和并行动画

结论

React Native 的动画系统提供了一种灵活高效的方式来创建应用程序中的动画。无论您需要 Animated API 的精确控制，还是 LayoutAnimation 的自动布局动画，React Native 都为您提供了创建流畅且引人入胜的用户体验的工具。

有关手势处理（通常与动画配合使用）的信息，请参阅 手势响应系统。