比较精细的动画可以用Animated来控制。但是，在一些简单的界面切换、更新的时候所做的动画里再去计算开始值、结束值和插值器如何运作绝对是浪费时间。

RN正好给我们提供了LayoutAnimation来解决这个问题。按照官方的说法：LayoutAnimation就是用于在下一个绘制或者布局周期（render/layout cycle)里处理界面中全部视图的动画的。

下面看一个例子：

export default class DemoLayoutAnimation extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      width: 100,

      height: 100,

    };

    this._onPress = this._onPress.bind(this);

  }

  componentWillMount() {

    LayoutAnimation.spring();

  }

  _onPress() {

    LayoutAnimation.spring();

    this.setState({width: this.state.width + 20, height: this.state.height + 20});

  }

  render() {

    return (

      <View style={styles.container}>

        <View style={[styles.box, {width: this.state.width, height: this.state.height}]} />

        <TouchableOpacity onPress={this._onPress}>

          <View style={styles.button}>

            <Text style={styles.buttonText}>Press me!</Text>

          </View>

        </TouchableOpacity>

      </View>

    );

  }

};

效果就是这样的。

使用的时候也非常简单，只需要在更新State之前调用一下LayoutAnimation.sprint()这么一行代码。

LayoutAnimation默认的提供了三种动画：linear , spring和easeInEaseOut。 当然，RN也留出了自定义的接口。你可以按照自己需要的自定义动画效果。

下面看看如何自定义：

import //...略...

const customAnim = {

  customSpring: {

    duration: 400,

    create: {

      type: LayoutAnimation.Types.spring,

      property: LayoutAnimation.Properties.scaleXY,

      springDamping: 0.6

    },

    update: {

      type: LayoutAnimation.Types.spring,

      springDamping: 0.6

    }

  },

  customLinear: {

    duration: 200,

    create: {

      type: LayoutAnimation.Types.linear,

      property: LayoutAnimation.Properties.opacity,

    },

    update: {

      type: LayoutAnimation.Types.easeInEaseOut

    }

  }

};

export default class DemoLayoutAnimation extends React.Component {

  componentWillUpdate() {

    LayoutAnimation.configureNext(customAnim.customLinear);

  }

  _onPress() {

    // LayoutAnimation.spring();

    this.setState({ width: this.state.width + 20, height: this.state.height + 20 });

  }

  //...略...

};

为了直入主题，部分内容省略。后面有完整的代码。

自定义非常简单，当然限制也不少。只需要指定动画的duration、create和update。

另外一个本例与上例不同的地方在于LayoutAnimation可以只在componentWillUpdate()方法里指定，不需要在点击事件里指定。

完整代码

//@flow

import React from 'react';

import {

  View,

  Text,

  TouchableOpacity,

  LayoutAnimation,

  StyleSheet,

} from 'react-native';

const customAnim = {

  customSpring: {

    duration: 400,

    create: {

      type: LayoutAnimation.Types.spring,

      property: LayoutAnimation.Properties.scaleXY,

      springDamping: 0.6

    },

    update: {

      type: LayoutAnimation.Types.spring,

      springDamping: 0.6

    }

  },

  customLinear: {

    duration: 200,

    create: {

      type: LayoutAnimation.Types.linear,

      property: LayoutAnimation.Properties.opacity,

    },

    update: {

      type: LayoutAnimation.Types.easeInEaseOut

    }

  }

};

export default class DemoLayoutAnimation extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      width: 100,

      height: 100,

    };

    this._onPress = this._onPress.bind(this);

    this._createAnimation = this._createAnimation.bind(this);

  }

  //   componentWillMount() {

  //     LayoutAnimation.spring();

  //   }

  componentWillUpdate() {

    LayoutAnimation.configureNext(customAnim.customLinear);

  }

  _onPress() {

    // LayoutAnimation.spring();

    this.setState({ width: this.state.width + 20, height: this.state.height + 20 });

  }

  render() {

    return (

      <View style={styles.container}>

        <View style={[styles.box, { width: this.state.width, height: this.state.height }]} />

        <TouchableOpacity onPress={this._onPress}>

          <View style={styles.button}>

            <Text style={styles.buttonText}>Press me!</Text>

          </View>

        </TouchableOpacity>

      </View>

    );

  }

};

const styles = StyleSheet.create({

  container: {

    flex: 1,

    alignItems: 'center',

    justifyContent: 'center'

  },

  box: {

    backgroundColor: 'red'

  },

  button: {

    marginTop: 10,

    paddingVertical: 10,

    paddingHorizontal: 20,

    backgroundColor: 'black'

  },

  buttonText: {

    color: 'white',

    fontSize: 16,

    fontWeight: 'bold'

  }

});