QML Advanced Tutorial: 3. Grouped Animations

Foreword:

If you want to run several animations at the same time and connect them, either run one by one, or execute a script between two animations. Animation
grouping is a great help, and there are two ways to group them: parallel and continuous. You can use SequentialAnimation (continuous animation) and ParallelAnimation (parallel animation) to achieve them, they serve as animation containers to contain other animation elements.
write picture description here

Code example:

import QtQuick 2.0

Item {
    id: root
    width: 640
    height: 380
    property int duration: 3000

    // M1>>
    Rectangle {
        id: sky
        width: parent.width
        height: 200 
        //设置颜色渐变
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#0080FF" }
            GradientStop { position: 1.0; color: "#66CCFF" }
        }
    }
    Rectangle {
        id: ground
        anchors.top: sky.bottom
        anchors.bottom: root.bottom
        width: parent.width
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#00FF00" }
            GradientStop { position: 1.0; color: "#00803F" }
        }
    }
    // <<M1

    // M2>>
    Image {
        id: ball
        x: 0; y: root.height-height
        source: "assets/soccer_ball.png"

        MouseArea {
            anchors.fill: parent 
            //点击后初始化
            onClicked: {
                ball.x = 0;
                ball.y = root.height-ball.height;
                ball.rotation = 0;
                anim.restart()
            }
        }
    }
    // <<M2

    // M3>> 
    //平行动画
    ParallelAnimation {
        id: anim 
        //插入连续动画
        SequentialAnimation { 
            //Y方向上升
            NumberAnimation {
                target: ball
                properties: "y"
                to: 20
                duration: root.duration * 0.4 
                //设置缓冲曲线风格
                easing.type: Easing.OutCirc
            } 
            //Y方向下降
            NumberAnimation {
                target: ball
                properties: "y"
                to: root.height-ball.height
                duration: root.duration * 0.6
                easing.type: Easing.OutBounce
            }
        } 
        //X方向移动
        NumberAnimation {
            target: ball
            properties: "x"
            to: root.width-ball.width
            duration: root.duration
        } 
        //角度旋转
        RotationAnimation {
            target: ball
            properties: "rotation"
            to: 720
            duration: root.duration
        }
    }
    // <<M3


}

Running track:
write picture description here