Question

我已经创建了一个微调器，它几乎可以按我的意愿工作。我将PanResponder与Animated.View结合使用，以便允许用户使用手指旋转对象（基本上只是在其中心旋转的盒子）。即使我已使微调器基本上按照我的意愿旋转，但它并不能平稳运行，并且随着我尝试使微调器绕一圈移动（沿其轴旋转）而继续波动。

这是我的代码：

class Spinner extends React.Component {

constructor(props){
  super(props);
  this.angleCalculation = this.angleCalculation.bind(this);
  this.state = {
    angleString: new Animated.Value(0)
  }
}

panResponder = PanResponder.create({
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onPanResponderGrant: (evt, gestureState) => 
  {this.angleCalculation(evt.nativeEvent.locationX,evt.nativeEvent.locationY)},
onPanResponderMove: (evt, gestureState) => 
  {this.angleCalculation(evt.nativeEvent.locationX,evt.nativeEvent.locationY)},
onPanResponderRelease: (evt, gestureState) => {
  {this.angleCalculation(evt.nativeEvent.locationX,evt.nativeEvent.locationY)}    }
});

angleCalculation(x,y){

xValue = x - 150
yValue = (y * -1) + 50

if ((xValue > 0) & (yValue < 0)) {
  angle = (Math.atan(yValue/xValue) * (180/Math.PI)) * -1
  this.state.angleString.setValue(angle)
}

if ((xValue < 0) & (yValue < 0)) {
  angle = ((Math.atan(yValue/xValue) * (180/Math.PI)) - 180) * -1
  this.state.angleString.setValue(angle)
}

if ((xValue < 0) & (yValue > 0)) {
  angle = ((Math.atan(yValue/xValue) * (180/Math.PI)) - 180) * -1
  this.state.angleString.setValue(angle)
}

if ((xValue > 0) & (yValue > 0)) {
  angle = ((Math.atan(yValue/xValue) * (180/Math.PI)) * -1) + 360
  this.state.angleString.setValue(angle)
}

if ((xValue = 0) & (yValue > 0)) {
  angle = 270
}

if ((xValue = 0) & (yValue < 0)) {
  angle = 90
}

if ((xValue > 0) & (yValue = 0)) {
  angle = 0
}

if ((xValue < 0) & (yValue = 0)) {
  angle = 180
}

console.log(this.state.angleString)

}

render() {

const RotateValue = this.state.angleString.interpolate({
  inputRange: [0,360],
  outputRange: ['0deg','360deg'],
  extrapolate: 'clamp'
})

return (

  <View style={styles.test}>
    <Animated.View
      style={styles.box, {
        backgroundColor: "blue",
        width:300,
        height:100,
        transform:[{ rotate: RotateValue
        }],
      }}
      {...this.panResponder.panHandlers}
    />

  </View>

)
}
}

angularCalculation方法用于基于触摸事件的位置创建0到360度的网格。右侧为0度（x：某个值，y：0），并沿顺时针方向增加。

我要解决的问题是使其绕轴旋转时顺畅地旋转并紧贴手指。

谢谢！

微调器无法通过PanResponder和Animated.View

0 个答案: