LayoutAnimation,布局動(dòng)畫(huà)
當(dāng)視圖添加、刪除惠毁、移動(dòng)時(shí)犹芹，會(huì)顯得很生硬，就是突然地出現(xiàn)效果鞠绰。
使用LayoutAnimation就會(huì)在添加腰埂、刪除、移動(dòng)時(shí)洞豁，有一個(gè)過(guò)渡的動(dòng)畫(huà)效果盐固。
使用很簡(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)畫(huà)效果
componentWillUpdate() {
console.log('componentWillUpdate...');
LayoutAnimation.configureNext(config)
}
需要自定義config
var config = {
duration: 800, // 動(dòng)畫(huà)時(shí)間
create: {
// spring,linear,easeInEaseOut,easeIn,easeOut,keyboard
type: LayoutAnimation.Types.linear,
// opacity,scaleXY 透明度丈挟，位移
property: LayoutAnimation.Properties.opacity,
},
update: {
// 更新時(shí)顯示的動(dòng)畫(huà)
type: LayoutAnimation.Types.easeInEaseOut,
},
};
注： 在 componentWillUpdate() 這里面寫動(dòng)畫(huà)刁卜，當(dāng)前所有頁(yè)面的布局改變，都會(huì)有動(dòng)畫(huà)效果曙咽。如果只想某個(gè)動(dòng)作改變布局需要?jiǎng)赢?huà)效果蛔趴，可以在調(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
<TouchableOpacity onPress = {()=>{
LayoutAnimation.spring();
this.setState({marginTop:this.state.marginTop + 100})
}}>
<Text>Text DOWN</Text>
</TouchableOpacity>
摘取網(wǎng)絡(luò)圖片.gif
