Animation und Übergänge in Qt Quick

Animations- und Übergangstypen

• Transition - Animiert Übergänge bei Zustandswechseln
• SequentialAnimation - Führt Animationen sequentiell 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, einen Wert gleichmäßig zu verfolgen
• SpringAnimation - Ermöglicht es einer Eigenschaft, einen Wert in einer federartigen Bewegung zu verfolgen
• ScriptAction - Führt Skripte während einer Animation aus

Typen, die Eigenschaften basierend auf Datentypen animieren

Animationen werden durch Anwendung von Animationstypen auf Eigenschaftswerte erstellt. Animationstypen interpolieren Eigenschaftswerte, um weiche Übergänge zu erzeugen. Auch Zustandsübergänge können Animationen zu Zustandsänderungen zuweisen.

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

Animationen auslösen

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

Direkte Eigenschaftsanimation

Animationen werden erstellt, indem Animationsobjekte auf Eigenschaftswerte angewandt werden, um die Eigenschaften im Laufe der Zeit schrittweise zu verändern. Diese Eigenschaftsanimationen wenden sanfte Bewegungen an, indem sie die Werte zwischen den Eigenschaftswertänderungen interpolieren. Eigenschaftsanimationen bieten Zeitsteuerungen und ermöglichen verschiedene Interpolationen durch Lockerungskurven.

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}
   }
}

Spezialisierte Eigenschaftsanimationstypen haben effizientere Implementierungen als der Typ PropertyAnimation. Sie dienen dazu, Animationen auf verschiedene QML-Typen wie int, color und Rotationen zu setzen. In ähnlicher Weise kann ParentAnimation übergeordnete Änderungen animieren.

Weitere Informationen zu den verschiedenen Animationseigenschaften finden Sie im Abschnitt Steuerung von Animationen.

Vordefinierte Ziele und Eigenschaften verwenden

Im vorherigen Beispiel mussten für die Objekte PropertyAnimation und NumberAnimation bestimmte Werte für target und properties angegeben werden, um die Objekte und Eigenschaften zu spezifizieren, die animiert werden sollten. Dies kann durch die Verwendung der Syntax <Animation> auf <Eigenschaft> vermieden werden, die die Animation als Eigenschaftswertquelle angibt.

Nachfolgend finden Sie zwei PropertyAnimation Objekte, die mit dieser Syntax angegeben werden:

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 seine Werte x und y angewendet. Da die Syntax <Animation> auf <Eigenschaft> verwendet wurde, ist es nicht erforderlich, den Wert target der Objekte PropertyAnimation auf rect zu setzen, und auch nicht, die Werte property auf x und y zu setzen.

Dies kann auch bei gruppierten Animationen verwendet werden, um sicherzustellen, dass alle Animationen innerhalb einer Gruppe auf dieselbe Eigenschaft angewendet werden. Im vorherigen Beispiel könnte stattdessen SequentialAnimation verwendet werden, um die color des Rechtecks zuerst auf Gelb und dann 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 mit der Syntax <Animation> auf <Eigenschaft> für die Eigenschaft color angegeben wurde, werden seine untergeordneten Objekte ColorAnimation automatisch auch auf diese Eigenschaft angewendet und müssen keine Animationswerte für target oder property angeben.

Übergänge bei Zustandsänderungen

Qt Quick States sind Eigenschaftskonfigurationen, bei denen eine Eigenschaft unterschiedliche Werte haben kann, um verschiedene Zustände widerzuspiegeln. Zustandsänderungen führen zu abrupten Eigenschaftsänderungen; Animationen glätten Übergänge, um visuell ansprechende Zustandsänderungen zu erzeugen.

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 einen Zustand released, wenn der Benutzer die Schaltfläche loslässt. Für jeden Zustand können wir unterschiedliche Eigenschaftskonfigurationen zuweisen. Ein Übergang würde den Wechsel vom Zustand pressed zum Zustand released animieren. Ebenso gibt es eine Animation beim Wechsel 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 Bindung der Eigenschaften to und from an den Zustandsnamen wird der jeweilige Übergang dem Zustandswechsel zugewiesen. Bei einfachen oder symmetrischen Übergängen bedeutet das Setzen der Eigenschaft to 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 mit Verhaltensanimationen festgelegt. Animationen, die in Behavior Typen deklariert sind, gelten für die Eigenschaft und animieren jede Änderung des Eigenschaftswertes. Behavior-Typen verfügen jedoch über eine enabled -Eigenschaft, mit der die Verhaltensanimationen gezielt aktiviert oder deaktiviert werden können.

Eine Kugelkomponente könnte eine Verhaltensanimation haben, die ihren Eigenschaften x, y und color zugewiesen ist. Die Verhaltensanimation könnte so eingestellt werden, dass ein elastischer Effekt simuliert wird. In der Tat würde diese Verhaltensanimation den elastischen Effekt auf die Eigenschaften anwenden, wenn 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 mehrere Methoden, um den Eigenschaften Verhaltensanimationen zuzuweisen. Die Deklaration Behavior on <property> ist eine praktische Methode, um einer Eigenschaft eine Verhaltensanimation zuzuweisen.

Unter Qt Quick Beispiele - Animation finden Sie eine Demonstration von Verhaltensanimationen.

Paralleles oder sequenzielles Abspielen von Animationen

Animationen können parallel oder nacheinander ausgeführt werden. Parallele Animationen spielen eine Gruppe von Animationen gleichzeitig ab, während sequenzielle Animationen eine Gruppe von Animationen der Reihe nach abspielen: eine nach der anderen. Die Gruppierung von Animationen in SequentialAnimation und ParallelAnimation spielt die Animationen nacheinander oder parallel ab.

Eine Bannerkomponente kann mehrere Symbole oder Slogans enthalten, die nacheinander angezeigt werden. Die Eigenschaft opacity kann in 1.0 umgewandelt werden, was ein undurchsichtiges Objekt bezeichnet. Bei Verwendung des Typs SequentialAnimation werden die Opazitätsanimationen nach Beendigung der vorangegangenen Animation abgespielt. Mit dem Typ ParallelAnimation werden die Animationen gleichzeitig abgespielt.

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 einer SequentialAnimation oder ParallelAnimation platziert sind, 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 ist auch für die Wiedergabe von Übergangsanimationen nützlich, da die 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 von dem Typ Animation. Es ist nicht möglich, Animation Objekte zu erstellen; stattdessen bietet dieser Typ die wesentlichen Eigenschaften und Methoden für Animationstypen. Animationstypen haben start(), stop(), resume(), pause(), restart() und complete() - alle diese Methoden steuern die Ausführung von Animationen.

Erleichterung

Easing-Kurven definieren, wie die Animation zwischen dem Startwert und dem Endwert interpoliert. Verschiedene Lockerungskurven können über den definierten Interpolationsbereich hinausgehen. Die Lockerungskurven vereinfachen die Erstellung von Animationseffekten wie Bounce-Effekte, Beschleunigung, Verlangsamung und zyklische Animationen.

Ein QML-Objekt kann für jede Eigenschaftsanimation eine andere Lockerungskurve haben. Es gibt auch verschiedene Parameter zur Steuerung der Kurve, von denen einige exklusiv für eine bestimmte Kurve sind. Weitere Informationen zu den Lockerungskurven finden Sie in der Dokumentation easing.

Das Lockerungsbeispiel demonstriert visuell jede der verschiedenen Lockerungsarten.

Andere Animationstypen

Darüber hinaus bietet QML mehrere andere für die Animation nützliche Typen:

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

Dies sind spezielle Animationstypen, die verschiedene Eigenschaftstypen animieren

• SmoothedAnimation NumberAnimation: ein spezielles Skript, das sanfte Änderungen in der Animation ermöglicht, wenn sich der Zielwert ändert
• SpringAnimation: bietet eine federähnliche Animation mit speziellen Attributen wie mass, damping und epsilon
• ParentAnimation: wird für die Animation einer übergeordneten Änderung verwendet (siehe ParentChange)
• AnchorAnimation: wird für die Animation einer Ankeränderung verwendet (siehe AnchorChanges)

Gemeinsame Nutzung von Animationsinstanzen

Die gemeinsame Nutzung von Animationsinstanzen zwischen Transitionen oder Behaviors 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 ist, die NumberAnimation für beide Behaviors zu wiederholen. Wenn die wiederholte Animation sehr komplex ist, können Sie auch eine benutzerdefinierte Animationskomponente erstellen und z. B. jedem Verhalten eine Instanz zuweisen:

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