如何在React Native中为SVG坐标设置动画？

Question

我在React Native应用程序中有一个SVG <Polygon/>，我可以根据状态变量获取要更新的坐标，但是我希望能够对其进行动画处理，以便多边形平滑地变换。现在的代码是这样的：

<Svg>
  <Polygon
    points={this.state.a*44.9+',0 '+this.state.b+',0 475,20'}
  />
</Svg>

当我将Polygon设为Animated.Component并将状态变量设为Animates.Values时，它将无法运行。有人知道解决这个问题的方法吗？

谢谢！

Answer 1

1. 您可以使用Animated.value进行更改，并添加侦听器以侦听更改。示例：

...

this.state = {
  animatedValue: new Animated.Value(0),
  radius: 1,
};


this.state.animatedValue.addListener((obj) => {
  this.setState({
    radius: obj.value,
  });
});

...

<Circle
  cx="100"
  cy="100"
  r={this.state.radius}
  stroke="yellow"
  fill="white"
/>

...

1. 或者您可以使用addListener和setNativeProps，如本例所示：https://stackoverflow.com/a/44014604/7479959
2. 或者您可以使用现成的软件包，例如：https://www.npmjs.com/package/react-native-svg-animations

干杯！