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


    }