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

流暢的用戶界面

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

狀態(tài)和轉(zhuǎn)換

Qt Quick允許您在State對(duì)象中聲明各種UI狀態(tài)，這些狀態(tài)由基本狀態(tài)的屬性更改組成，可以作為組織UI邏輯的有用方式。Transitions是您可以與項(xiàng)目關(guān)聯(lián)的對(duì)象，用來(lái)定義其屬性因狀態(tài)更改而更改時(shí)將如何設(shè)置動(dòng)畫。

可以使用 Item::states 和 Item::transitions 屬性聲明項(xiàng)的狀態(tài)和轉(zhuǎn)換，狀態(tài)在項(xiàng)目的狀態(tài)列表屬性內(nèi)聲明，通常是組件的根項(xiàng)目。 在同一項(xiàng)目上定義的轉(zhuǎn)換用于動(dòng)畫狀態(tài)的變化。以下是一個(gè)示例：

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" }
}
]
}

動(dòng)畫屬性更改

 Behaviors可用于指定屬性更改時(shí)要使用的動(dòng)畫，然后這將應(yīng)用于所有更改，無(wú)論其來(lái)源如何。 以下示例使用behaviors為在屏幕上移動(dòng)的按鈕設(shè)置動(dòng)畫。

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

其他動(dòng)畫

并非所有動(dòng)畫都必須綁定到特定的屬性或狀態(tài)，您還可以更一般地創(chuàng)建動(dòng)畫，并在動(dòng)畫中指定目標(biāo)項(xiàng)目和屬性。 以下是執(zhí)行此操作的不同方法的一些示例：

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技術(shù)的Ribbon UI組件，QtitanRibbon致力于為Windows、Linux和Mac OS X提供功能完整的Ribbon組件。
• QtitanChart - Qt類圖表組件：是一個(gè)C ++庫(kù)，代表一組控件，這些控件使您可以快速地為應(yīng)用程序提供漂亮而豐富的圖表。
• QtitanDataGrid - Qt網(wǎng)格組件：提供了一套完整的標(biāo)準(zhǔn) QTableView 函數(shù)和傳統(tǒng)組件無(wú)法實(shí)現(xiàn)的獨(dú)特功能。使您能夠?qū)⒉煌瑏?lái)源的各類數(shù)據(jù)加載到一個(gè)快速、靈活且功能強(qiáng)大的可編輯網(wǎng)格中，支持排序、分組、報(bào)告、創(chuàng)建帶狀列、拖放按鈕和許多其他方便的功能。
• QtitanNavigation：QtitanNavigationDesignUI 組件是一組 GUI 控件，它實(shí)現(xiàn)了菜單、導(dǎo)航框、命令欄等導(dǎo)航界面，并讓您以更少的滾動(dòng)和點(diǎn)擊次數(shù)有效地查看所有實(shí)體（工作區(qū)、網(wǎng)格或其他項(xiàng)目）。
• QtitanDocking：允許您像 Visual Studio 一樣為您的偉大應(yīng)用程序配備可停靠面板和可停靠工具欄。黑色、白色、藍(lán)色調(diào)色板完全支持 Visual Studio 2019 主題！

Qt技術(shù)交流群：166830288      歡迎一起進(jìn)群討論