翻譯|使用教程|編輯:龔雪|2021-12-09 10:59:27.077|閱讀 305 次
概述:本文主要介紹如何在QML中的動畫,歡迎下載框架產品體驗~
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
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技術交流群:166830288 歡迎一起進群討論
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自:慧都網