React Native填坑之旅--LayoutAnimation篇
比较精细的动画可以用 RN正好给我们提供了 下面看一个例子: 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> ); } };
使用的时候也非常简单,只需要在更新
下面看看如何自定义: 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 });
}
//...略...
};
为了直入主题,部分内容省略。后面有完整的代码。 自定义非常简单,当然限制也不少。只需要指定动画的 另外一个本例与上例不同的地方在于LayoutAnimation可以只在 完整代码//@flow
import React from 'react';
import {
View,Text,TouchableOpacity,LayoutAnimation,StyleSheet,} from 'react-native';
const customAnim = {
customSpring: {
duration: 400,update: {
type: LayoutAnimation.Types.easeInEaSEOut
}
}
};
export default class DemoLayoutAnimation extends React.Component {
constructor(props) {
super(props);
this.state = {
width: 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' } });
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |