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