如何使反应原生动画？

Question

How to make this transform with React-Native?

我想这种静态位置

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

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

动画到这个位置

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

怎么写动画代码？

Answer 1

您不能使用动画这样...看看Animated链接你需要做下一件事情：

<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 
      }), 

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

constructor(props) { 
     super(props); 
     this.state={ 
      anim: AnimateValue(0) 
     } 
    }