如何在React Native中制作微调器？我想通过PanResponder旋转盒子

Question

我正在尝试在本机反应中使用PanResponder以便在其中心旋转盒子。到目前为止，这是我的代码：

class Spinner extends React.Component {

 pan = new Animated.ValueXY();
 panResponder = PanResponder.create({
   onMoveShouldSetPanResponder: () => true,
   onPanResponderGrant: () => {
    this.pan.setOffset({
      x: this.pan.x._value,
      y: this.pan.y._value
    });
   },
   onPanResponderMove: Animated.event([
    null,
    { dx: this.pan.x, dy: this.pan.y }
   ]),
   onPanResponderRelease: () => {
    this.pan.flattenOffset();
   }

 });


 render() {

  const RotateValue = "10deg"

  return (

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

  )
}

}

'''

在此const RotateValue中，我试图使用this.pan.x和this.pan.y隐蔽到度值。我输入“ 10deg”以证明它将旋转10度。但是我迷失了如何完成我打算要做的事情。

任何帮助将不胜感激。非常感谢。

Answer 1

我认为您正在寻找的是一种称为插值的东西。您可以在这里找到更多有关它的信息：https://animationbook.codedaily.io/interpolate/#:~:text=The%20interpolate%20function%20allows%20animated,interpolate%20from%20other%20interpolate%20values.&text=What%20this%20is%20doing%20is,we%20are%20interpolating%20the%20opacity.

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

我知道这不是最准确或最佳的答案，但希望您能以某种方式找到帮助。