时间戳

首页 > 解决方案 > 使用 react-native 动画 api 与原点进行 react-native-svg 旋转的等价物是什么

react-native - 使用 react-native 动画 api 与原点进行 react-native-svg 旋转的等价物是什么

问题描述

我有下面的 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. 然后制作PathaAnimated.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 的代码的相同结果？

标签： react-nativeanimationreact-native-svg

解决方案

你需要使用插值


const animation=this.state.value.interpolate({
  inputRange: [0, 360],
  outputRange: ['0deg', '360deg'],
});
<Path
   style={transform:[{
      rotate:animation
   }]}

推荐阅读