如何在 React-Native 上平滑旋转线而不使用插值方法答案

【问题标题】：How to smoothly rotate line without interpolate method on React-Native如何在 React-Native 上平滑旋转线而不使用插值方法
【发布时间】：2019-10-06 18:25:31
【问题描述】：

我的屏幕中间有一条线，它与 Accelerometer 配合使用，可以移动它的顶部或底部，也应该旋转。我正在使用 LayoutAnimation，但似乎这种方法不允许我平滑地旋转我的线条，它与 'top' 属性配合得很好，但它不适用于旋转

我尝试安装 react-native-canvas，但是这个包完全破坏了我的应用程序，所以我必须重新创建它；D（它让我很生气）。我也尝试用插值制作这个动画，但它似乎在固定度数下工作，看起来很奇怪

componentDidMount(){
    setUpdateIntervalForType(SensorTypes.accelerometer, 150);
    const subscription = accelerometer.subscribe(({ x, y, z }) =>{
        let d = getAngles(x,y,z);
        this.updateValues(d.roll,d.pitch);
      }
    );
  }

updateValues(roll,pitch){
    LayoutAnimation.configureNext(CustomLayoutAnimation)
    this.setState({roll,pitch})
  }

render() {

    return (
...
    {<View style={{position:"relative",top:calculateOffset(this.state.roll,this.state.screenOffset)+"%",width:"80%",height:4,backgroundColor:"orange",transform:[{rotate:`${this.state.pitch}deg`}]}} />}
...
);
  }

我正在寻找一些可以使用的工作包或解决此问题的方法。

【问题讨论】：

你能在没有旋转效果的情况下显示当前输出的屏幕截图以获得更多细节吗？
当然，imgur.com/WYZdrQA
你只是想旋转线条？
是的，我实际上是通过插值对新旧值进行了此操作，但奇怪的是它看起来如此复杂，有什么好的决定吗？
您应该在插值中直接使用度数，而不是在字符串中连接您的数字。看看这个answer

标签： javascript react-native

【解决方案1】：

我通过插值和动画 API 解决了这个问题。虽然看起来很奇怪，但确实有效；）

【讨论】：

【解决方案2】：

试试这个：

<View
   style={{
      position:"relative",
      top: calculateOffset(this.state.roll,this.state.screenOffset)+"%",
      width: "80%",
      height: "80%",
      backgroundColor: "transparent",
      justifyContent: "center",
      transform:[{rotate:`${this.state.pitch}deg`}]}}
   }}
>
   <View
      style={{
         height: 4,
         backgroundColor: "orange",
         width: "100%"
      }}
   />
</View>

希望对你有帮助。

【讨论】：

有什么区别？