在 React Native 上做动画时出错

Question

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>
        );
    }
}

Answer 1

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

Answer 2

Use Animated. ValueXY insted of Animated.Value

 animateX : new Animated.ValueXY({x: 0, y: 0});