在反应本机上做动画时出错

Question

我在尝试对原生 做动画时遇到了问题，它会抛出一个错误，指出我无法分配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> 
     ); 
    } 
} 

Answer 1

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