QML 动画（组合动画）

在QML中，可以把多个动画组合成一个单一的动画。

组合动画的类型：

• ParallelAnimation   动画同时进行（并行）
• SequentialAnimation 动画按照顺序执行（顺序执行）

注意：将动画分组为“顺序动画”或“并行动画”后，无法单独启动和停止动画;顺序动画或并行动画必须作为一个组启动和停止。

ParallelAnimation的使用：

 使用时需要使用running开启

开启时，变换圆角、颜色和旋转角度 

Rectangle{
        id:rect1
        width: 200;height: 200
        x:150;y:150
        color: "lightBlue";radius: 10
     
        //创建一个并行的动画
        ParallelAnimation{
            running: true //开启并行动画

            NumberAnimation {  //修改圆角动画
                target: rect1
                properties: "radius"
                loops: Animation.Infinite
                duration:2000
                from: 10
                to:50
            }
            ColorAnimation {  //修改颜色动画
                target: rect1
                properties: "color"
                loops: Animation.Infinite
                duration:2000
                from:"lightBlue"
                to:"red"
            }
            RotationAnimation {  //修改角度动画
                target: rect1
                //properties: "rect1.rotation"
                loops: Animation.Infinite
                duration:2000
                from:0
                to:360
            }
        }

    }

 SequentialAnimation的使用

 需要使用running开启

 开启时每过两秒变换一种颜色

Rectangle{
        id:rect1
        width: 200;height: 200
        x:150;y:150
        color: "lightBlue";radius: 10

        SequentialAnimation{
            running: true
            ColorAnimation{
                target: rect1
                properties: "color"
                from: "white"
                to: "black"
                duration: 2000
            }
            ColorAnimation{
                target: rect1
                properties: "color"
                from: "black"
                to: "red"
                duration: 2000
            }
            ColorAnimation{
                target: rect1
                properties: "color"
                from: "red"
                to: "green"
                duration: 2000
            }
            ColorAnimation{
                target: rect1
                properties: "color"
                from: "green"
                to: "lightBlue"
                duration: 2000
            }
        }

    }

SequentialAnimation和渐变的使用

实现使用彩色动画将天空从白天淡化到黑夜

Rectangle{
        id:rect1
        width: 400;height: 600
        x:150;y:0
        color: "lightBlue";radius: 10
        gradient: Gradient {
              GradientStop {
                  position: 0.0
                  SequentialAnimation on color {
                      loops: Animation.Infinite
                      ColorAnimation { from: "#14148c"; to: "#0E1533"; duration: 5000 }
                      ColorAnimation { from: "#0E1533"; to: "#14148c"; duration: 5000 }
                  }
              }
              GradientStop {
                  position: 1.0
                  SequentialAnimation on color {
                      loops: Animation.Infinite
                      ColorAnimation { from: "#14aaff"; to: "#437284"; duration: 5000 }
                      ColorAnimation { from: "#437284"; to: "#14aaff"; duration: 5000 }
                  }
              }
          }
    }