<p>比较精细的动画可以用 Animated 来控制。但是，在一些简单的界面切换、更新的时候所做的动画里再去计算开始值、结束值和插值器如何运作绝对是浪费时间。</p>    <p>RN正好给我们提供了 LayoutAnimation 来解决这个问题。按照官方的说法： LayoutAnimation 就是用于在下一个绘制或者布局周期（render/layout cycle)里处理界面中全部视图的动画的。</p>    <p>下面看一个例子：</p>    <pre>  <code class="language-javascript">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>      );    }  };</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/28e67b1de3a8a579a44e351d9116932e.gif"></p>    <p>效果就是这样的。</p>    <p>使用的时候也非常简单，只需要在更新 State 之前调用一下 LayoutAnimation.sprint() 这么一行代码。</p>    <p>LayoutAnimation 默认的提供了三种动画： linear , spring 和 easeInEaseOut 。 当然，RN也留出了自定义的接口。你可以按照自己需要的自定义动画效果。</p>    <p>下面看看如何自定义：</p>    <pre>  <code class="language-javascript">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 });    }      //...略...  };</code></pre>    <p>为了直入主题，部分内容省略。后面有完整的代码。</p>    <p>自定义非常简单，当然限制也不少。只需要指定动画的 duration 、 create 和 update 。</p>    <p>另外一个本例与上例不同的地方在于LayoutAnimation可以只在 componentWillUpdate() 方法里指定，不需要在点击事件里指定。</p>    <h2><strong>完整代码</strong></h2>    <pre>  <code class="language-javascript">//@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'    }  });</code></pre>    <p> </p>    <p>来自：https://segmentfault.com/a/1190000007088741</p>    <p> </p>