QML进阶教程：三、动画分组（Grouped Animations）

前言：

如果想同时运行几个动画并把他们连接起来，或者在一个一个的运行，或者在两个动画之间执行一个脚本。动画分组
提供了很好的帮助，有两种方法来分组：平行与连续。可以使用SequentialAnimation（连续动画） 和ParallelAnimation（平行动画） 来实现它们，它们作为动画的容器来包含其它的动画元素。

代码实例：

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


}

运行轨迹：