RN-Animated

渐变动画

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

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();

QQ20170912-153831.gif

弹性动画

        this.springValue = new Animated.Value(0.5);

  <View style={styles.container}>
                    <Animated.Image
                        style={{ left: 50, top: 50, width: 227, height: 200, transform: [{scale: this.springValue}] }}
                        source={{uri: 'https://s3.amazonaws.com/media-p.slid.es/uploads/alexanderfarennikov/images/1198519/reactjs.png'}}/>
                </View>

点击调用

  /*
        * 值的范围是0-1
        * 默认值越大，弹性越小，0.9到1之间的值小，弹性小
        * 默认值越小，弹性越大，0.1到1之间的值大，弹性大
        * 例如：默认值0.5，弹性到0.5，然后放大，大概会放大到1.3的样子，然后弹性慢慢减小，到达1
        * */
        this.springValue.setValue(0.5);
        Animated.spring(
            this.springValue,
            {
                toValue: 1,
                friction: 1
            }
        ).start()

默认值0.1.gif

默认值0.5.gif

默认值0.9.gif

LayoutAnimation view 改变位置动画

 this.state = {
            marginTop: 50
        };

 <View style={styles.container}>
                    <TouchableOpacity onPress = {()=>{
                        // 这个只是这个布局改变了才会有动画效果
                      //其实代码里只是调用了这一行LayoutAnimation.spring();,布局修改的时候就显得不那么生硬了

// 这样写也是可以的，整个页面的布局改变都会有动画效果
// componentWillUpdate() {
//        LayoutAnimation.spring();
//    }

                        LayoutAnimation.spring();
                        this.setState({marginTop:this.state.marginTop + 100})
                    }}
                                      style={{  width:120,
                                height:40,
                                alignItems:'center',
                                marginTop:this.state.marginTop,
                                justifyContent:'center',
                                backgroundColor:'#00ffff',
                                borderRadius:20}}>
                        <Text>Text DOWN</Text>
                    </TouchableOpacity>
                </View>

QQ20170912-164155.gif

多个动画效果顺序播放

Animated.sequence([
            Animated.timing(
                this.springValue,
                {
                    toValue: 1,
                    friction: 1
                }
            ),
            Animated.timing(
                this.springValue,
                {
                    toValue: 0.5,
                    friction: 1
                }
            )
        ]).start(()=>{this.loadAnimation()});

多个动画效果同时播放

Animated.parallel([
            Animated.timing(
                this.springValue,
                {
                    toValue: 1,
                    friction: 1
                }
            ),
            Animated.timing(
                this.springValue,
                {
                    toValue: 0.5,
                    friction: 1
                }
            )
        ]).start(()=>{this.loadAnimation()});

最后编辑于：2017.12.10 07:39:56

RN-Animated

推荐阅读更多精彩内容