到目前為止，我們主要研究了一些簡單的圖形元素以及如何安排和操作它們。
本章是關於如何通過動畫使這些變化更有趣。
動畫是現代光滑用戶界面的關鍵基礎之一，可以通過狀態、過渡和動畫在用戶界面中使用。每個狀態定義了一組屬性更改，並且可以與狀態更改的動畫相結合。這些變化被描述為從一種狀態到另一種狀態的轉換。
除了在過渡期間使用動畫外，它們還可以作為由一些腳本事件觸發的獨立元素使用。
Animations
動畫應用於屬性更改。當屬性值發生變化時，動畫定義了從一個值到另一個值的插值曲線。這些動畫曲線創造了從一個值到另一個值的平滑過渡。
動畫由一系列要動畫的目標屬性、插值曲線的緩和曲線和持續時間定義。Qt Quick中的所有動畫都由相同的計時器控制，因此是同步的。這提高了動畫的性能和視覺質量。
動畫使用值填入來控制屬性的變化
這是一個基本概念。QML基於元素、屬性和腳本。每個元素都提供了幾十個屬性，每個屬性都等著被你動畫化。在書中，你會看到這是一個壯觀的競技場。
你會發現自己看著一些動畫，只是欣賞他們的美麗，還有你的創作天賦。請記住:動畫控制屬性的變化，每個元素都有幾十個屬性供您使用。
釋放力量!
// AnimationExample.qml
import QtQuick
Image {
id: root
source: "assets/background.png"
property int padding: 40
property int duration: 4000
property bool running: false
Image {
id: box
x: root.padding;
y: (root.height-height)/2
source: "assets/box_green.png"
NumberAnimation on x {
to: root.width - box.width - root.padding
duration: root.duration
running: root.running
}
RotationAnimation on rotation {
to: 360
duration: root.duration
running: root.running
}
}
MouseArea {
anchors.fill: parent
onClicked: root.running = true
}
}上面的例子展示了一個應用在x和rotation屬性上的簡單動畫。每個動畫的持續時間為4000毫秒(msec)。在x上的動畫將x坐標從對象逐漸移動到240px。旋轉時的動畫從當前角度運行到360度。這兩個動畫並行運行，並在單擊MouseArea時啟動。
你可以通過改變to和duration屬性來處理動畫，或者你可以添加另一個動畫(例如，在不透明度甚至是比例上)。把這些結合起來，看起來就像這個物體消失在太空深處。試試吧!
Animation Elements
有幾種類型的動畫元素，每種都針對特定的用例進行了優化。以下是最突出的動畫列表:
- PropertyAnimation - 動畫屬性值的變化
- NumberAnimation - 動畫qreal-type值的變化
- ColorAnimation - 動畫顏色值的變化
- RotationAnimation - 動畫旋轉值的變化
除了這些基本的和廣泛使用的動畫元素，Qt Quick還為特定的用例提供了更專業的動畫:
- PauseAnimation - 為動畫提供暫停
- SequentialAnimation - 允許動畫按順序運行
- ParallelAnimation - 允許動畫並行運行
- AnchorAnimation - 動畫錨值的變化
- ParentAnimation - 動畫父值的變化
- SmoothedAnimation - 允許屬性平滑地跟蹤值
- SpringAnimation - 允許屬性以類似彈簧的運動跟蹤值
- PathAnimation - 沿路徑動畫一個項目
- Vector3dAnimation - 動畫QVector3d值的變化
稍後我們將學習如何創建一個動畫序列。在製作更複雜的動畫時，有時需要在正在進行的動畫中更改屬性或運行腳本。為此Qt Quick提供了動作元素，可以在其他動畫元素可以使用的任何地方使用:
- PropertyAction - 指定在動畫期間立即更改屬性
- ScriptAction - 定義要在動畫期間運行的腳本
主要的動畫類型將在本章中使用小的，集中的例子來討論。
Applying Animations
動畫可以以以下幾種方式應用:
- Animation on property - 元素完全加載後自動運行
- Behavior on property - 屬性值更改時自動運行
- Standalone Animation - 當使用start()顯式啟動動畫或將running設置為true時運行(例如通過屬性綁定)
稍後我們還將了解如何在狀態轉換中使用動畫。
Clickable Image V2
為了演示動畫的用法，我們重用了前面章節中的ClickableImage組件，並用文本元素擴展了它。
參考連結
https://www.qt.io/product/qt6/qml-book/ch05-fluid-fluid-elements