I'm having problem while trying to do animations on react native it throws an error that says I can't assign the x value. Anybody knows what can it be?
undefined is not an object (evaluating '_this.state.animateXY.xinterpolate')
import {
View,
Text,
StyleSheet,
Animated,
Image,
Easing,
TouchableHighlight,
Dimensions,
} from 'react-native';
const {width, height} = Dimensions.get('window');
class AddPost extends Component {
constructor(){
super()
this.state ={
animate: new Animated.Value(30),
animateXY: new Animated.Value({x:0, y:0}),
// radius: new Animated.Value(0)
}
this.animateInterpolate = this.state.animateXY.x.interpolate({
inputRange: [0,150],
outputRange: [1,2]
})
}
componentWillMount(){
Animated.sequence([
Animated.timing(this.state.animateXY, {
toValue: {x: height / 2, y: 0},
duration:2000
}),
Animated.timing(this.state.animate, {
toValue: 60,
duration:2000
}),
/*Animated.timing(this.state.animate, {
toValue: 40,
duration:2000
}),*/
]).start()
}
render() {
return (
<TouchableHighlight onPress={onPress}>
<View style={styles.container}>
<Animated.View style={{
width: this.state.animate,
height: this.state.animate,
backgroundColor: 'blue',
position: 'absolute',
top: this.state.animateX.x,
left: this.state.animateY.y,
// transform:[{scale: this.animateInterpolate}],
borderRadius: this.state.radius
}}/>
</View>
</TouchableHighlight>
);
}
}
this.state.animateX
is simply not declared.
You need to set animatedXY to 0 : animateX: new Animated.Value(0)
Then set your animation :
Animated.timing(this.state.animateX, {
toValue: height/2,
duration:2000
}),
Then you can set the value of your X :
top: this.state.animateX
Use Animated. ValueXY insted of Animated.Value
animateX : new Animated.ValueXY({x: 0, y: 0});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.