React Native Reanimated 2中SVG非样式属性（颜色）动画实现咨询

要给SVG路径的stroke这类非样式属性做动画，不能用useAnimatedStyle（它只处理组件的style属性），得用Reanimated 2提供的useAnimatedProps API，以下是具体实现步骤：

1. 导入必要的API并创建动画版SVG组件 #

首先确保你正确导入依赖，并将Path组件转为可动画的版本：

import React, { useEffect } from 'react';
import Animated, { 
  useSharedValue, 
  useAnimatedProps, 
  interpolate, 
  Extrapolation, 
  withTiming 
} from 'react-native-reanimated';
import { Svg, Path } from 'react-native-svg';

// 将普通Path转为支持动画的组件
const AnimatedPath = Animated.createAnimatedComponent(Path);

2. 使用useAnimatedProps定义动画逻辑 #

用useAnimatedProps代替useAnimatedStyle，直接返回包含stroke属性的动画对象：

const YourComponent = () => {
  // 定义动画驱动值
  const animatedValue = useSharedValue(0);

  // 定义stroke属性的动画逻辑
  const animatedProps = useAnimatedProps(() => {
    return {
      stroke: interpolate(animatedValue.value, [0, 50], ['blue', 'red'], {
        extrapolateRight: Extrapolation.CLAMP,
      }),
    };
  });

  // 触发动画（示例：组件挂载后执行一次颜色过渡）
  useEffect(() => {
    animatedValue.value = withTiming(50, { duration: 2000 });
  }, []);

  return (
    <Svg width={80} height={60} viewBox="0 0 8 4">
      <AnimatedPath
        d="M0 4l4-4 4 4"
        animatedProps={animatedProps} // 传入动画化的props
        strokeWidth={3.5}
        fill="none"
        fillRule="evenodd"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </Svg>
  );
};

export default YourComponent;

关键说明 #

• useAnimatedProps是Reanimated专门用来处理非样式类组件props动画的API，用法和useAnimatedStyle一致，但返回的是要动画的props集合。
• 必须将普通SVG组件（如Path）通过Animated.createAnimatedComponent()转为动画组件，才能接收animatedProps属性。
• 修正了你原代码中的拼写错误：nimatedValue应为animatedValue。

内容的提问来源于stack exchange，提问作者Yoel