动画背景图像时出现问题

Question

我正在尝试重新创建一个盘带动画，以提高我的设计技能。这个特殊的动画使我感到困惑。在对底部操作表进行动画处理之后，将在Y轴上对背景图像进行动画处理，但是与原始动画相比，该动画处于关闭状态。

我的尝试

原始动画

2：

链接到原始动画 https://dribbble.com/shots/4038053-Tasty-Burger-App

我幼稚的方法是查看是否通过将ImageBackground组件包装在Animated.View组件中并使用spring函数使yAxis动画来制作动画。 我的渲染看起来像这样

const animatedStyles = {
      transform: [{ translateY: this.state.yAxis }]
    };
<Animated.View style={animatedStyles}>
        <ImageBackground
          source={require('./assets/burger.png')}
          style={styles.ImageBackground}
          resizeMode="cover"
        >
        </ImageBackground>
</Animated.View> 

我用来制作动画的代码在这里：

openMenu = () => {
    this.setState({
      animatePanel: !this.state.animatePanel
    });
    this.state.animatePanel
      ? Animated.spring(this.state.yAxis, {
          toValue: -1,
          duration: 100,
          useNativeDriver: true
        }).start()
      : Animated.spring(this.state.yAxis, {
          toValue: -50,
          duration: 100,
          useNativeDriver: true
        }).start();
  };

我是一个初学者，所以如果有任何可以帮助我解决该问题的教程，我也将其作为答案。