Animationen
Qt Quick bietet die Möglichkeit, Eigenschaften zu animieren. Durch die Animation von Eigenschaften können sich die Eigenschaftswerte über Zwischenwerte hinweg verändern, anstatt sofort auf den Zielwert zu springen. Um die Position eines Elements zu animieren, können Sie die Eigenschaften animieren, die die Position des Elements steuern – beispielsweise x und y –, sodass sich die Position des Elements in jedem Frame auf dem Weg zur Zielposition verändert.
Flüssige Benutzeroberflächen
QML wurde entwickelt, um die Erstellung flüssiger Benutzeroberflächen zu erleichtern. Dabei handelt es sich um Benutzeroberflächen, bei denen die UI-Komponenten animiert werden, anstatt abrupt zu erscheinen, zu verschwinden oder zu springen. „ Qt Quick “ bietet zwei einfache Möglichkeiten, UI-Komponenten mit einer Animation zu verschieben, anstatt sie sofort an ihrer neuen Position erscheinen zu lassen.
Zustände und Übergänge
Qt Quick ermöglichen es Ihnen, verschiedene UI-Zustände in „ State “-Objekten zu deklarieren. Diese Zustände bestehen aus Eigenschaftsänderungen gegenüber einem Grundzustand und können eine nützliche Methode zur Organisation Ihrer UI-Logik darstellen. Übergänge sind Objekte, die Sie einem Element zuordnen können, um zu definieren, wie dessen Eigenschaften animiert werden, wenn sie sich aufgrund eines Zustandswechsels ändern.
Zustände und Übergänge für ein Element können mit den Eigenschaften „ Item::states “ und „ Item::transitions “ deklariert werden. Zustände werden innerhalb der Eigenschaft „states list“ eines Elements deklariert, in der Regel des Stammelements der Komponente. Die für dasselbe Element definierten Übergänge dienen dazu, die Änderungen des Zustands zu animieren. Hier ist ein Beispiel.
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" }
}
]
}Animieren von Eigenschaftsänderungen.
Mithilfe von „Behaviors“ lässt sich eine Animation festlegen, die bei einer Änderung einer Eigenschaft angewendet wird. Diese wird dann auf alle Änderungen angewendet, unabhängig von deren Ursache. Im folgenden Beispiel wird mithilfe von „Behaviors“ die Bewegung einer Schaltfläche über den Bildschirm animiert.
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
}
}
}Andere Animationen
Nicht alle Animationen müssen an eine bestimmte Eigenschaft oder einen bestimmten Zustand gebunden sein. Sie können Animationen auch allgemeiner erstellen und Zielelemente sowie Eigenschaften innerhalb der Animation festlegen. Hier sind einige Beispiele für verschiedene Möglichkeiten, dies zu tun:
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 }
}
}
Weitere Informationen zu Animationen finden Sie auf der Seite „Wichtige Konzepte in Qt Quick – Zustände, Übergänge und Animationen “.
© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.
