动画
动画对于创造出色的用户体验至关重要。静止的物体在开始移动时必须克服惯性。运动中的物体具有动量，很少会立即停止。动画可以让你在界面中传达物理上可信的运动。
React Native 提供了两种互补的动画系统：Animated 用于对特定值进行精细的交互式控制，以及 LayoutAnimation 用于动画化全局布局事务。
Animated API
Animated API 旨在以高性能的方式简洁地表达各种有趣的动画和交互模式。Animated 专注于输入和输出之间的声明性关系，中间有可配置的转换，并有 start/stop 方法来控制基于时间的动画执行。
Animated 导出了六种可动画化的组件类型：View、Text、Image、ScrollView、FlatList 和 SectionList，但你也可以使用 Animated.createAnimatedComponent() 创建自己的组件。
例如，一个在挂载时淡入的容器视图可能看起来像这样
- TypeScript
- JavaScript
让我们分解一下这里发生了什么。在 FadeInView 渲染方法中，一个新的 Animated.Value 叫做 fadeAnim 使用 useRef 初始化。View 上的 opacity 属性被映射到这个动画值。在幕后，数值被提取并用于设置 opacity。
当组件挂载时，opacity 被设置为 0。然后，在 fadeAnim 动画值上启动一个缓动动画，该动画将在值动画到最终值 1 的过程中，在每一帧更新其所有依赖的映射（在本例中，只有 opacity）。
这是以一种优化的方式完成的，比调用 setState 并重新渲染更快。由于整个配置是声明性的，我们将能够实现进一步的优化，将配置序列化并在高优先级线程上运行动画。
配置动画
动画是高度可配置的。自定义和预定义的缓动函数、延迟、持续时间、衰减因子、弹簧常数等等都可以根据动画类型进行调整。
Animated 提供了几种动画类型，最常用的是 Animated.timing()。它支持使用各种预定义的缓动函数之一或使用你自己的函数来随着时间动画化一个值。缓动函数通常用于动画中，以传达物体的逐渐加速和减速。
默认情况下，timing 将使用一个 easeInOut 曲线，它传达了从逐渐加速到全速，并以逐渐减速到停止结束。你可以通过传递 easing 参数来指定不同的缓动函数。还支持自定义 duration 甚至动画开始前的 delay。
例如，如果我们想创建一个对象在移动到最终位置之前稍微后退一下的 2 秒动画
Animated.timing(this.state.xPosition, {
toValue: 100,
easing: Easing.back(),
duration: 2000,
useNativeDriver: true,
}).start();
请查看 Animated API 参考的配置动画部分，以了解内置动画支持的所有配置参数。
组合动画
动画可以组合并按顺序或并行播放。顺序动画可以在上一个动画完成后立即播放，或者它们可以在指定的延迟后开始。Animated API 提供了几种方法，例如 sequence() 和 delay()，每种方法都接受一个要执行的动画数组，并根据需要自动调用 start()/stop()。
例如，以下动画先滑行停止，然后一边旋转一边弹回
Animated.sequence([
// decay, then spring to start and twirl
Animated.decay(position, {
// coast to a stop
velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
deceleration: 0.997,
useNativeDriver: true,
}),
Animated.parallel([
// after decay, in parallel:
Animated.spring(position, {
toValue: {x: 0, y: 0}, // return to start
useNativeDriver: true,
}),
Animated.timing(twirl, {
// and twirl
toValue: 360,
useNativeDriver: true,
}),
]),
]).start(); // start the sequence group
如果一个动画停止或中断，那么组中的所有其他动画也会停止。Animated.parallel 有一个 stopTogether 选项，可以设置为 false 以禁用此功能。
你可以在 Animated API 参考的组合动画部分找到完整的组合方法列表。
组合动画值
你可以通过加法、乘法、除法或模数来组合两个动画值，以创建一个新的动画值。
在某些情况下，动画值需要反转另一个动画值进行计算。一个例子是反转比例（2x --> 0.5x）
const a = new Animated.Value(1);
const b = Animated.divide(1, a);
Animated.spring(a, {
toValue: 2,
useNativeDriver: true,
}).start();
插值
每个属性都可以首先通过插值运行。插值将输入范围映射到输出范围，通常使用线性插值，但也支持缓动函数。默认情况下，它将超出给定范围外推曲线，但你也可以让它限制输出值。
一个将 0-1 范围转换为 0-100 范围的基本映射将是
value.interpolate({
inputRange: [0, 1],
outputRange: [0, 100],
});
例如，你可能希望将 Animated.Value 视为从 0 到 1，但将位置从 150px 动画到 0px，将不透明度从 0 动画到 1。这可以通过修改上面示例中的 style 来完成，如下所示
style={{
opacity: this.state.fadeAnim, // Binds directly
transform: [{
translateY: this.state.fadeAnim.interpolate({
inputRange: [0, 1],
outputRange: [150, 0] // 0 : 150, 0.5 : 75, 1 : 0
}),
}],
}}
interpolate() 也支持多个范围段，这对于定义死区和其他实用技巧非常方便。例如，要获得一个在 -300 处为负关系，在 -100 处变为 0，然后到 0 处上升到 1，然后到 100 处下降到零，之后是一个死区，对所有超出此范围的值都保持 0，你可以这样做
value.interpolate({
inputRange: [-300, -100, 0, 100, 101],
outputRange: [300, 0, 1, 0, 0],
});
它将这样映射
Input | Output
------|-------
-400| 450
-300| 300
-200| 150
-100| 0
-50| 0.5
0| 1
50| 0.5
100| 0
101| 0
200| 0
interpolate() 还支持映射到字符串，允许你动画颜色以及带单位的值。例如，如果你想动画旋转，你可以这样做
value.interpolate({
inputRange: [0, 360],
outputRange: ['0deg', '360deg'],
});
interpolate() 还支持任意缓动函数，其中许多已经在 Easing 模块中实现。interpolate() 还具有可配置的 outputRange 外推行为。你可以通过设置 extrapolate、extrapolateLeft 或 extrapolateRight 选项来设置外推。默认值为 extend，但你可以使用 clamp 来防止输出值超出 outputRange。
跟踪动态值
动画值还可以通过将动画的 toValue 设置为另一个动画值而不是普通数字来跟踪其他值。例如，像 Messenger 在 Android 上使用的“聊天头像”动画可以通过一个固定在另一个动画值上的 spring() 来实现，或者通过 timing() 和 duration 为 0 来实现刚性跟踪。它们还可以与插值组合
Animated.spring(follower, {toValue: leader}).start();
Animated.timing(opacity, {
toValue: pan.x.interpolate({
inputRange: [0, 300],
outputRange: [1, 0],
}),
useNativeDriver: true,
}).start();
leader 和 follower 动画值将使用 Animated.ValueXY() 实现。ValueXY 是处理 2D 交互（例如平移或拖动）的便捷方法。它是一个基本的包装器，包含两个 Animated.Value 实例和一些调用它们的辅助函数，使 ValueXY 在许多情况下可以替代 Value。它允许我们在上面的示例中跟踪 x 和 y 值。
跟踪手势
手势，如平移或滚动，以及其他事件可以使用 Animated.event 直接映射到动画值。这是通过结构化映射语法完成的，以便可以从复杂的事件对象中提取值。第一层是一个数组，允许跨多个参数进行映射，并且该数组包含嵌套对象。
例如，在处理水平滚动手势时，你需要执行以下操作才能将 event.nativeEvent.contentOffset.x 映射到 scrollX（一个 Animated.Value）
onScroll={Animated.event(
// scrollX = e.nativeEvent.contentOffset.x
[{nativeEvent: {
contentOffset: {
x: scrollX
}
}
}]
)}
以下示例实现了一个水平滚动的轮播，其中滚动位置指示器使用 ScrollView 中使用的 Animated.event 进行动画
带 Animated 事件的 ScrollView 示例
使用 PanResponder 时，你可以使用以下代码从 gestureState.dx 和 gestureState.dy 中提取 x 和 y 位置。我们在数组的第一个位置使用 null，因为我们只对传递给 PanResponder 处理程序的第二个参数 gestureState 感兴趣。
onPanResponderMove={Animated.event(
[null, // ignore the native event
// extract dx and dy from gestureState
// like 'pan.x = gestureState.dx, pan.y = gestureState.dy'
{dx: pan.x, dy: pan.y}
])}
带 Animated 事件的 PanResponder 示例
响应当前动画值
你可能会注意到，在动画过程中没有明确的方法来读取当前值。这是因为由于优化，该值可能只在原生运行时中已知。如果你需要响应当前值运行 JavaScript，有两种方法
spring.stopAnimation(callback)将停止动画并使用最终值调用callback。这在进行手势转换时很有用。spring.addListener(callback)将在动画运行时异步调用callback，提供一个最近的值。这对于触发状态变化很有用，例如当用户将摆动器拖得更近时将其吸附到新选项，因为与需要以 60 fps 运行的连续手势（如平移）相比，这些较大的状态变化对几帧的延迟不那么敏感。
Animated 的设计是完全可序列化的，因此动画可以以高性能的方式运行，独立于正常的 JavaScript 事件循环。这确实影响了 API，因此在做一些事情时，如果感觉比完全同步的系统更棘手，请记住这一点。查看 Animated.Value.addListener 作为解决其中一些限制的方法，但要谨慎使用，因为它将来可能会对性能产生影响。
使用原生驱动
Animated API 的设计是可序列化的。通过使用原生驱动，我们在开始动画之前将有关动画的一切都发送到原生端，允许原生代码在 UI 线程上执行动画，而无需在每一帧都通过桥接。一旦动画开始，JS 线程可以被阻塞而不会影响动画。
通过在启动动画时在动画配置中设置 useNativeDriver: true，可以为普通动画使用原生驱动。由于历史原因，没有 useNativeDriver 属性的动画将默认为 false，但会发出警告（在 TypeScript 中为类型检查错误）。
Animated.timing(this.state.animatedValue, {
toValue: 1,
duration: 500,
useNativeDriver: true, // <-- Set this to true
}).start();
动画值只与一个驱动程序兼容，因此如果您在某个值上启动动画时使用原生驱动程序，请确保该值上的每个动画也使用原生驱动程序。
原生驱动也适用于 Animated.event。这对于跟踪滚动位置的动画特别有用，因为如果没有原生驱动，由于 React Native 的异步性质，动画总是会比手势慢一帧。
<Animated.ScrollView // <-- Use the Animated ScrollView wrapper
onScroll={Animated.event(
[
{
nativeEvent: {
contentOffset: {y: this.state.animatedValue},
},
},
],
{useNativeDriver: true}, // <-- Set this to true
)}>
{content}
</Animated.ScrollView>
你可以通过运行 RNTester 应用程序，然后加载 Native Animated Example 来查看原生驱动的实际运行情况。你还可以查看源代码以了解这些示例是如何制作的。
注意事项
并非所有你可以用 Animated 完成的事情目前都受原生驱动支持。主要的限制是你只能动画非布局属性：像 transform 和 opacity 这样的属性会起作用，但 Flexbox 和 position 属性则不会。使用 Animated.event 时，它只适用于直接事件，而不适用于冒泡事件。这意味着它不适用于 PanResponder，但适用于 ScrollView#onScroll 等。
当动画运行时，它可能会阻止 VirtualizedList 组件渲染更多行。如果你需要在用户滚动列表时运行长时间或循环动画，可以在动画配置中使用 isInteraction: false 来防止此问题。
请注意
在使用 rotateY、rotateX 等变换样式时，请确保变换样式 perspective 已就位。目前，某些动画在 Android 上可能没有它就无法渲染。示例如下。
<Animated.View
style={{
transform: [
{scale: this.state.scale},
{rotateY: this.state.rotateY},
{perspective: 1000}, // without this line this Animation will not render on Android while working fine on iOS
],
}}
/>
其他示例
RNTester 应用程序中包含各种 Animated 使用示例
LayoutAnimation API
LayoutAnimation 允许你全局配置 create 和 update 动画，这些动画将用于下一个渲染/布局周期中的所有视图。这对于进行 Flexbox 布局更新而无需费心测量或计算特定属性以直接动画它们非常有用，并且当布局更改可能影响祖先时尤其有用，例如“查看更多”展开也会增加父级的大小并向下推下面的行，否则需要组件之间进行明确协调才能同步动画它们。
请注意，尽管 LayoutAnimation 功能非常强大且非常有用，但它提供的控制远少于 Animated 和其他动画库，因此如果你无法让 LayoutAnimation 实现你想要的效果，可能需要使用其他方法。
请注意，为了在 Android 上实现此功能，你需要通过 UIManager 设置以下标志
UIManager.setLayoutAnimationEnabledExperimental(true);
此示例使用预设值，你可以根据需要自定义动画，有关更多信息，请参阅 LayoutAnimation.js。
附加说明
requestAnimationFrame
requestAnimationFrame 是你可能熟悉的浏览器 polyfill。它接受一个函数作为其唯一参数，并在下一次重绘之前调用该函数。它是动画的基本构建块，支撑着所有基于 JavaScript 的动画 API。通常，你不需要自己调用它——动画 API 会为你管理帧更新。
setNativeProps
如直接操作部分所述，setNativeProps 允许我们直接修改由原生支持的组件（实际由原生视图支持的组件，不像复合组件）的属性，而无需 setState 并重新渲染组件层次结构。
我们可以在 Rebound 示例中使用它来更新比例——如果我们要更新的组件嵌套很深并且没有通过 shouldComponentUpdate 进行优化，这可能会有所帮助。
如果你发现动画出现掉帧（每秒低于 60 帧），请考虑使用 setNativeProps 或 shouldComponentUpdate 来优化它们。或者，你可以使用 useNativeDriver 选项在 UI 线程而不是 JavaScript 线程上运行动画。你可能还希望使用 InteractionManager 将任何计算密集型工作推迟到动画完成后。你可以通过使用应用内开发菜单“FPS Monitor”工具来监控帧率。