Блог

Главная - Вопросы по программированию - React Native Реанимирован 2 анимация длины пути SVG

React Native Реанимирован 2 анимация длины пути SVG

#react-native #svg #react-native-reanimated #react-native-svg #react-native-reanimated-v2

Вопрос:

Я пытаюсь анимировать форму длины 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 height="100%" width="100%">
    <AnimatedPath animatedProps={animatedProps} fill="none" stroke="red" strokeWidth="5" />
  </Svg>
);

Я попытался добавить некоторую интерполяцию к ширине пути, но безуспешно. Я также попытался взглянуть на реализацию interpolatePath() из Redash, но, похоже, в качестве выходного диапазона используются два пути. Есть еще что-нибудь, на что мне следует обратить внимание?

Ответ №1:

Вам нужно использовать useAnimatedStyle вместо useAnimatedProps и рассчитать d значение для вашего Path компонента (обернутого анимацией), используя useDerivedValue , на основе некоторого progress общего значения, которое вы меняете с 0 на 1, используя withTiming .

Метки: