Diese Anleitung zeigt Ihnen, wie Sie einem Steuerelement in QML einen Fade-In/Fade-Out-Effekt hinzufügen. Es gibt viele eingebaute Animationen in Qt/QML, aber kein Ein-/Ausblenden. Verwenden einer Zustandsmaschine und eines SequentialAnimation , können wir zuerst die Deckkraft animieren und dann die Sichtbarkeit einstellen, um einen Ein- / Ausblendeffekt zu erzielen. Andere Möglichkeiten wie eine PropertyAnimation sind ebenfalls verfügbar, aber weniger ausdrucksstark oder konfigurierbar.
Die visibility Die Eigenschaft eines Elements kann nicht direkt animiert werden, da es sich um einen bool handelt . Wir müssen also die opacity animieren Eigenschaft, die eine Zahl von 0,0 bis 1,0 ist. Mit NumberAnimation gibt Kontrolle über die Dauer und setzt diese in einen SequentialAnimation lässt sie der Reihe nach geschehen. In Kombination mit der eingebauten Zustandsmaschine, die jedes QML-Steuerelement hat (um die Reihenfolge der Effekte umzukehren, wenn das Element ausgeblendet wird), erreichen wir ein schön animiertes Ein- und Ausblenden, ohne auf das Schreiben von benutzerdefiniertem OpenGL-Code in C++ für unser eigenes QML-Steuerelement zurückgreifen zu müssen.
Hier ist ein GIF, das den vollen Effekt zeigt und auch, wie es aussieht, wenn Sie nur die Sichtbarkeit umschalten:
Ist das verworren? Ja, ich denke schon, eine ganze Zustandsmaschine für nur einen Fade-In / Fade-Out-Effekt. Ist es schön, dass Qt/QML es Ihnen ermöglicht, dies mithilfe ihrer integrierten Standardbibliothek zusammenzuhacken? Ja, ich denke schon. Hätte ich lieber einen Effekt, den ich einfach anwenden kann, ähnlich wie beispielsweise einer der eingebauten Unschärfe-Effekte? Ja, das wäre noch besser. Andere Animationen und Effekte sind einfach zu erstellen, warum also nicht einen eingebauten Effekt für diesen Effekt hinzufügen?
QML-Einblenden/Ausblenden
Fügen Sie Ihrem QML-Steuerelement die folgende Zustandsmaschine und Übergänge hinzu und binden Sie dann den Zustand an eine Eigenschaft oder lösen Sie ihn direkt aus. Die ID des Steuerelements ist exampleControl und die Eigenschaft, die ich zum Auslösen der Ein-/Ausblendanimation verwende, heißt folded .
id: exampleControl
property bool folded: false
state: !folded ? "Visible" : "Invisible"
states: [
State{
name: "Visible"
PropertyChanges{target: exampleControl; opacity: 1.0}
PropertyChanges{target: exampleControl; visible: true}
},
State{
name:"Invisible"
PropertyChanges{target: exampleControl; opacity: 0.0}
PropertyChanges{target: exampleControl; visible: false}
}
]
transitions: [
Transition {
from: "Visible"
to: "Invisible"
SequentialAnimation{
NumberAnimation {
target: exampleControl
property: "opacity"
duration: 500
easing.type: Easing.InOutQuad
}
NumberAnimation {
target: exampleControl
property: "visible"
duration: 0
}
}
},
Transition {
from: "Invisible"
to: "Visible"
SequentialAnimation{
NumberAnimation {
target: exampleControl
property: "visible"
duration: 0
}
NumberAnimation {
target: exampleControl
property: "opacity"
duration: 500
easing.type: Easing.InOutQuad
}
}
}
]
Vollständiger Beispielquellcode
Dies ist der Code, der das aufgezeichnete GIF im Artikel erstellt. Es zeigt den Animationscode und wie man ihn an eine Eigenschaft bindet, die ausgelöst werden kann. Ich habe das Zustandsmaschinenbeispiel auf Stackoverflow gefunden, aber ich kann das spezifische Thema nicht mehr in meinem Browserverlauf finden, daher kann ich nicht auf das Quellbeispiel verlinken. Wenn Sie es wissen, senden Sie mir bitte eine E-Mail, damit ich diesen Artikel aktualisieren kann.
import QtQuick 2.15
import QtQuick.Controls 1.4
import QtQuick.Window 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Fade in / Fade out demo by raymii.org")
Column {
anchors.fill: parent
anchors.margins: 20
spacing: 20
Row {
spacing: 20
Button {
text: fadeRect.folded ? "Fade in" : "Fade out"
onClicked: fadeRect.folded = !fadeRect.folded
}
Button {
text: toggleRect.visible ? "Hide" : "Show"
onClicked: toggleRect.visible = !toggleRect.visible
}
}
Rectangle {
id: fadeRect
width: 410
height: 60
border.width: 3
property bool folded: true
border.color: "#cccccc"
color: "#efefef"
Row {
anchors.fill: parent
anchors.margins: 10
spacing: 5
Button {
text: "Button 1"
}
Button {
text: "Button 2"
}
Button {
text: "Button 3"
}
}
state: !folded ? "Visible" : "Invisible"
states: [
State{
name: "Visible"
PropertyChanges{target: fadeRect; opacity: 1.0}
PropertyChanges{target: fadeRect; visible: true}
},
State{
name:"Invisible"
PropertyChanges{target: fadeRect; opacity: 0.0}
PropertyChanges{target: fadeRect; visible: false}
}
]
transitions: [
Transition {
from: "Visible"
to: "Invisible"
SequentialAnimation{
NumberAnimation {
target: fadeRect
property: "opacity"
duration: 500
easing.type: Easing.InOutQuad
}
NumberAnimation {
target: fadeRect
property: "visible"
duration: 0
}
}
},
Transition {
from: "Invisible"
to: "Visible"
SequentialAnimation{
NumberAnimation {
target: fadeRect
property: "visible"
duration: 0
}
NumberAnimation {
target: fadeRect
property: "opacity"
duration: 500
easing.type: Easing.InOutQuad
}
}
}
]
}
Rectangle {
id: toggleRect
width: 410
height: 60
border.color: "#cccccc"
color: "#efefef"
border.width: 3
visible: false
Row {
anchors.fill: parent
anchors.margins: 10
spacing: 5
Button {
text: "Button 1"
}
Button {
text: "Button 2"
}
Button {
text: "Button 3"
}
}
}
}
}