Animationen und Übergänge in Qt Quick

Arten von Animationen und Übergängen

• Transition - Animiert Übergänge bei Zustandsänderungen
• SequentialAnimation - Führt Animationen nacheinander aus
• ParallelAnimation - Führt Animationen parallel aus
• Behavior - Legt eine Standardanimation für Eigenschaftsänderungen fest
• PropertyAction - Legt sofortige Eigenschaftsänderungen während der Animation fest
• PauseAnimation - Fügt eine Pause in eine Animation ein
• SmoothedAnimation - Ermöglicht es einer Eigenschaft, einem Wert sanft zu folgen
• SpringAnimation - Ermöglicht, dass eine Eigenschaft einem Wert in einer federartigen Bewegung folgt
• ScriptAction - Führt Skripte während einer Animation aus

Typen, die Eigenschaften basierend auf Datentypen animieren

Animationen werden erstellt, indem Animationstypen auf Eigenschaftswerte angewendet werden. Animationstypen interpolieren Eigenschaftswerte, um flüssige Übergänge zu erzeugen. Außerdem können Zustandsübergänge Animationen zu Zustandsänderungen zuweisen.

Um eine Animation zu erstellen, verwenden Sie einen für den Typ der zu animierenden Eigenschaft geeigneten Animationstyp und wenden Sie die Animation je nach Art des gewünschten Verhaltens an.

Animationen auslösen

Es gibt verschiedene Möglichkeiten, einem Objekt eine Animation zuzuweisen.

Direkte Eigenschaftsanimation

Animationen werden erstellt, indem Animationsobjekte auf Eigenschaftswerte angewendet werden, um die Eigenschaften im Laufe der Zeit schrittweise zu ändern. Diese Eigenschaftsanimationen sorgen für flüssige Bewegungen, indem sie die Werte zwischen den Änderungen der Eigenschaftswerte interpolieren. Eigenschaftsanimationen bieten Steuerungsmöglichkeiten für das Timing und ermöglichen verschiedene Interpolationen mithilfe von Beschleunigungs- und Abbremskurven.

Rectangle {
    id: flashingblob
    width: 75; height: 75
    color: "blue"
    opacity: 1.0

    MouseArea {
        anchors.fill: parent
        onClicked: {
            animateColor.start()
            animateOpacity.start()
        }
    }

    PropertyAnimation {id: animateColor; target: flashingblob; properties: "color"; to: "green"; duration: 100}

    NumberAnimation {
        id: animateOpacity
        target: flashingblob
        properties: "opacity"
        from: 0.99
        to: 1.0
        loops: Animation.Infinite
        easing {type: Easing.OutBack; overshoot: 500}
   }
}

Spezielle Arten von Eigenschaftsanimationen verfügen über effizientere Implementierungen als der Typ „ PropertyAnimation “. Sie dienen dazu, Animationen für verschiedene QML-Typen wie „ int “, „ color “ und Rotationen festzulegen. In ähnlicher Weise kann der Typ „ ParentAnimation “ Änderungen der übergeordneten Elemente animieren.

Weitere Informationen zu den verschiedenen Animationseigenschaften finden Sie im Abschnitt „Animationen steuern “.

Verwendung vordefinierter Ziele und Eigenschaften

Im vorherigen Beispiel mussten die Objekte „ PropertyAnimation “ und „ NumberAnimation “ bestimmte Werte für „ target “ und „ properties “ angeben, um die Objekte und Eigenschaften festzulegen, die animiert werden sollten. Dies lässt sich vermeiden, indem man die Syntax <Animation> on <Property> verwendet, die festlegt, dass die Animation als Quelle für den Eigenschaftswert angewendet werden soll.

Im Folgenden sind zwei „ PropertyAnimation “-Objekte aufgeführt, die mit dieser Syntax festgelegt wurden:

import QtQuick 2.0

Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"

    PropertyAnimation on x { to: 100 }
    PropertyAnimation on y { to: 100 }
}

Die Animation beginnt, sobald das Rechteck geladen ist, und wird automatisch auf die Werte „ x “ und „ y “ angewendet. Da die Syntax „<Animation> on <Property>“ verwendet wurde, ist es nicht erforderlich, den Wert „ target “ der Objekte „ PropertyAnimation “ auf „ rect “ zu setzen, und es ist auch nicht erforderlich, die Werte „ property “ auf „ x “ und „ y “ zu setzen.

Dies kann auch bei gruppierten Animationen genutzt werden, um sicherzustellen, dass alle Animationen innerhalb einer Gruppe auf dieselbe Eigenschaft angewendet werden. Im vorherigen Beispiel könnte beispielsweise stattdessen SequentialAnimation verwendet werden, um die color des Rechtecks zunächst auf Gelb und anschließend auf Blau zu animieren:

import QtQuick 2.0

Rectangle {
    width: 100; height: 100
    color: "red"

    SequentialAnimation on color {
        ColorAnimation { to: "yellow"; duration: 1000 }
        ColorAnimation { to: "blue"; duration: 1000 }
    }
}

Da das Objekt „ SequentialAnimation “ für die Eigenschaft „ color “ mithilfe der Syntax `<Animation> on <Property>` festgelegt wurde, werden seine untergeordneten Objekte „ ColorAnimation “ ebenfalls automatisch auf diese Eigenschaft angewendet, und es müssen keine Animationswerte wie „ target “ oder „ property “ angegeben werden.

Übergänge bei Zustandsänderungen

Qt Quick States sind Eigenschaftskonfigurationen, bei denen eine Eigenschaft unterschiedliche Werte annehmen kann, um verschiedene Zustände widerzuspiegeln. Zustandswechsel führen zu abrupten Eigenschaftsänderungen; Animationen sorgen für sanfte Übergänge und erzeugen so visuell ansprechende Zustandswechsel.

Der Typ „ Transition “ kann Animationstypen enthalten, um durch Zustandsänderungen verursachte Eigenschaftsänderungen zu interpolieren. Um den Übergang einem Objekt zuzuweisen, binden Sie ihn an die Eigenschaft „ transitions “.

Eine Schaltfläche kann zwei Zustände haben: den Zustand „ pressed “, wenn der Benutzer auf die Schaltfläche klickt, und den Zustand „ released “, wenn der Benutzer die Schaltfläche loslässt. Wir können jedem Zustand unterschiedliche Eigenschaftskonfigurationen zuweisen. Ein Übergang würde den Wechsel vom Zustand „ pressed “ zum Zustand „ released “ animieren. Ebenso gäbe es eine Animation während des Wechsels vom Zustand „ released “ zum Zustand „ pressed “.

Rectangle {
    width: 75; height: 75
    id: button
    state: "RELEASED"

    MouseArea {
        anchors.fill: parent
        onPressed: button.state = "PRESSED"
        onReleased: button.state = "RELEASED"
    }

    states: [
        State {
            name: "PRESSED"
            PropertyChanges { target: button; color: "lightblue"}
        },
        State {
            name: "RELEASED"
            PropertyChanges { target: button; color: "lightsteelblue"}
        }
    ]

    transitions: [
        Transition {
            from: "PRESSED"
            to: "RELEASED"
            ColorAnimation { target: button; duration: 100}
        },
        Transition {
            from: "RELEASED"
            to: "PRESSED"
            ColorAnimation { target: button; duration: 100}
        }
    ]
}

Durch die Verknüpfung der Eigenschaften „ to “ und „ from “ mit dem Namen des Zustands wird diesem Zustandswechsel der jeweilige Übergang zugewiesen. Bei einfachen oder symmetrischen Übergängen bedeutet die Einstellung der Eigenschaft „ to “ auf das Platzhaltersymbol „* “, dass der Übergang für jeden Zustandswechsel gilt.

    transitions:
        Transition {
            to: "*"
            ColorAnimation { target: button; duration: 100}
        }

Standardanimation als Verhalten

Standard-Eigenschaftsanimationen werden mithilfe von Verhaltensanimationen festgelegt. Animationen, die in den Typen „ Behavior “ deklariert sind, gelten für die jeweilige Eigenschaft und animieren alle Änderungen des Eigenschaftswerts. Die Verhaltenstypen verfügen jedoch über die Eigenschaft „ enabled “, mit der die Verhaltensanimationen gezielt aktiviert oder deaktiviert werden können.

Einer Ballkomponente könnte eine Verhaltensanimation zu ihren Eigenschaften „ x “, „ y “ und „ color “ zugewiesen sein. Die Verhaltensanimation könnte so eingerichtet werden, dass sie einen elastischen Effekt simuliert. Tatsächlich würde diese Verhaltensanimation den elastischen Effekt auf die Eigenschaften anwenden, wann immer sich der Ball bewegt.

Rectangle {
    width: 75; height: 75; radius: width
    id: ball
    color: "salmon"

    component BounceAnimation : NumberAnimation {
       easing {
          type: Easing.OutElastic
          amplitude: 1.0
          period: 0.5
       }
    }

    Behavior on x {
        BounceAnimation {}
    }
    Behavior on y {
        BounceAnimation {}
    }
    Behavior on color {
        ColorAnimation { target: ball; duration: 100 }
    }
}

Es gibt verschiedene Methoden, um Verhaltensanimationen Eigenschaften zuzuweisen. Die Deklaration ` Behavior on <property> ` ist eine bequeme Möglichkeit, einer Eigenschaft eine Verhaltensanimation zuzuweisen.

Eine Demonstration von Verhaltensanimationen finden Sie unter „Qt Quick -Beispiele – Animation “.

Animationen parallel oder nacheinander abspielen

Animationen können parallel oder nacheinander abgespielt werden. Bei parallelen Animationen wird eine Gruppe von Animationen gleichzeitig abgespielt, während bei sequenziellen Animationen eine Gruppe von Animationen der Reihe nach, also nacheinander, abgespielt wird. Durch das Gruppieren von Animationen in „ SequentialAnimation “ und „ ParallelAnimation “ werden die Animationen nacheinander oder parallel abgespielt.

Eine Banner-Komponente kann mehrere Symbole oder Slogans enthalten, die nacheinander angezeigt werden sollen. Die Eigenschaft „ opacity “ könnte in „ 1.0 “ umgewandelt werden, was ein undurchsichtiges Objekt bezeichnet. Bei Verwendung des Typs „ SequentialAnimation “ werden die Opazitätsanimationen abgespielt, nachdem die vorhergehende Animation beendet ist. Der Typ „ ParallelAnimation “ spielt die Animationen gleichzeitig ab.

Rectangle {
    id: banner
    width: 150; height: 100; border.color: "black"

    Column {
        anchors.centerIn: parent
        Text {
            id: code
            text: "Code less."
            opacity: 0.01
        }
        Text {
            id: create
            text: "Create more."
            opacity: 0.01
        }
        Text {
            id: deploy
            text: "Deploy everywhere."
            opacity: 0.01
        }
    }

    MouseArea {
        anchors.fill: parent
        onPressed: playbanner.start()
    }

    SequentialAnimation {
        id: playbanner
        running: false
        NumberAnimation { target: code; property: "opacity"; to: 1.0; duration: 200}
        NumberAnimation { target: create; property: "opacity"; to: 1.0; duration: 200}
        NumberAnimation { target: deploy; property: "opacity"; to: 1.0; duration: 200}
    }
}

Sobald einzelne Animationen in ein „ SequentialAnimation “ oder „ ParallelAnimation “ eingefügt wurden, können sie nicht mehr unabhängig voneinander gestartet und gestoppt werden. Die sequenzielle oder parallele Animation muss als Gruppe gestartet und gestoppt werden.

Der Typ „ SequentialAnimation “ eignet sich auch zum Abspielen von Übergangsanimationen, da Animationen innerhalb von Übergängen parallel abgespielt werden.

Steuerung von Animationen

Es gibt verschiedene Methoden zur Steuerung von Animationen.

Wiedergabe von Animationen

Alle Animationstypen erben vom Typ „ Animation “. Es ist nicht möglich, „ Animation “-Objekte zu erstellen; stattdessen stellt dieser Typ die wesentlichen Eigenschaften und Methoden für Animationstypen bereit. Animationstypen verfügen über die Methoden „ start() “, „ stop() “, „ resume() “, „ pause() “, „ restart() “ und „ complete() “ – all diese Methoden steuern die Ausführung von Animationen.

Easing

Easing-Kurven legen fest, wie die Animation zwischen dem Startwert und dem Endwert interpoliert wird. Verschiedene Easing-Kurven können über den definierten Interpolationsbereich hinausgehen. Die Easing-Kurven vereinfachen die Erstellung von Animationseffekten wie Prell-Effekte, Beschleunigung, Verzögerung und zyklische Animationen.

Ein QML-Objekt kann für jede Eigenschaftsanimation eine andere Beschleunigungskurve haben. Es gibt außerdem verschiedene Parameter zur Steuerung der Kurve, von denen einige nur für eine bestimmte Kurve gelten. Weitere Informationen zu den Beschleunigungskurven finden Sie in der Dokumentation unter easing.

Das Easing-Beispiel veranschaulicht die verschiedenen Easing-Typen.

Andere Animationstypen

Darüber hinaus bietet QML mehrere weitere Typen, die für Animationen nützlich sind:

• PauseAnimation: ermöglicht Pausen während Animationen
• ScriptAction: ermöglicht die Ausführung von JavaScript während einer Animation und kann zusammen mit „ StateChangeScript “ verwendet werden, um vorhandene Skripte wiederzuverwenden
• PropertyAction: ändert eine Eigenschaft während einer Animation sofort, ohne die Änderung der Eigenschaft zu animieren

Dies sind spezielle Animationstypen, die verschiedene Eigenschaftstypen animieren

• SmoothedAnimation: ein spezieller „ NumberAnimation “, der bei Änderungen des Zielwerts für sanfte Übergänge in der Animation sorgt
• SpringAnimation: Bietet eine federartige Animation mit speziellen Attributen wie „ mass “, „ damping “ und epsilon
• ParentAnimation: wird zur Animation einer Änderung des übergeordneten Elements verwendet (siehe „ ParentChange “)
• AnchorAnimation: Wird zur Animation einer Ankeränderung verwendet (siehe AnchorChanges)

Gemeinsame Nutzung von Animationsinstanzen

Das gemeinsame Verwenden von Animationsinstanzen zwischen Übergängen oder Verhaltensweisen wird nicht unterstützt und kann zu undefiniertem Verhalten führen. Im folgenden Beispiel werden Änderungen an der Position des Rechtecks höchstwahrscheinlich nicht korrekt animiert.

Rectangle {
    // NOT SUPPORTED: this will not work correctly as both Behaviors
    // try to control a single animation instance
    NumberAnimation { id: anim; duration: 300; easing.type: Easing.InBack }
    Behavior on x { animation: anim }
    Behavior on y { animation: anim }
}

Die einfachste Lösung besteht darin, die „ NumberAnimation “ für beide Verhaltensweisen zu wiederholen. Wenn die wiederholte Animation recht komplex ist, können Sie auch in Erwägung ziehen, eine benutzerdefinierte Animationskomponente zu erstellen und jedem Verhalten eine Instanz zuzuweisen, zum Beispiel:

Rectangle {
    component MyNumberAnimation : NumberAnimation {
        duration: 300; easing.type: Easing.InBack
    }
    Behavior on x { MyNumberAnimation {} }
    Behavior on y { MyNumberAnimation {} }
}