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

Question

有没有一种简单的方法来让react-native-svg库中的Polygon元素具有动画效果？我需要通过动画点来动画化他的形状。我找到了一些关于如何使Path元素或Circle动画化的例子，但找不到任何关于多边形的东西。提前谢谢。

Answer 1

有点晚了，但如果你还感兴趣的话我找到了一个解决方案。这并不完全是“简单”，但它是有效的。有一个叫做React Native Reanimated的库，它极大地扩展了动画组件的功能。这是我能够做到的：

​

​

不提供多边形动画的原因是因为标准的Animated 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，它的功能与新的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编写它们。

祝好运!