QT QML動畫中有比較多的概念，初看有點頭大，我們先從三個基本概念說起：
-
狀態（state）：可視化組件的一組參數，決定可視化組件的顯示方式
每種狀態的不同參數，有變化（change）來表示;
狀態是理解爲一個QML對象，它是可以被繼承的，形成一個新的狀態；
可以在QML指定，直接不同的狀態； -
轉換（transition): 定義從一個狀態到另一個狀態的變化過程，在這個過程中，可以施加動畫，如果不施加動畫，效果和直接指定狀態的效果是一致的；
-
動畫（Animation）：QML可視化組件顯示效果改變的平滑過程
動畫的運行方式：
A：直接使用動畫，動畫 定義了可視化組件的某個顯示參數的開始值，結束值，或僅有結束值，直接調用即可
B: 通過轉換使用動畫
C: 通過行爲使用動畫，將行爲（behavior）定義在可視化組件的某個顯示參數上（如位置X值），在行爲中定義動畫，只要這個參數改變，即發生動畫； -
畫家（Animator）：是另一種形式的動畫，它是定義在QML的場景圖中，具有更高的可靠性；
其他還有比較細節的概念，可參見課程《QT QML零基礎動畫教程》；有16節視頻課，還有課程腦圖筆記。
先來看一個例子：
import QtQuick 2.12
import QtQuick.Controls 2.12
ApplicationWindow{
visible: true
width: 640
height: 480
title: qsTr("A11 數值型動畫")
Rectangle{
id: rect
width: 100
height: 100
color: "red"
state: "normal"
// mode1，直接使用，注意如果running=true（缺省狀態），直接執行，這裏不需要有target參數
//寫法1
NumberAnimation on x {
id: cmode1
running: false
from:200
to: 540
duration: 1000
}
// 寫法2
// PropertyAnimation on x {
// id:cmode1
// running: false
// to: 540
// duration: 1000
// }
// 寫法3
// PropertyAnimation {
// id:cmode1
// target: rect
// running: false
// properties: "x"
// to: 540
// duration: 1000
// }
// mode2,通過轉換設置動畫
states:[
State {
name: "normal"
PropertyChanges {
target: rect
x: 0
}
},
State {
name: "right"
PropertyChanges {
target: rect
x: 540
}
}
]
transitions: Transition {
to: "right"
NumberAnimation {
target: rect
properties: "x"
duration: 1000
}
}
// mode3, 通過Behavior使用
Behavior on x {
NumberAnimation {
duration: 1000
}
}
}
Button{
id: mode0
text: "原始狀態"
x: 10; y: 150
onClicked: {
// 注意0的作用，在非轉換動畫中，代碼不能識別可視化組件的狀態
rect.x = 0
rect.state = "normal"
}
}
Button{
id: mode1
y: 150
anchors.left: mode0.right
anchors.leftMargin: 10
text: "直接使用動畫"
onClicked: cmode1.start()
}
Button{
id:mode2
y:150
text: "轉換中的動畫"
anchors.left: mode1.right
anchors.leftMargin: 10
onClicked: rect.state = "right"
}
Button{
id:mode3
y:150
text: "行爲動畫"
anchors.left: mode2.right
anchors.leftMargin: 10
onClicked: rect.x = 540
}
}
在直接使用動畫中：
//寫法1
NumberAnimation on x {
id: cmode1
running: false
from:200
to: 540
duration: 1000
}
// 寫法2
// PropertyAnimation on x {
// id:cmode1
// running: false
// to: 540
// duration: 1000
// }
// 寫法3
// PropertyAnimation {
// id:cmode1
// target: rect
// running: false
// properties: "x"
// to: 540
// duration: 1000
// }
有三種不同的寫法，前兩種是動畫直接定義在可視化顯示屬性上，注意，PropertyAnimation是NumberAnimation的父類，第三種寫法，是在動畫內部定義了可視化組件的屬性。
需要說明的是，多個可視化組件的參數同時變化時，需要採用狀態和轉換的概念
看一下，狀態的定義
transitions: [
Transition {
from: "normal"
to: "lightblue"
PropertyAnimation{
properties: "color,width,height"
duration: 2000
easing.type: Easing.InOutQuad
}
}
]
整個代碼
import QtQuick 2.12
import QtQuick.Controls 2.12
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("A08 屬性動畫，在例子A02的基礎上修改")
Rectangle{
id:rect
x:10;y:10
width: 100
height: 100
state: "normal"
states: [
State {
name: "normal"
PropertyChanges {
target: rect
color:"red"
}
},
State {
name: "lightblue"
// 方式一，採用數組
// changes: [
// PropertyChanges {
// target:rect
// color:"lightblue"
// },
// PropertyChanges {
// target: rect
// width:200
// height:50
// }
// ]
// 方式二，直接定義在Changes中
PropertyChanges {
target: rect
color:"lightblue"
width:200
height:50
}
}
]
transitions: [
Transition {
from: "normal"
to: "lightblue"
PropertyAnimation{
properties: "color,width,height"
duration: 2000
easing.type: Easing.InOutQuad
}
}
]
}
Button{
id: b_changeState
x: 10;y:200
text: "變換狀態"
onClicked: rect.state = "lightblue"
}
Button{
id: b_recover
y:200
anchors.left: b_changeState.right
anchors.leftMargin: 10
text: "恢復"
onClicked: rect.state = "normal"
}
}
動畫的開始狀態
動畫的結束狀態
注意，寬度、高度、顏色均發生了變化，更多的例子，可參見課程《QT QML零基礎動畫教程》