对本机弯曲的向右弯曲的视图右侧做出反应

Question

image description of idea

我想使用react native在我的手机中为菜单制作打开/关闭动画。但是我不知道如何使侧面像想法一样弯曲。  我尝试使用SVG，但无法将其存档。
我尝试使用边界半径，但是似乎不起作用，并且无法制作入弯（关闭菜单时）动画。

<View style={styles.container}>
      <View style={{
        width:200,
        flex:1,
        backgroundColor:"red",
        borderTopRightRadius:400,
        borderBottomRightRadius: 400,
      }}>
      </View>

    </View>

我想让它像以下动画一样运作：https://github.com/lkzhao/ElasticTransition 谢谢

Answer 1

我在React Native中已经做了很多动画工作，但是那看起来很棘手。不过，我认为我有解决方案。 （考虑20分钟后）

我将举一个示例场景：菜单位于主屏幕顶部，您向左滑动即可使用弯曲的动画关闭菜单。

1）创建具有以下样式的Animated.View：

const { width, height } = Dimensions.get('window');

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: -height,
    left: width,
    width: height * 3,
    height: height * 3,
    borderRadius: height * 1.5
  }
});

2）将Animated.View的背景颜色更改为主屏幕的背景颜色。

3）创建一个Animated.Value，并将transform：[{scale}]属性调整为约1.1。

这将使Animated.View放大，从右侧舍入边框，使其看起来像是弯曲的菜单。

您可能想玩一下borderRadius和height。但从理论上讲，它应该起作用。

4）对菜单进行动画处理，然后将Animated.View缩放为1.0。

这是一个示例图片，解释了我的意思：