RN动画

 
 

  
  

   
   

    
    

    
    
     
     

      
      

       
       
渐变动画

      
      

      
      
渐变动画是改变透明度实现的动画效果，从透明到不透明的效果

      
      
constructor(props) {
        super(props);
        this.fadeInAnimated = new Animated.Value(0); // 渐隐动画初始值，默认为0，透明
    }

      
      
<Animated.View style={[styles.downViewStyle, {opacity: this.fadeInAnimated}]}>
</Animated.View>

      
      
点击按钮，开始动画
      
      
 Animated.timing(this.fadeInAnimated, {
            toValue: 1, // 1为不透明
            duration: 500,
            easing: Easing.linear
        }).start();

      
      

       
       
旋转动画
      
      
      
      
        this.spinValue = new Animated.Value(0);

  // 利用 interpolate 方法将数值 0~1 映射到了 0deg~360deg
        const spin = this.spinValue.interpolate({
            inputRange: [0, 1],                // [0,0.5,1]改成这样会有不同的效果
            outputRange: ['0deg', '360deg']    //  ['0deg', '360deg','0deg']改成这样会有不同的效果，
        });

      
      
 <Animated.Image
    style={{
         width: 227,
         height: 200,
         transform: [{rotate: spin}] }}
         source={{uri: 'https://s3.amazonaws.com/media-p.slid.es/uploads/alexanderfarennikov/images/1198519/reactjs.png'}}
 />

      
      
点击按钮开始动画
      
      
springAnimal(){
        this.spinValue.setValue(0);
        Animated.timing(
            this.spinValue,
            {
                toValue: 1, // 此处的1 已经被上面的spin映射过了， [0, 1] 》 ['0deg', '360deg']
                duration: 4000,
                easing: Easing.linear
            }
        ).start();
    }

      
      

       
       
从左到右，再从右到左动画
      
      
      
      
其实就是改变marginLeft的值，
同理：也可以改变marginTop等的值来实现不同的效果
在同理：也可以实现opacity（透明度不断地透明-不透明-透明）、margins（组件的上下左右移动）、text sizes （字体的不断变化）和 rotation（3D效果） 等的效果
      
      
        this.animatedValue = new Animated.Value(0);


      
      
 const movingMargin = this.animatedValue.interpolate({
            inputRange: [0, 0.3, 1], // 0-0.3     0.3-1
            outputRange: [0, 300, 0] // 0-300     300-0     速度会不一样
        });

      
      
<Animated.View
    style={{
        marginLeft: movingMargin,
        marginTop: 10,
        height: 30,
        width: 40,
        backgroundColor: 'orange'                  
    }}             
/>

      
      
点击调用动画
      
      
 this.animatedValue.setValue(0);
        Animated.timing(
            this.animatedValue,
            {
                toValue: 1,
                duration: 2000,
                easing: Easing.linear
            }
        ).start();

      
      

       
       
字体的变大变小
      
      
      
      
 const textSize = this.animatedValue.interpolate({
            inputRange: [0, 0.5, 1],
            outputRange: [18, 32, 18]
        });

      
      
<Animated.Text
                    style={{
                      fontSize: textSize,
                      marginTop: 10,
                      color: 'green'}} >
                    Animated Text!
                </Animated.Text>

      
      
调用
      
      
 this.animatedValue.setValue(0);
        Animated.timing(
            this.animatedValue,
            {
                toValue: 1,
                duration: 2000,
                easing: Easing.linear
            }
        ).start();