为什么要使用LayoutAnimtion🤔️
在我们平常的开发中，对于普通需求，经常会需要做一些简单的位移，淡入淡出等动画，而对于这种频繁的动画来说，使用Animated来做，虽然也是一个不错的选择，但是Animated在使用的过程中，需要更多的代码量，从定义变量，启动动画，结束，等等流程都要手动控制。如何高效快速地给App添加动画，也是一个比较广泛的需求。这就是我们使用LayoutAnimation的原因，快速，高效，相比Animated，虽然对于动画的控制减弱了，但是同时也获得了更高的开发效率。
和Animated有什么区别👀
上面说了LayoutAnimation对比Animated的优势，下面来更详细的对比一下两种方式在平常使用中的差异
首先是Animated(代码取自官方文档，并做了一些修改)
// part 1: 定义fadeAnim变量
state = {
fadeAnim: new Animated.Value(0)
}
// part 2: 在某个时机启动动画（这个例子中我们在didMount生命周期中启动）
componentDidMount() {
Animated.timing(
this.state.fadeAnim,
{
toValue: 1,
duration: 10000,
}
).start();
}
// part 3: 在render中，使用Animated提供的Animated.View实现动画
render() {
let { fadeAnim } = this.state;
return (
<Animated.View
style={{
opacity: fadeAnim,
}}
>
{this.props.children}
</Animated.View>
);
}
下面是LayoutAnimation
// part 1: 使用普通的state来定义变量
state = {
bottom: 0
}
// part 2:
// 此处假设我们在某个View的style中，使用了this.state.bottom这个变量作为bottom的值
// 是的，只需要添加一行代码，你的View就有了动画！
LayoutAnimation.spring();
this.setState({ bottom: 20 });
通过上面的代码，我们可以很直观的发现LayoutAnimation有多方便，我们可以使用这个api以非常低的代价，使我们的App加入动画✌️
快速上手🏃♀️
React Native LayoutAnimation api提供了三个可以直接使用的api，分别是easeInEaseOut, linear, spring
LayoutAnimation.easeInEaseOut()
LayoutAnimation.linear()
LayoutAnimation.spring()
使用方式和上面的例子相同，只要在相应的setState之前调用下面三个API其中之一，在UI更新的时候，React Native就会自动让UI实现相应的动画效果。
进阶 - 自定义animation🎈🎈
为了自定义animation，我们就需要稍微深入的了解一下LayoutAnimation提供了哪些API了，首先，我们来看一下源码中接口的定义吧
/**
* Automatically animates views to their new positions when the
* next layout happens.
*
* A common way to use this API is to call it before calling `setState`.
*
* Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
*
* UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
*/
const LayoutAnimation = {
/**
* Schedules an animation to happen on the next layout.
*
* @param config Specifies animation properties:
*
* - `duration` in milliseconds
* - `create`, `AnimationConfig` for animating in new views
* - `update`, `AnimationConfig` for animating views that have been updated
*
* @param onAnimationDidEnd Called when the animation finished.
* Only supported on iOS.
* @param onError Called on error. Only supported on iOS.
*/
configureNext,
/**
* Helper for creating a config for `configureNext`.
*/
create,
Types: Object.freeze({
spring: 'spring',
linear: 'linear',
easeInEaseOut: 'easeInEaseOut',
easeIn: 'easeIn',
easeOut: 'easeOut',
keyboard: 'keyboard',
}),
Properties: Object.freeze({
opacity: 'opacity',
scaleX: 'scaleX',
scaleY: 'scaleY',
scaleXY: 'scaleXY',
}),
checkConfig(...args: Array<mixed>) {
console.error('LayoutAnimation.checkConfig(...) has been disabled.');
},
Presets,
easeInEaseOut: (configureNext.bind(null, Presets.easeInEaseOut): (
onAnimationDidEnd?: any,
) => void),
linear: (configureNext.bind(null, Presets.linear): (
onAnimationDidEnd?: any,
) => void),
spring: (configureNext.bind(null, Presets.spring): (
onAnimationDidEnd?: any,
) => void),
};
主要方法🥩
- configureNext
- create
其实最主要的方法只有configureNext，create只是一个帮助创建配置的方法
使用configureNext
LayoutAnimation.configureNext(
config: LayoutAnimationConfig, // 提供一个动画的配置
onAnimationDidEnd?: Function, // 动画结束的回调，可以为空
)
从configureNext接口的定义中我们可以看到，使用很简单，提供一个LayoutAnimationConfig就可以了，那么这个LayoutAnimationConfig是什么呢
type LayoutAnimationConfig = $ReadOnly<{|
duration: number,
create?: AnimationConfig,
update?: AnimationConfig,
delete?: AnimationConfig,
|}>;
再次从定义中我们发现，这个config就是一个object，我们可以使用之前提到的create方法来快速生成它，下面是完整的使用例子
LayouteAnimation.configureNext(
LayoutAnimation.create(
// 动画的时长
200,
// 动画的类型， 例如linear，spring，easeIn
LayouteAnimation.Types.linear,
// 动画在哪些地方生效，scaleX就是在X轴生效
LayouteAnimation.Properties.scaleX
)
)
这样，我们就完全实现了LayoutAnimation动画的自定义了。更多的配置选项可以在源码中发现!
