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

Question

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

Answer 1

晚会有点晚了，但如果您仍然感兴趣，我已经找到了解决方案。它不完全是 'simple'，但它有效。有一个名为 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，它的功能几乎与 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,
        ];
      }),
    })),

然后在你的 render/return:

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

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

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

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

此外，动画在本机 UI 线程中处理，轻松达到 60fps，但您可以在 JS 中编写它们。

祝你好运！

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

How to animate react-native-svg Polygon element?

reactjs

react-native

react-native-svg