动画
流畅、有意义的动画对于移动应用用户体验来说是非常重要的。现实生活中的物体在开始移动和停下来的时候都具有一定的惯性,我们在界面中也可以使用动画来实现契合物理规律的交互。
React Native 提供了两个互补的动画系统:用于创建精细的交互控制的动画Animated
和用于全局的布局动画LayoutAnimation
。
Animated
Animated
使得开发者可以简洁地实现各种各样的动画和交互方式,并且具备极高的性能。Animated
旨在以声明的形式来定义动画的输入与输出,在其中建立一个可配置的变化函数,然后使用start/stop
方法来控制动画按顺序执行。 Animated
仅封装了 6 个可以动画化的组件:View
、Text
、Image
、ScrollView
、FlatList
和SectionList
,不过你也可以使用Animated.createAnimatedComponent()
来封装你自己的组件。下面是一个在加载时带有淡入动画效果的视图:
我们来分解一下这个过程。在FadeInView
的构造函数里,我们创建了一个名为fadeAnim
的Animated.Value
,并放在state
中。而View
的透明度是和这个值绑定的。
组件加载时,透明度首先设为 0。然后一个 easing 动画开始改变fadeAnim
值,同时会导致所有与其相关联的值(本例中是透明度)也逐帧更新,最终和fadeAnim
一样变为 1。
这一过程经过特别优化,执行效率会远高于反复调用setState
和多次重渲染。
因为这一过程是纯声明式的,因此还有进一步优化的空间,比如我们可以把这些声明的配置序列化后发送到一个高优先级的线程上运行。
配置动画
动画拥有非常灵活的配置项。自定义的或预定义的 easing 函数、延迟、持续时间、衰减系数、弹性常数等都可以在对应类型的动画中进行配置。
Animated
提供了多种动画类型,其中最常用的要属Animated.timing()
。它可以使用一些预设的easing
曲线函数来控制动画值的变化速度,也支持自定义的曲线函数。动画中通常使用easing
曲线函数来控制物体的加速或减速变化。
默认情况下timing
使用easeInOut
曲线,它使动画体逐渐加速到最大然后逐渐减速到停止。你可以通过传递easing
参数来指定不 同的变化速度,还支持自定义duration
持续时间,甚至是动画开始前的delay
延迟。
下面这个例子创建了一个 2 秒长的动画,在移动目标到最终位置前会稍微往后退一点:
Animated.timing(this.state.xPosition, {
toValue: 100,
easing: Easing.back(),
duration: 2000,
}).start();
如果想了解更多配置参 数,请参阅Animated
文档的配置动画章节。
组合动画
多个动画可以通过parallel
(同时执行)、sequence
(顺序执行)、stagger
和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,
}),
Animated.parallel([
// after decay, in parallel:
Animated.spring(position, {
toValue: {x: 0, y: 0}, // return to start
}),
Animated.timing(twirl, {
// and twirl
toValue: 360,
}),
]),
]).start(); // start the sequence group
默认情况下,如果任何一个动画被停止或中断了,组内所有其它的动画也会被停止。Parallel 有一个stopTogether
属性,如果设置为false
,可以禁用自动停止。
在Animated
文档的组合动画一节中列出了所有的组合方法。
合成动画值
你可以使用加减乘除以及取余等运算来把两个动画值合成为一个新的动画值。
有些时候,一些动画值需要依赖另一些值来做计算。比如下面的例子,以一个动画值为分母,增大其值以实现合成值的缩小(1x --> 0.5x)
const a = new Animated.Value(1);
const b = Animated.divide(1, a);
Animated.spring(a, {
toValue: 2,
}).start();
插值
所有动画值都可以执行插值(interpolation)操作。插值是指将一定范围的输入值映射到另一组不同的输出值,一般我们使用线性的映射,但是也可以使用 easing 函数。默认情况下,它会将曲线外推到给定范围之外,但您也可以让它限制为输出值。
一个简单的将范围 0-1 转换为范围 0-100 的映射操作是:
value.interpolate({
inputRange: [0, 1],
outputRange: [0, 100],
});
例如,你可能想通过使用 Animated.Value
的值从 0 变化到 1 来让 position
从 150px 变化到 0px,同时 opacity
从 0 变为 1。这一点可以通过将 style
从 example 修改为下面的样子来实现:
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,最后形成一个始终为 0 的静止区间,对于任何大于 100 的输入都返回 0。具体写法如下:
value.interpolate({
inputRange: [-300, -100, 0, 100, 101],
outputRange: [300, 0, 1, 0, 0],
});
它的最终映射结果如下:
| 输入 | 输出 |
| ---- | ---- |
| -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
类中定义了,包括二次、指数、贝塞尔等曲线以及 step、bounce 等方法。interpolation
还支持限制输 出区间outputRange
。你可以通过设置extrapolate
、extrapolateLeft
或extrapolateRight
属性来限制输出区间。默认值是extend
(允许超出),不过你可以使用clamp
选项来阻止输出值超过outputRange
。
跟踪动态值
动画中所设的值还可以通过跟踪别的值得到。你只要把 toValue 设置成另一个动态值而不是一个普通数字就行了。比如我们可以用弹跳动画来实现聊天头像的闪动,又比如通过timing
设置duration:0
来实现快速的跟随。他们还可以使用插值来进行组合:
Animated.spring(follower, {toValue: leader}).start();
Animated.timing(opacity, {
toValue: pan.x.interpolate({
inputRange: [0, 300],
outputRange: [1, 0],
}),
}).start();
变量 leader
和 follower
通过 Animated.ValueXY()
来定义。这是一个方便的处理 2D 交互的办法,譬如旋转或拖拽。它是一个简单的包含了两个Animated.Value
实例的包装,然后提供了一系列辅助函数,使得ValueXY
在许多时候可以替代Value
来使用。比如在上面的代码片段中,leader
和follower
可以同时为valueXY
类型,这样 x 和 y 的值都会被跟踪。
跟踪手势
Animated.event
是 Animated 中与输入有关的部分,允许手势或其它事件直接绑定到动态值上。它通过一个结构化的映射语法来完成,使得复杂事件对象中的值可以被正确的解开。第一层是一个数组,允许同时映射多个值,然后数组的每一个元素是一个嵌套的对象。在下面的例子里,你可以发现scrollX
被映射到了event.nativeEvent.contentOffset.x
(event
通常是回调函数的第一个参数),并且pan.x
和pan.y
分别映射到gestureState.dx
和gestureState.dy
(gestureState
是传递给PanResponder
回调函数的第二个参数)。
例如,在使用水平的滚动手势时,可以像下面这样将 event.nativeEvent.contentOffset.x
映射到 scrollX
(一个 Animated.Value
):
onScroll={Animated.event(
// scrollX = e.nativeEvent.contentOffset.x
[{ nativeEvent: {
contentOffset: {
x: scrollX
}
}
}]
)}
下面的例子实现一个水平滚动轮播,其中滚动位置指示器使用 ScrollView
中用到的 Animated.event
进行动画处理
在ScrollView
中使用动画事件的示例
- 函数式组件
- Class 组件
在使用 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
中使用动画事件的示例
- 函数式组件
- Class 组件
响应当前的动画值
你可能会注意到这里没有一个明显的方法来在动画的过程中读取当前的值——这是出于优化的角度考虑,有些值只有在原生代码运行阶段中才知道。如果你需要在 JavaScript 中响应当前的值,有两种可能的办法:
spring.stopAnimation(callback)
会停止动画并且把最终的值作为参数传递给回调函数callback
——这在处理手势动画的时候非常有用。spring.addListener(callback)
会在动画的执行过程中持续异步调用callback
回调函数,提供一个最近的值作为参数。这在用于触发状态切换的时候非常有用,譬如当用户拖拽一个东西靠近的时候弹出一个新的气泡选项。不过这个状态切换可能并不会十分灵敏,因为它不像许多连续手势操作(如旋转)那样在 60fps 下运行。
Animated
被设计为完全可序列化的,因此动画可以以高性能的方式运行,独立于正常的 JavaScript 事件循环。这确实会影响 API 的一些设计,因此与完全同步的系统相比,做某些需求可能看起来会有些棘手。Animated.Value.addListener
可能可以用来解决一些场景问题,但要谨慎使用它,因为它可能带来一些性能上的影响。
注:社区有另一个设计思路不太一样的高性能动画库
react-native-reanimated
,对性能有更高要求的开发者可以参考一下。
启用原生动画驱动
Animated
的 API 是可序列化的(即可转化为字符串表达以便通信或存储)。通过启用原生驱动,我们在启动动画前就把其所有配置信息都发送到原生端,利用原生代码在 UI 线程执行动画,而不用每一帧都在两端间来回沟通。如此一来,动画一开始就完全脱离了 JS 线程,因此此时即便 JS 线程被卡住,也不会影响到动画了。
在动画中启用原生驱动非常简单。只需在开始动画之前,在动画配置中加入一行useNativeDriver: true
,如下所示:
Animated.timing(this.state.animatedValue, {
toValue: 1,
duration: 500,
useNativeDriver: true, // <-- 加上这一行
}).start();
动画值在不同的驱动方式之间是不能兼容的。因此如果你在某个动画中启用了原生驱动,那么所有和此动画依赖相同动画值的其他动画也必须启用原生驱动。
原生驱动还可以在Animated.event
中使用,其对于滚动操作相关的动画优势更突出。在滚动事件中如果不使用原生驱动,由于数值需要通过 js 桥异步传输,动画将始终比用户的操作落后一帧。
<Animated.ScrollView // <-- 使用可动画化的ScrollView组件
scrollEventThrottle={1} // <-- 设为1以确保滚动事件的触发频率足够密集
onScroll={Animated.event(
[
{
nativeEvent: {
contentOffset: {y: this.state.animatedValue},
},
},
],
{useNativeDriver: true}, // <-- 加上这一行
)}>
{content}
</Animated.ScrollView>
您也可以通过运行 RNTester app 查看原生驱动程序的运行情况,然后再载入原生动画示例。您也可以查看 source code 来了解这些例子是如何产生的。