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

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

我在我的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时,它将不会运行。有没有人知道这方面的方法?

谢谢!

reactjs react-native animation react-animated react-native-animatable
1个回答
0
投票
  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. 或者您可以使用addListenersetNativeProps,如下例所示:https://stackoverflow.com/a/44014604/7479959
  2. 或者您可以使用现成的包装:https://www.npmjs.com/package/react-native-svg-animations

干杯!

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