如何使用带有“%”定位值的 React Native Animated API？

Question

我有一个 SVG <line>，我想使用 React Native 的 Animated API 对其进行动画处理。特别是，我想使用 % 的相对定位为线条的 x1 和 x2 属性设置动画。但是，我无法将我的动画值与 "%" 字符串结合起来。以下代码导致 NaN% 或 [object Object]%:

import { Animated } from 'react-native';
import { Svg, Line } from 'react-native-svg';
const AnimatedLine = Animated.createAnimatedComponent(Line);

const myComponent = (props) => {
    //props.underlineX1 is something like: new Animated.Value(50)

    return(
        <Svg
            width="100%"
            height="100%">
            <AnimatedLine
                x1={`${props.underlineX1}%`} //or: x1={`${parseInt(props.underlineX1)}%`}
                x2={`${props.underlineX2}%`} //or: x2={`${parseInt(props.underlineX2)}%`}
                y1="40"
                y2="40"
                stroke={"green"}
                strokeWidth="2" />
        </Svg>
    )
}

当 props.underlineX1 = 50 时，我应该怎么做才能得到像 50% 这样的值？

编辑：

当使用 JSON.stringify(props.underlineX1) + "%" 方法时，我收到了正确的初始定位值，但是动画不会执行（如果我直接使用绝对值而不使用 "%" 的组合，效果很好).

Answer 1

为了将 Animated.Value 转换为您的百分比字符串，您需要像这样进行插值：

const x1 = props.underlineX1.interpolate({
  inputRange: [0, 100],
  outputRange: ['0%', '100%'],
});

（注意：这是假设您的动画值在 0-100 范围内）

如何使用带有“%”定位值的 React Native Animated API？

How to use react native Animated API with "%" positioning values?

reactjs

react-native

react-animated