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

问题描述

我想创建一个动画视图，使用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,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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）