LayoutAnimation,布局动画

当视图添加、删除、移动时，会显得很生硬，就是突然地出现效果。
使用LayoutAnimation就会在添加、删除、移动时，有一个过渡的动画效果。
使用很简单

if (Platform.OS === 'android') {
    UIManager.setLayoutAnimationEnabledExperimental(true)
}

第一种方法：LayoutAnimation.easeInEaseOut();

componentWillUpdate() {
  console.log('componentWillUpdate...');
  LayoutAnimation.spring();
  LayoutAnimation.easeInEaseOut();
  LayoutAnimation.linear();
}

第二种方法：LayoutAnimation.configureNext(config)，自定义动画效果

componentWillUpdate() {
  console.log('componentWillUpdate...');
  LayoutAnimation.configureNext(config)
}

需要自定义config

var config = {
    duration: 800, // 动画时间
    create: {
    // spring,linear,easeInEaseOut,easeIn,easeOut,keyboard
      type: LayoutAnimation.Types.linear,
    // opacity,scaleXY 透明度，位移
      property: LayoutAnimation.Properties.opacity,
    },
    update: {
    // 更新时显示的动画
      type: LayoutAnimation.Types.easeInEaseOut,
    },
  };

注： 在 componentWillUpdate() 这里面写动画，当前所有页面的布局改变，都会有动画效果。如果只想某个动作改变布局需要动画效果，可以在调用方法的时候写

 <TouchableOpacity onPress = {()=>{
                        LayoutAnimation.spring();
                        this.setState({marginTop:this.state.marginTop + 100})
                    }}>
                        <Text>Text DOWN</Text>
</TouchableOpacity>

摘取网络图片.gif