Wie mache ich das mit react-native animieren?

Question

How to make this transform with React-Native?

Ich mag diese statische Position

constructor(props) { 
     super(props); 
     this.state={ 
      loaded:false, 

      transform:[{ perspective: 0 }, 
         { translateX: width }, 
         { rotateY: '0deg'}], 
      isMenuOpen:false, 
     } 
    } 

belebte auf diese Position

Animated.timing(
       this.state.transform, 
       {toValue:[{ perspective: 850 }, 
          { translateX: -width * 0.24 }, 
          { rotateY: '60deg'}]}, 
      ).start(); 

wie die Animation Code schreiben?

Answer 1

Sie können nicht Animation verwenden in so wie man sich das anschaut ... Schau dir Animated an, den Link musst du als nächstes machen :

<MyComponent style={{ 
      transform:[{ perspective: this.state.anim.interpolate({ 
            inputRange: [0, 1], 
            outputRange: [0, 850], 
        })}, 
        { translateX: this.state.anim.interpolate({ 
            inputRange: [0, 1], 
            outputRange: [width, -width * 0.24], 
        })}, 
        { rotateY: this.state.anim.interpolate({ 
            inputRange: [0, 1], 
            outputRange: ["0deg", "60deg"], 
        })}], 
     }], 
    }}/> 

------ //// ------

  Animated.timing(this.state.anim, { 
       toValue: 1 
      }), 

------ //// --------