QML -- 》 动画分组（二）

Item{
    id:root;
    width: 480;
    height: 300;
    property int duration: 3000;　　// 设置时间3000ms
    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: root.width;　　// 宽度和root的宽度一致
        gradient: Gradient{   // 设置渐变色
            GradientStop{position: 0.0; color: "#00FF00" }
            GradientStop{position: 1.0; color: "#00803F" }
        }
    }
    Image {  // 添加图片
        id:ball   // 球
        x:20;y:240;
        source: "./1.png";
        MouseArea{　　// 鼠标事件
            anchors.fill:parent;
            onClicked: {
                ball.x = 20; ball.y = 240;
                anim.restart()　　// 点击时，重新加载动画
            }
        }
    }
    ParallelAnimation{　　// 平行动画
        id:anim
        SequentialAnimation{    // 连续动画
            NumberAnimation{   // 数字动画
                target: ball;    // 目标
                properties: "y";    // y坐标
                to:20;   // 到y的20
                duration: root.duration * 0.4;　　// 持续时间
            }
            NumberAnimation{
                target: ball;
                properties: "y";
                to:240;
                duration: root.duration * 0.6;
            }
        }
        NumberAnimation{
            target: ball;
            properties: "x";
            to:400;
            duration: root.duration;
        }

        RotationAnimation{　　// 旋转动画
            target: ball;
            properties: "rotation";
            from:0;
            to:720;
            duration: root.duration*1.1
        }
    }
}