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