Question

我在尝试使用本机做动画时遇到问题它会抛出一个错误，表示我无法分配x值。有人知道它能是什么吗？

undefined不是对象（评估＆＃39; _this.state.animateXY.xinterpolate＆＃39;）

  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

使用Animated。 ValueXY 插入了Animated.Value

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

做反应原生动画时出错

2 个答案: