react-native-svg 中 <Rect /> 的动画宽度

Question

我对 <Rect /> 元素进行了简单的动画插值，但是我没有看到我的 ui 有任何变化，就好像宽度保持为 0。

我手动将我的最终值添加到组件中作为 width={149.12} 并且它正确显示了它，因此我现在有点困惑为什么它没有从动画中获取相同的值？

react-native@0.57.1

react-native-svg@7.03

定位 iOS 12

这里是完整的实现，本质上是一个包含当前值和总值的法力和健康条，即 50 和 100 应该显示矩形的一半宽度。（示例使用打字稿，但如果需要，答案可以使用纯 js）

import * as React from 'react'
import { Animated } from 'react-native'
import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg'
import { deviceWidth } from '../services/Device'

const barWidth = deviceWidth * 0.3454
const barHeight = barWidth * 0.093
const AnimatedRect = Animated.createAnimatedComponent(Rect)

/**
 * Types
 */
export interface IProps {
  variant: 'MANA' | 'HEALTH'
  currentValue: number
  totalValue: number
}

export interface IState {
  width: Animated.Value
}

/**
 * Component
 */
class HealthManaBar extends React.Component<IProps, IState> {
  state = {
    width: new Animated.Value(0)
  }

  componentDidMount() {
    const { currentValue, totalValue } = this.props
    this.animate(currentValue, totalValue)
  }

  componentDidUpdate({ currentValue, totalValue }: IProps) {
    this.animate(currentValue, totalValue)
  }

  animate = (current: number, total: number) =>
    Animated.timing(this.state.width, {
      toValue: current !== 0 ? current / total : 0,
      duration: 400
    }).start()

  render() {
    const { variant } = this.props
    const { width } = this.state

    return (
      <Svg width={barWidth} height={barHeight}>
        <Defs>
          <LinearGradient
            id={`HeathManaBar-gradient-${variant}`}
            x1="0"
            y1="0"
            x2="0"
            y2={barHeight}
          >
            <Stop
              offset="0"
              stopColor={variant === 'HEALTH' ? '#EC561B' : '#00ACE1'}
              stopOpacity="1"
            />
            <Stop
              offset="0.5"
              stopColor={variant === 'HEALTH' ? '#8D1B00' : '#003FAA'}
              stopOpacity="1"
            />
            <Stop
              offset="1"
              stopColor={variant === 'HEALTH' ? '#9F3606' : '#007C97'}
              stopOpacity="1"
            />
          </LinearGradient>
        </Defs>
        <AnimatedRect
          x="0"
          y="0"
          rx="3"
          ry="3"
          width={width.interpolate({
            inputRange: [0, 1],
            outputRange: [0, barWidth]
          })}
          height={barHeight}
          fill={`url(#HeathManaBar-gradient-${variant})`}
        />
      </Svg>
    )
  }
}

export default HealthManaBar

相关图书馆：https://github.com/react-native-community/react-native-svg

Answer 1

这在 react-native-svg 最初是不可能的，但目前正在研究解决方案，您可以在此处关注进度

https://github.com/react-native-community/react-native-svg/issues/803

Answer 2

尝试使用lottie-react-native

https://github.com/react-community/lottie-react-native

在我看来，这是在 React Native 中处理动画的最佳工具。

react-native-svg 中 <Rect /> 的动画宽度

Animating width of <Rect /> in react-native-svg

javascript

reactjs

typescript

react-native

react-native-svg