Qt Quick提供了動畫屬性的功能。動畫屬性允許屬性值在中間值之間移動，替代立即更改為目標值。要為項目的位置設置動畫，您可以為控制項目位置的屬性（例如 x 和 y）設置動畫，以便項目的位置在到達目標位置途中的每一幀都發生變化。

流暢的用戶界面

QML旨在促進流暢UI的創建，這些是用戶界面，其中UI組件具有動畫效果，而不是突然出現、消失或跳躍。Qt Quick提供了兩種簡單的方法讓UI組件隨著動畫移動，來替代立即出現在新的位置上。

狀態和轉換

Qt Quick允許您在State對象中聲明各種UI狀態，這些狀態由基本狀態的屬性更改組成，可以作為組織UI邏輯的有用方式。Transitions是您可以與項目關聯的對象，用來定義其屬性因狀態更改而更改時將如何設置動畫。

可以使用 Item::states 和 Item::transitions 屬性聲明項的狀態和轉換，狀態在項目的狀態列表屬性內聲明，通常是組件的根項目。 在同一項目上定義的轉換用于動畫狀態的變化。以下是一個示例：

Item {
id: container
width: 320
height: 120

Rectangle {
id: rect
color: "red"
width: 120
height: 120

TapHandler {
onTapped: container.state === '' ? container.state = 'other' : container.state = ''
}
}
states: [
// This adds a second state to the container where the rectangle is farther to the right

State { name: "other"

PropertyChanges {
target: rect
x: 200
}
}
]
transitions: [
// This adds a transition that defaults to applying to all state changes

Transition {

// This applies a default NumberAnimation to any changes a state change makes to x or y properties
NumberAnimation { properties: "x,y" }
}
]
}

動畫屬性更改

 Behaviors可用于指定屬性更改時要使用的動畫，然后這將應用于所有更改，無論其來源如何。 以下示例使用behaviors為在屏幕上移動的按鈕設置動畫。

Item {
width: 320
height: 120

Rectangle {
color: "green"
width: 120
height: 120

// This is the behavior, and it applies a NumberAnimation to any attempt to set the x property
Behavior on x {

NumberAnimation {
//This specifies how long the animation takes
duration: 600
//This selects an easing curve to interpolate with, the default is Easing.Linear
easing.type: Easing.OutBounce
}
}

TapHandler {
onTapped: parent.x == 0 ? parent.x = 200 : parent.x = 0
}
}
}

其他動畫

并非所有動畫都必須綁定到特定的屬性或狀態，您還可以更一般地創建動畫，并在動畫中指定目標項目和屬性。 以下是執行此操作的不同方法的一些示例：

Item {
width: 320
height: 120

Rectangle {
color: "blue"
width: 120
height: 120

// By setting this SequentialAnimation on x, it and animations within it will automatically animate
// the x property of this element
SequentialAnimation on x {
id: xAnim
// Animations on properties start running by default
running: false
loops: Animation.Infinite // The animation is set to loop indefinitely
NumberAnimation { from: 0; to: 200; duration: 500; easing.type: Easing.InOutQuad }
NumberAnimation { from: 200; to: 0; duration: 500; easing.type: Easing.InOutQuad }
PauseAnimation { duration: 250 } // This puts a bit of time between the loop
}

TapHandler {
// The animation starts running when you click within the rectangle
onTapped: xAnim.running = true
}
}
}
Item {
width: 320
height: 120

Rectangle {
id: rectangle
color: "yellow"
width: 120
height: 120

TapHandler {
// The animation starts running when you click within the rectangle
onTapped: anim.running = true;
}
}

// This animation specifically targets the Rectangle's properties to animate
SequentialAnimation {
id: anim
// Animations on their own are not running by default
// The default number of loops is one, restart the animation to see it again

NumberAnimation { target: rectangle; property: "x"; from: 0; to: 200; duration: 500 }

NumberAnimation { target: rectangle; property: "x"; from: 200; to: 0; duration: 500 }
}
}

Qt商用組件推薦

• QtitanRibbon - Ribbon UI組件：是一款遵循Microsoft Ribbon UI Paradigm for Qt技術的Ribbon UI組件，QtitanRibbon致力于為Windows、Linux和Mac OS X提供功能完整的Ribbon組件。
• QtitanChart - Qt類圖表組件：是一個C ++庫，代表一組控件，這些控件使您可以快速地為應用程序提供漂亮而豐富的圖表。
• QtitanDataGrid - Qt網格組件：提供了一套完整的標準 QTableView 函數和傳統組件無法實現的獨特功能。使您能夠將不同來源的各類數據加載到一個快速、靈活且功能強大的可編輯網格中，支持排序、分組、報告、創建帶狀列、拖放按鈕和許多其他方便的功能。
• QtitanNavigation：QtitanNavigationDesignUI 組件是一組 GUI 控件，它實現了菜單、導航框、命令欄等導航界面，并讓您以更少的滾動和點擊次數有效地查看所有實體（工作區、網格或其他項目）。
• QtitanDocking：允許您像 Visual Studio 一樣為您的偉大應用程序配備可停靠面板和可停靠工具欄。黑色、白色、藍色調色板完全支持 Visual Studio 2019 主題！

Qt技術交流群：166830288      歡迎一起進群討論