在 React Native 上做動畫時出錯

Question

我在嘗試在 React Native 上制作動畫時遇到問題，它會拋出一個錯誤，提示我無法分配 x 值。 有誰知道它可以是什么？

undefined 不是一個對象（評估'_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

Answer 2

使用動畫。 ValueXY 插入Animated.Value

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