React Native 加载等待动画

【1】先看效果图

QQ20170706-110608.gif

【2】直接上核心代码四个小圆圈

   loopAnimation() {
        this.state.jumpOne.flattenOffset();
        this.state.jumpTwo.flattenOffset();
        this.state.jumpThird.flattenOffset();
        this.state.jumpFor.flattenOffset();
        Animated.parallel([  //并行组合
            //Animated.sequence([ //顺序动画
            Animated.timing(this.state.jumpOne, {
                toValue: {x: 0, y: -100},
                duration: 600,
                delay: 200,
                easing: Easing.linear,
            }).start(()=> {
                Animated.timing(this.state.jumpOne, {
                    toValue: {x: 0, y: 0},
                    duration: 600,
                    easing: Easing.linear,
                    delay:600,
                }).start();
            }),
            Animated.timing(this.state.jumpTwo, {
                toValue: {x: 0, y: -100},
                duration: 600,
                delay: 400,
                easing: Easing.linear,
            }).start(()=> {
                Animated.timing(this.state.jumpTwo, {
                    toValue: {x: 0, y: 0},
                    duration: 600,
                    easing: Easing.linear,
                    delay:600,
                }).start();

            }),
            Animated.timing(this.state.jumpThird, {
                toValue: {x: 0, y: -100},
                duration: 600,
                delay: 600,
                easing: Easing.linear,
            }).start(()=> {
                Animated.timing(this.state.jumpThird, {
                    toValue: {x: 0, y: 0},
                    duration: 600,
                    easing: Easing.linear,
                    delay:600,
                }).start();
            }),
            Animated.timing(this.state.jumpFor, {
                toValue: {x: 0, y: -100},
                duration: 600,
                delay: 800,
                easing: Easing.linear,
            }).start(()=> {
                Animated.timing(this.state.jumpFor, {
                    toValue: {x: 0, y: 0},
                    duration: 600,
                    easing: Easing.linear,
                    delay:600,
                }).start();
            }),

            // ]),

        ]).start();
    }

文字动画

  loopTextAnimation() {
        this.state.textAnimated.setValue(0);
        Animated.timing(this.state.textAnimated, {
            toValue: 1,
            duration: 2200,//
            delay: 200,
            easing: Easing.linear,
        }).start();


    }