在 React-Native 中围绕 SVG 路径制作球动画

问题描述投票：0回答：1

我正在尝试在 React-Native 中围绕 SVG 路径制作一个球的动画，但不太确定如何去做，SVG 路径是一个药丸形状。

这是到目前为止我的代码，

<View style={styles.container}>
  <Svg height="500" width="400">
    <Path
      d="M80 340 A100 100 0 0 0 320 340 v-200 A100 100 0 0 0 80 140 v200"
      fill="none"
      stroke="#eaeaea"
      strokeWidth="16"
    />
    <Circle cx="320" cy="160" r="16" fill="#512468" />
  </Svg>
</View>

这是一个视觉效果：

Environment Visual

javascript react-native animation svg-animate

1个回答

0
投票

<body>
<Svg height="500" width="400">
    <Path
      d="M80 340 A100 100 0 0 0 320 340 v-200 A100 100 0 0 0 80 140 v200"
      fill="none"
      stroke="#eaeaea"
      strokeWidth="16"
      id="move-path"
    />
    <Circle r="16" fill="#512468" >
      <animateMotion dur="10s" repeatCount="indefinite">
        <mpath href="#move-path" />
      </animateMotion>
    </Circle>
  </Svg>
</body>

最新问题

© www.soinside.com 2019 - 2024. All rights reserved.