LayoutAnimation,布局動(dòng)畫

當(dāng)視圖添加、刪除、移動(dòng)時(shí)，會(huì)顯得很生硬，就是突然地出現(xiàn)效果。
使用LayoutAnimation就會(huì)在添加、刪除、移動(dòng)時(shí)，有一個(gè)過(guò)渡的動(dòng)畫效果。
使用很簡(jiǎn)單

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

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

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

第二種方法：LayoutAnimation.configureNext(config)，自定義動(dòng)畫效果

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

需要自定義config

var config = {
    duration: 800, // 動(dòng)畫時(shí)間
    create: {
    // spring,linear,easeInEaseOut,easeIn,easeOut,keyboard
      type: LayoutAnimation.Types.linear,
    // opacity,scaleXY 透明度，位移
      property: LayoutAnimation.Properties.opacity,
    },
    update: {
    // 更新時(shí)顯示的動(dòng)畫
      type: LayoutAnimation.Types.easeInEaseOut,
    },
  };

注： 在 componentWillUpdate() 這里面寫動(dòng)畫，當(dāng)前所有頁(yè)面的布局改變，都會(huì)有動(dòng)畫效果。如果只想某個(gè)動(dòng)作改變布局需要?jiǎng)赢嬓Ч梢栽谡{(diào)用方法的時(shí)候?qū)?/h1>

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

摘取網(wǎng)絡(luò)圖片.gif