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 } } }