如何使用react-native-svg和Animated动画gradientTransform属性

如何通过使用Animated为react-native-svg中的属性gradientTransform设置动画?

    import React,{ useEffect,useState } from 'react'
    import { Dimensions,Animated } from 'react-native'

    import Svg,{
      Path,Defs,LinearGradient,Stop,Circle,Ellipse,G,Rect,ClipPath,AnimateTransform
    } from 'react-native-svg'

    const { width } = Dimensions.get('window')

    export const HomeBg = () => {
      const [rotateValue,setRotateValue] = useState(new Animated.Value(0))
      useEffect(() => {
        StartImageRotate()
      },[])

      function StartImageRotate() {
        rotateValue.setvalue(0)

        Animated.timing(rotateValue,{
          toValue: 360,duration: 3000,useNativeDriver: true
        }).start(() => StartImageRotate())
      }

      const RotateData = rotateValue.interpolate({
        inputRange: [0,1],outputRange: [0,360]
      })

      const AnimatedLinearGradient = Animated.createAnimatedComponent(
        LinearGradient
      )

      return (
        <Svg width={width} height="300" viewBox="0 0 377 246">
          <Defs>
            <ClipPath id="clip-path">
              <Rect width="377" height="246" fill="none" />
            </ClipPath>
            <ClipPath id="clip-path-2">
              <Path
                d="M260.89-439.51a547.51,547.51,0-72.39,4.77,0-72.39-4.77c-239.17,0-433.06,153.45-433.06,342.75S-123.06,246,116.11,246a549.21,549.21,72.39-4.77A549.21,260.89,246C500.06,694,92.54,694-96.76S500.06-439.51,260.89-439.51Z"
                fill="none"
              />  
            </ClipPath>  
            <LinearGradient  
              id="linear-gradient"  
              x1="119.9"  
              y1="-433.19"  
              x2="443.02"  
              y2="337.84"  
              gradientUnits="userSpaceonUse"  
            >  
              <Stop offset="0" stopColor="#0060ae" />  
              <Stop offset="0.36" stopColor="#314aa0" />  
              <Stop offset="1" stopColor="#ec1c24" />  
            </LinearGradient>  
            <LinearGradient  
              id="linear-gradient-2"  
              x1="150.21"  
              y1="267.76"  
              x2="60.47"  
              y2="-691.5"  
              gradientUnits="userSpaceonUse"  
            >  
              <Stop offset="0" stopColor="#0060ae" />  
              <Stop offset="0.36" stopColor="#314aa0" />  
              <Stop offset="0.85" stopColor="#e01f2c" />  
            </LinearGradient>  
            <LinearGradient  
              id="linear-gradient-3"  
              x1="69.29"  
              y1="258.45"  
              x2="163.05"  
              y2="-452.91"  
              gradientUnits="userSpaceonUse"  
            >  
              <Stop offset="0" stopColor="#0060ae" />  
              <Stop offset="0.36" stopColor="#314aa0" />  
              <Stop offset="0.8" stopColor="#e01f2c" />  
              <Stop offset="0.9" stopColor="#ec1c24" />  
            </LinearGradient>  
            <AnimatedLinearGradient  
              id="linear-gradient-4"  
              x1="271.6"  
              y1="-66.75"  
              x2="395.68"  
              y2="281.01"  
              gradientUnits="userSpaceonUse"  
              gradientTransform={`rotate(${RotateData})`}  
            >  
              <Stop offset="0" stopColor="#0060ae" />  
              <Stop offset="0.36" stopColor="#314aa0" />  
              <Stop offset="0.88" stopColor="#ec1c24" />  
            </AnimatedLinearGradient>  
          </Defs>  
          <G clip-path="url(#clip-path-2)">  
            <Ellipse  
              cx="260.89"  
              cy="-96.76"  
              rx="433.06"  
              ry="342.76"  
              fill="url(#linear-gradient)"  
            />  
            <Ellipse  
              cx="116.11"  
              cy="-96.76"  
              rx="433.06"  
              ry="342.76"  
              fill="url(#linear-gradient-2)"  
            />  
            <G opacity="0.5">  
              <Ellipse  
                cx="116.11"  
                cy="-96.76"  
                rx="433.06"  
                ry="342.76"  
                fill="url(#linear-gradient-3)"  
              />  
              <Ellipse. 
                cx="260.89". 
                cy="-96.76". 
                rx="433.06". 
                ry="342.76". 
                fill="url(#linear-gradient-4)". 
              />. 
            </G>. 
          </G>. 
        </Svg>. 
      ). 
    }. 

这将引发以下错误:screenshot

LinearGradient得到[Object object],但期望数字或字符串数​​组。

xuchong891101 回答:如何使用react-native-svg和Animated动画gradientTransform属性

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/2633111.html

大家都在问