1.Animation简介
Animation类型提供了四个属性：
- alwaysRunToEnd：该属性接收布尔类型的参数。该属性保存动画是否运行到完成才停止。当loops属性被设置时，这个属性是最有用的，因为动画将正常播放结束，但不会重新启动。
- loops：该属性接收int类型的参数。该属性保存播放动画的次数。默认是1，如果该属性设置为
Animation.Infinite时，动画将不断重复，直到显式停止（将running属性设置为false，或者调用stop()方法）。 - paused：该属性接布尔类型的参数。该属性标识动画是否暂停。设置paused属性可以控制动画是否暂停。
- running：该属性接收布尔类型的参数。该属性标识动画当前是否正在运行。
Animation类型提供六种方法：
- complete()：停止动画，跳转到最终属性值。如果动画没有运行，调用此方法将没有效果。在调用complete()之后，running属性将被设置为false。与stop()不同，complete()会立即将动画快进到结束位置。例如下列代码：
- pause()：该方法将暂停动画。如果动画已经暂停或者处于未运行状态，调用该方法将没有效果。在调用pause()之后，pause属性将被设置为true。
- restart()：该方法将重新开始动画。该方法理解成是stop和start的组合：先调用stop()停止动画，然后再调用start()开始动画。
- resume()：恢复暂停的动画。如果动画没有被暂停或没有运行，调用此方法将没有效果。在调用resume()之后，pause属性将被设置为false。
- start()：该方法将开始动画。如果动画已经运行了，调用该方法将没有效果。在调用start()之后，running属性将被设置为true。
- stop()：停止动画。如果动画没有运行，调用该方法将不起作用。在调用stop()之后，running和paused属性都将被设置为false。通常情况下，stop()会立即停止动画，并且动画不会对属性值产生进一步的影响。
在QML用于描述动画和转场的类型如下表所示：
| 名称 | 解释 |
|---|---|
| Transition | 表示状态变化时的动画转换 |
| SequentialAnimation | 串行运行动画 |
| ParallelAnimation | 并行运行动画 |
| Behavior | 为属性更改指定默认动画 |
| PropertyAction | 设置动画期间的属性更改 |
| PauseAnimation | 用于在动画过程中暂停动画 |
| SmoothedAnimation | 该类型允许属性平滑的跟踪值 |
| SpringAnimation | 允许属性以类似弹簧的运动方式跟踪一个值 |
| ScriptAction | 在动画过程中运行脚本 |
基于数值的属性动画类型:
| 名称 | 解释 |
|---|---|
| AnchorAnimation | Anchor变化动画 |
| NumberAnimation | 数值改变动画 |
| ColorAnimation | 颜色改变动画 |
| ParentAnimation | 父值变化动画 |
| PathAnimation | 路径改变动画 |
| PropertyAnimation | 属性改变动画 |
| RotationAnimation | 旋转值改变动画 |
| Vector3dAnimation | QVector3d值改变动画 |
2.示例
示例1：通过start方法来启动动画。设置了两个动画，一个改变颜色，一个改变透明度
Window {
visible: true
width: 400
height: 400
title: qsTr("Hello World")
Rectangle {
id: rect
width: 75
height: 75
color: "blue"
opacity: 1.0
MouseArea {
anchors.fill: parent
onClicked: {
animateColor.start()
animateOpacity.start()
}
}
PropertyAnimation {
id: animateColor
target: rect
properties: "color"
to: "red"
duration: 2000
}
NumberAnimation {
id: animateOpacity
target: rect
properties: "opacity"
from:0.1
to: 1
duration: 2000
}
}
}
示例2：我们还可以使用<Animation> on <Property>语句来设计动画，该语句将直接指定将要动画的属性，以下设置了3个动画。
Window {
visible: true
width: 400
height: 400
title: qsTr("Hello World")
Rectangle {
id: rect
width: 100; height: 100
color: "red"
PropertyAnimation on x { //直接修改控件的位置
to: 100
duration: 1000
}
PropertyAnimation on y {
to: 100
duration: 1000
}
PropertyAnimation on color {
to: "yellow"
duration: 1000
}
}
} 
示例3：做了一个串行动画，先从yellow变为red，再从red变为blue
Window {
visible: true
width: 400
height: 400
title: qsTr("Hello World")
Rectangle {
width: 100
height: 100
color: "yellow"
SequentialAnimation on color {
ColorAnimation { to: "red"; duration: 1000 }
ColorAnimation { to: "blue"; duration: 1000 }
}
}
}示例4：使用state和Transition。
Window {
visible: true
width: 400
height: 400
title: qsTr("Hello World")
Rectangle {
width: 75
height: 75
id: button
state: "RELEASED"
radius: 5
MouseArea {
anchors.fill: parent
onPressed: button.state = "PRESSED"
onReleased: button.state = "RELEASED"
}
states: [
State {
name: "PRESSED"
PropertyChanges { target: button; color: "blue"}
},
State {
name: "RELEASED"
PropertyChanges { target: button; color: "red"}
}
]
transitions: [
Transition {
from: "PRESSED"
to: "RELEASED"
ColorAnimation { target: button; duration: 100}
},
Transition {
from: "RELEASED"
to: "PRESSED"
ColorAnimation { target: button; duration: 100}
}
]
}
}示例5：使用Behavior定义
Window {
visible: true
width: 400
height: 400
title: qsTr("Hello World")
Rectangle {
id: rect
width: 100
height: 100
color: "red"
Behavior on width {
NumberAnimation { duration: 1000 }
}
Behavior on x{
NumberAnimation{duration: 1000}
}
Behavior on color{
ColorAnimation {duration: 1000}
}
Behavior on radius{
NumberAnimation{duration:1000}
}
MouseArea {
anchors.fill: parent
onClicked: {
rect.width = 50
rect.x = 100
rect.color = "blue"
rect.radius = 50
}
}
}
}
