在反应本机上做动画时出错
问题描述:
我在尝试对原生 做动画时遇到了问题,它会抛出一个错误,指出我无法分配x值。任何人都知道它会是什么?在反应本机上做动画时出错
未定义不是(评价 '_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
根本就没有声明。
您需要animatedXY设置为0:animateX: new Animated.Value(0)
然后设置动画:
Animated.timing(this.state.animateX, {
toValue: height/2,
duration:2000
}),
然后,您可以设置X的值:
top: this.state.animateX
我不认为这可能会解决。我尝试过,但是当我插入x时会引发错误。在this.state.animateXY.x.interpolate –
这是因为你不能'new Animated.Value({x:0,y:0})''。 'animatedXY.x'不存在。你需要设置新的Animated.Value(0),然后插入值来得到你的X和Y. –