动画
动画对于创建出色的用户体验至关重要。静止的物体在开始移动时必须克服惯性。运动中的物体具有动量,很少立即停止。动画使你能够在界面中传达物理上可信的运动。
React Native 提供了两个互补的动画系统:Animated
用于对特定值进行精细和交互式控制,LayoutAnimation
用于动画全局布局事务。
Animated
API
Animated
API 旨在简洁地表达各种有趣的动画和交互模式,并具有非常高的性能。Animated
专注于输入和输出之间的声明性关系,中间具有可配置的转换,以及用于控制基于时间的动画执行的 start
/stop
方法。
Animated
导出六种可动画组件类型:View
、Text
、Image
、ScrollView
、FlatList
和 SectionList
,但你也可以使用 Animated.createAnimatedComponent()
创建自己的组件。
例如,一个容器视图在挂载时淡入,可能如下所示
- TypeScript
- JavaScript
让我们分解一下这里发生了什么。在 FadeInView
的 render 方法中,一个新的 Animated.Value
叫做 fadeAnim
使用 useRef
初始化。View
上的 opacity 属性映射到这个动画值。在幕后,数值被提取并用于设置 opacity。
当组件挂载时,opacity 被设置为 0。然后,在 fadeAnim
动画值上启动一个缓动动画,它将在每个帧上更新其所有依赖映射(在本例中,只有 opacity),因为该值动画到最终值 1。
这是以一种优化的方式完成的,比调用 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,并将 opacity 从 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
设置为另一个动画值而不是纯数字来跟踪其他值。例如,像 Android 版 Messenger 使用的“聊天头像”动画可以使用 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
进行动画处理
带有动画事件示例的 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}
])}
带有动画事件示例的 PanResponder
响应当前的动画值
你可能会注意到,在动画播放时没有明确的方法来读取当前值。这是因为该值可能只在原生运行时中已知,这是由于优化。如果你需要在 JavaScript 中响应当前值运行,则有两种方法
spring.stopAnimation(callback)
将停止动画并使用最终值调用callback
。这在进行手势过渡时很有用。spring.addListener(callback)
将在动画运行时异步调用callback
,提供最近的值。这对于触发状态更改非常有用,例如,当用户将 bobble 拖动得更近时,将其捕捉到新选项,因为与需要以 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
来防止此问题。
请记住
在使用 transform 样式(如 rotateY
、rotateX
等)时,请确保 transform 样式 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。你可以使用 In-App Dev Menu "FPS Monitor" 工具来监视帧率。