如何使用带有"%“定位值的react原生动画API？
如何使用带有"%“定位值的react原生动画API？
提问于 2020-04-16 11:24:55
我有一个SVG <line>，我想使用react原生的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) + "%"方法时，我收到了正确的初始定位值，但是动画不会被执行(如果我不使用"%"的组合直接使用绝对值，效果会很好)。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-04-16 15:25:58
为了将Animated.Value转换为百分比字符串，您需要像这样进行插值：
const x1 = props.underlineX1.interpolate({
inputRange: [0, 100],
outputRange: ['0%', '100%'],
});(注意:这是假设您的动画值将在0-100范围内)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61242178
复制相关文章
相似问题
腾讯云开发者
