RN动画

╰半夏微凉° 2022-06-01 09:56 310阅读 0赞

渐变动画 
    
          
           渐变动画是改变透明度实现的动画效果，从透明到不透明的效果
    
          
           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();