React Native Reanimated 2 为 SVG 路径的长度设置动画

Posted 2023-02-19

【中文标题】React Native Reanimated 2 为 SVG 路径的长度设置动画

【英文标题】：React Native Reanimated 2 animating the length of an SVG Path

【发布时间】：2021-06-09 20:11:26

【问题描述】：

我正在尝试将 SVG 路径的长度从 0 动画化到 React Native Reanimated 2 中的全长。这是我的示例路径：

const AnimatedPath = Animated.createAnimatedComponent(Path);

const animatedProps = useAnimatedProps(() => 
  const path =
    `M$width * 0.182 $height * 0.59 ` +
    `L$width * 0.443 $height * 0.59 ` +
    `L$width * 0.443 $height * 0.39 `;
  return 
    d: path,
  ;
);

return (
  <Svg  >
    <AnimatedPath animatedProps=animatedProps fill="none" stroke="red" strokeWidth="5" />
  </Svg>
);

我尝试在路径宽度上添加一些插值，但没有成功。我还尝试查看 Redash 的 interpolatePath() 实现，但它似乎采用两条路径作为输出范围。还有什么我应该看的吗？

【参考方案1】：

您需要使用useAnimatedStyle 而不是useAnimatedProps，并根据您更改的一些progress 共享值，使用useDerivedValue 为您的Path 组件（由动画包装）计算d 值使用withTiming 0 到 1。