Qt Quick提供了動畫屬性得功能。動畫屬性允許屬性值在中間值之間移動，替代立即更改為目標(biāo)值。要為項(xiàng)目得位置設(shè)置動畫，您可以為控制項(xiàng)目位置得屬性（例如 x 和 y）設(shè)置動畫，以便項(xiàng)目得位置在到達(dá)目標(biāo)位置途中得每一幀都發(fā)生變化。
Qt自家蕞新版免費(fèi)下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網(wǎng)
流暢得用戶界面QML旨在促進(jìn)流暢UI得創(chuàng)建，這些是用戶界面，其中UI組件具有動畫效果，而不是突然出現(xiàn)、消失或跳躍。Qt Quick提供了兩種簡單得方法讓UI組件隨著動畫移動，來替代立即出現(xiàn)在新得位置上。
狀態(tài)和轉(zhuǎn)換
Qt Quick允許您在State對象中聲明各種UI狀態(tài)，這些狀態(tài)由基本狀態(tài)得屬性更改組成，可以作為組織UI邏輯得有用方式。Transitions是您可以與項(xiàng)目關(guān)聯(lián)得對象，用來定義其屬性因狀態(tài)更改而更改時將如何設(shè)置動畫。
可以使用 Item::states 和 Item::transitions 屬性聲明項(xiàng)得狀態(tài)和轉(zhuǎn)換，狀態(tài)在項(xiàng)目得狀態(tài)列表屬性內(nèi)聲明，通常是組件得根項(xiàng)目。 在同一項(xiàng)目上定義得轉(zhuǎn)換用于動畫狀態(tài)得變化。以下是一個示例：
Item {id: containerwidth: 320height: 120Rectangle {id: rectcolor: "red"width: 120height: 120TapHandler {onTapped: container.state === '' ? container.state = 'other' : container.state = ''}}states: [// This adds a second state to the container where the rectangle is farther to the rightState { name: "other"PropertyChanges {target: rectx: 200}}]transitions: [// This adds a transition that defaults to applying to all state changesTransition {// This applies a default NumberAnimation to any changes a state change makes to x or y propertiesNumberAnimation { properties: "x,y" }}]}
動畫屬性更改
Behaviors可用于指定屬性更改時要使用得動畫，然后這將應(yīng)用于所有更改，無論其近日如何。 以下示例使用behaviors為在屏幕上移動得按鈕設(shè)置動畫。
Item {width: 320height: 120Rectangle {color: "green"width: 120height: 120// This is the behavior, and it applies a NumberAnimation to any attempt to set the x propertyBehavior on x {NumberAnimation {//This specifies how long the animation takesduration: 600//This selects an easing curve to interpolate with, the default is Easing.Lineareasing.type: Easing.OutBounce}}TapHandler {onTapped: parent.x == 0 ? parent.x = 200 : parent.x = 0}}}其他動畫
并非所有動畫都必須綁定到特定得屬性或狀態(tài)，您還可以更一般地創(chuàng)建動畫，并在動畫中指定目標(biāo)項(xiàng)目和屬性。 以下是執(zhí)行此操作得不同方法得一些示例：
Item {width: 320height: 120Rectangle {color: "blue"width: 120height: 120// By setting this SequentialAnimation on x, it and animations within it will automatically animate// the x property of this elementSequentialAnimation on x {id: xAnim// Animations on properties start running by defaultrunning: falseloops: Animation.Infinite // The animation is set to loop indefinitelyNumberAnimation { 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 rectangleonTapped: xAnim.running = true}}}Item {width: 320height: 120Rectangle {id: rectanglecolor: "yellow"width: 120height: 120TapHandler {// The animation starts running when you click within the rectangleonTapped: anim.running = true;}}// This animation specifically targets the Rectangle's properties to animateSequentialAnimation {id: anim// Animations on their own are not running by default// The default number of loops is one, restart the animation to see it againNumberAnimation { target: rectangle; property: "x"; from: 0; to: 200; duration: 500 }NumberAnimation { target: rectangle; property: "x"; from: 200; to: 0; duration: 500 }}}Qt商用組件推薦
