我试图交错两个动画，其中有一个图像淡入屏幕，然后向下平移。（我正在制作种植种子的动画）

种子是它自己的组件：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Text, View, Image, Animated, StyleSheet } from 'react-native';
import seed from '../images/seed.png';

export default class SeedComponent extends Component {

    state = {
        opacity: new Animated.Value(0),
        movement: new Animated.Value(0)
    }

    componentDidMount() {
        const fadeAnimation = 
        Animated.timing(this.state.opacity, {
            toValue: 1,
            duration: 1000,
            useNativeDriver: true
        });

        const moveAnimation = 
        Animated.timing(this.state.movement, {
            toValue: 100,
            duration: 500,
            useNativeDriver: true
        });

        Animated.stagger(500,[
            fadeAnimation,
            moveAnimation
          ]).start();
    }

    render() {
        const animationStyles = {
            opacity: this.state.fadeAnimation,
            transform: [
              { translateY: this.state.moveAnimation},
            ]
          };
        return (
            <View>
            <Animated.Image source={seed} style={[styles.image, animationStyles]} ></Animated.Image>
            </View>
        );
      }
    }


const styles = StyleSheet.create({
    container: {  
      flex: 1, 
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems:'center'
    },
    image: {
        width:100,
        height:100

    }
  });

我将其导入 App.js 文件中。

但是，我不断收到以下错误：

TypeError: undefined is not an object (evaluating 'value.getValue')

错误

我已经在

state = {
        opacity: new Animated.Value(0),
        movement: new Animated.Value(0)
    }

因此，我认为使用 ComponentDidMount 是可以的。但是，我不一定需要使用它。我只想能够在单个图像上按顺序或交错地显示多个动画。

我怀疑错误可能出在 <Animated.Image> 标签上，但我无法找到解决方法。