我有下面的 svg 路径,它在每个value
状态变化中成功地围绕原点旋转,其中值是一些度数值:
<Path
transform={{
rotation: this.state.value,
originX: width / 2,
originY: height / 2
}}
d={`M ${width * 0.5} ${height * 0.5} L${width * 0.75} ${height * 0.75}`} //the actual path does not matter
fill={Colors.black}
stroke={Colors.black}
/>
我每隔约 20 毫秒调用一次 setState value
,但这还不够平滑,+ 这不是推荐的过渡方式。我想要实现的是使用动画 API 为旋转设置动画,以实现更平滑的旋转。
我尝试将我的value
状态设为Animated.Value
. 然后制作Path
aAnimated.createAnimatedComponent(Path)
并调用:
Animated.timing(this.state.value, {
toValue: newDegreesValue,
duration: 1000,
useNativeDriver: true
}).start();
然后我像这样渲染路径:
<Path
style={transform:[{
rotate: this.state.value
}]}
d={`M ${width * 0.5} ${height * 0.5} L${width * 0.75} ${height * 0.75}`} //the actual path does not matter
fill={Colors.black}
stroke={Colors.black}
/>
这与使用 state 的先前工作代码完全不同。一个原因是动画 API 不支持的 originX、originY 值,我不知道如何替换,但我不确定这是唯一的原因,也许与属性也rotate
有所不同?rotation
所以,问题是,如何使用动画 api 来实现不断调用 setState 的代码的相同结果?