如何为 react-native-svg 多边形元素设置动画？

如何解决如何为 react-native-svg 多边形元素设置动画？

有没有一种简单的方法可以从 react-native-svg 库中为 polygon 元素设置动画？我需要通过动画点来动画他的形状。我发现了一些关于如何为 Path 元素或 Circle 设置动画的示例，但找不到关于多边形的任何内容。提前致谢。

解决方法

聚会有点晚了，但如果您仍然感兴趣，我已经找到了解决方案。这并不完全“简单”，但确实有效。有一个叫做 React Native Reanimated 的库，它扩展了动画组件的功能实质上。这是我能够实现的目标：

动画多边形不能开箱即用的原因是标准动画 API 仅处理简单的值，即单个数字。 react-native-svg 中的 Polygon 组件采用点的道具，它是每个点的数组，它们本身是 x 和 y 的数组。例如：

<Polygon
        strokeWidth={1}
        stroke={strokeColour}
        fill={fillColour}
        fillOpacity={1}
        points={[[firstPointX,firstPointY],[secondPointX,secondPointY]}
 />

React Native Reanimated 允许您对复杂的数据类型进行动画处理。在本例中，有 useSharedValue，它的功能几乎与 new Animated.value() 相同，还有一个名为 useAnimatedProps 的函数，您可以在其中创建点（或其他任何想要动画的点）并将它们传递给组件。>

     // import from the library 
import Animated,{
      useSharedValue,useAnimatedProps,} from 'react-native-reanimated';

 // creates the animated component 
 const AnimatedPolygon = Animated.createAnimatedComponent(Polygon);

const animatedPointsValues = [
  {x: useSharedValue(firstXValue),y: useSharedValue(firstYValue)},{x: useSharedValue(secondXValue),y: useSharedValue(secondYValue)},];

const animatedProps = useAnimatedProps(() => ({
      points: data.map((_,i) => {
        return [
          animatedPointValues[i].x.value,animatedPointValues[i].y.value,];
      }),})),

然后在您的渲染/返回：

  <AnimatedPolygon
  strokeWidth={1}
        stroke={strokeColour}
        fill={fillColour}
        fillOpacity={1}
        animatedProps={animatedProps}
      />

然后每当您更新这些共享值之一时，组件就会动画。

我建议阅读他们的文档并熟悉该库，因为它会打开一个充满可能性的世界：

https://docs.swmansion.com/react-native-reanimated/

此外，动画是在原生 UI 线程中处理的，很容易达到 60fps，但您可以用 JS 编写它们。

祝你好运！