如何在React Native中为SVG坐标设置动画？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在React Native中为SVG坐标设置动画？相关的知识，希望对你有一定的参考价值。
我在我的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时，它将不会运行。有没有人知道这方面的方法？
谢谢！
答案
- 你可以使用
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"
/>
...以上是关于如何在React Native中为SVG坐标设置动画？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 React-Native 和 Reanimated 2 为 svg 设置动画道具变换
如何在 react-native 中为 webView 请求设置自定义标头
如何在 React Native 中为 useRef 钩子设置 Typescript 类型？
如何在 React Native 中为 TextInput 设置 lineHeight 样式？