在反應本機上做動畫時出錯

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