如何在React Native中使用PanResponder旋转视图

Question

我想创建一个动画视图，使用PanResponder这样旋转。

我想从角落旋转视图。我可以相对于translateX值旋转视图。但是我不知道如何根据tanslateY值旋转视图。

constructor(props) {
  super(props);

  this.state = {
     pan: new Animated.ValueXY()
  };
}

componentWillMount() {
  this._panResponder = PanResponder.create({
     onMoveShouldSetResponderCapture: () => true,
     onMoveShouldSetPanResponderCapture: () => true,
     onPanResponderGrant: (e, gestureState) => {
        this.state.pan.setOffset({
           x: this.state.pan.x._value, y: this.state.pan.y._value
        });
        this.state.pan.setValue({ x: 0, y: 0 });
     },
     onPanResponderMove: Animated.event([
        null, { dx: this.state.pan.x, dy: this.state.pan.y },
     ]),
  });
}

render() {
  let { pan } = this.state;
  let [translateX, translateY] = [pan.x, pan.y];

  const rotate = translateX.interpolate({
     inputRange: [-80, 0, 80],
     outputRange: ['-360deg', '0deg', '360deg']
  });

  return (
     <Animated.View style={[{
        height: 80,
        width: 80
     }, { transform: [{ rotate }] }]}>
        <View style={{
           position: "absolute",
           left: 0,
           top: 0,
           width: 20,
           height: 20,
           borderRadius: 10,

        }} {...this._panResponder.panHandlers}></View>
     </Animated.View>
  );
}

wix-editor-rotating-an-element