高效React Native动画开发 - LayoutAnimation

为何要使用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动画的自定义了。更多的配置选项能够在源码中发现!