Transition QML Type

Definiert animierte Übergänge, die bei Zustandsänderungen auftreten. Mehr...

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

• animations : list<Animation>
• enabled : bool
• from : string
• reversible : bool
• running : bool
• to : string

Ausführliche Beschreibung

Ein Übergang definiert die Animationen, die bei einer Änderung des Zustands von „ State “ angewendet werden sollen.

Beispielsweise weist das folgende „ Rectangle “ zwei Zustände auf: den Standardzustand und einen hinzugefügten „moved“-Zustand. Im „moved“-Zustand ändert sich die Position des Rechtecks auf (50, 50). Der hinzugefügte Übergang legt fest, dass beim Wechsel des Rechtecks zwischen dem Standardzustand und dem Zustand „moved“ alle Änderungen an den Eigenschaften „ x “ und „ y “ mithilfe eines „ Easing.InOutQuad “ animiert werden sollen.

import QtQuick

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

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }

    states: State {
        name: "moved"; when: mouseArea.pressed
        PropertyChanges { target: rect; x: 50; y: 50 }
    }

    transitions: Transition {
        NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
    }
}

Beachten Sie, dass das Beispiel keine Werte für „ to “ und „ from “ für „ NumberAnimation “ erfordert. Der Einfachheit halber werden diese Eigenschaften vor und nach dem Zustandswechsel automatisch auf die Werte von „ x “ und „ y “ gesetzt; die Werte für „ from “ werden durch die aktuellen Werte von „ x “ und „ y “ bereitgestellt, und die Werte für „ to “ werden durch das „ PropertyChanges “-Objekt bereitgestellt. Wenn Sie möchten, können Sie dennoch Werte für „ to “ und „ from “ angeben, um die Standardwerte zu überschreiben.

Standardmäßig werden die Animationen eines Übergangs bei jeder Zustandsänderung des übergeordneten Elements angewendet. Die Werte „ from “ und „ to “ des Übergangs können festgelegt werden, um die Animationen so einzuschränken, dass sie nur beim Wechsel von einem bestimmten Zustand in einen anderen angewendet werden.

Animationen auf oberster Ebene innerhalb eines Übergangs werden parallel ausgeführt. Um sie nacheinander auszuführen, definieren Sie sie innerhalb eines „ SequentialAnimation “:

transitions: Transition {
    to: "brighter"
    reversible: true
    SequentialAnimation {
        PropertyAnimation { property: "x"; duration: 1000 }
        ColorAnimation { duration: 1000 }
    }
}

Um mehrere Übergänge zu definieren, geben Sie „ Item::transitions “ als Liste an:

    transitions: [
        Transition {
            from: "*"; to: "middleRight"
            NumberAnimation {
                properties: "x,y";
                easing.type: Easing.InOutQuad;
                duration: 2000;
            }
        },
        Transition {
            from: "*"; to: "bottomLeft";
            NumberAnimation {
                properties: "x,y";
                easing.type: Easing.InOutQuad;
                duration: 200;
            }
        },
        //If any other rectangle is clicked, the icon will return
        //to the start position at a slow speed and bounce.
        Transition {
            from: "*"; to: "*";
            NumberAnimation {
                easing.type: Easing.OutBounce;
                properties: "x,y";
                duration: 4000;
            }
        }
    ]

Wenn mehrere Übergänge angegeben sind, wird für einen bestimmten Zustandswechsel nur ein einziger (am besten passender) Übergang angewendet. Wenn im obigen Beispiel das Rechteck in einen anderen Zustand als „ "middleRight" “ oder „ "bottomLeft" “ wechselt, wird der dritte Übergang ausgeführt, d. h., das Symbol wird an den Startpunkt verschoben.

Wenn für einen Zustandswechsel ein Übergang vorhanden ist, der mit derselben Eigenschaft wie ein „ Behavior “ übereinstimmt, überschreibt die Übergangsanimation den „ Behavior “ für diesen Zustandswechsel.

Siehe auch „Animation und Übergänge“ unter Qt Quick, das Beispiel „Zustände“, „Qt Quick -Zustände“ sowie Qt Qml.

Eigenschaftsdokumentation

animations : list<Animation> [default read-only]

Diese Eigenschaft enthält eine Liste der Animationen, die für diesen Übergang ausgeführt werden sollen.

    transitions: Transition {
        PropertyAnimation { duration: 3000 }
        ColorAnimation { duration: 3000 }
    }

Die Animationen der obersten Ebene werden parallel ausgeführt. Um sie nacheinander auszuführen, definieren Sie sie innerhalb eines „ SequentialAnimation “:

transitions: Transition {
    to: "brighter"
    reversible: true
    SequentialAnimation {
        PropertyAnimation { property: "x"; duration: 1000 }
        ColorAnimation { duration: 1000 }
    }
}

enabled : bool

Diese Eigenschaft legt fest, ob der Übergang beim Wechsel vom Zustand „ from “ zum Zustand „ to “ ausgeführt wird.

Standardmäßig ist ein Übergang aktiviert.

Beachten Sie, dass das Deaktivieren eines Übergangs unter bestimmten Umständen dazu führen kann, dass stattdessen ein alternativer Übergang verwendet wird. Im folgenden Beispiel wurde der erste Übergang zwar so eingestellt, dass er den Wechsel von „Zustand1“ zu „Zustand2“ animiert, dieser Übergang wurde jedoch durch die Einstellung von „ enabled “ auf „ false “ deaktiviert, sodass ein solcher Zustandswechsel stattdessen tatsächlich durch den zweiten Übergang animiert wird.

Item {
    states: [
        State { name: "state1" },
        State { name: "state2" }
    ]
    transitions: [
        Transition { from: "state1"; to: "state2"; enabled: false },
        Transition {
            // ...
        }
    ]
}

Diese Eigenschaften geben die Zustandsänderungen an, die den Übergang auslösen.

Die Standardwerte für diese Eigenschaften lauten „*“ (d. h. jeder beliebige Zustand).

Beispielsweise sind bei dem folgenden Übergang die Eigenschaften „ to “ und „ from “ nicht festgelegt, sodass die Animation immer angewendet wird, wenn zwischen den beiden Zuständen gewechselt wird (d. h., wenn die Maustaste gedrückt und losgelassen wird).

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

    MouseArea { id: mouseArea; anchors.fill: parent }

    states: State {
        name: "brighter"; when: mouseArea.pressed
        PropertyChanges { target: rect; color: "yellow" }
    }

    transitions: Transition {
        ColorAnimation { duration: 1000 }
    }
}

Würde der Übergang wie folgt geändert:

transitions: Transition {
    to: "brighter"
    ColorAnimation { duration: 1000 }
}

würde die Animation nur beim Wechsel vom Standardzustand in den „helleren“ Zustand angewendet (d. h. beim Drücken der Maustaste, nicht jedoch beim Loslassen).

Es können mehrere Werte für „ to “ und „ from “ durch eine durch Kommas getrennte Zeichenfolge festgelegt werden.

Siehe auch „ reversible “.

reversible : bool

Diese Eigenschaft legt fest, ob der Übergang automatisch rückgängig gemacht werden soll, wenn sich die Bedingungen, die diesen Übergang ausgelöst haben, umkehren.

Der Standardwert ist „false“.

Standardmäßig werden Übergänge parallel ausgeführt und auf alle Zustandsänderungen angewendet, sofern die Zustände „ from “ und „ to “ nicht festgelegt wurden. In diesem Fall wird der Übergang automatisch angewendet, wenn eine Zustandsänderung rückgängig gemacht wird, und es ist nicht erforderlich, diese Eigenschaft festzulegen, um den Übergang rückgängig zu machen.

Wird jedoch ein „ SequentialAnimation “ verwendet oder wurden die Eigenschaften „ from “ oder „ to “ gesetzt, muss diese Eigenschaft gesetzt werden, um einen Übergang umzukehren, wenn eine Zustandsänderung rückgängig gemacht wird. Der folgende Übergang wendet beispielsweise beim Drücken der Maustaste eine sequenzielle Animation an und kehrt die Reihenfolge der Animation beim Loslassen der Maustaste um:

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

    TapHandler { id: tapHandler }

    states: State {
        name: "brighter"
        when: tapHandler.pressed
        PropertyChanges { target: rect; color: "lightsteelblue"; x: 50 }
    }

    transitions: Transition {
        to: "brighter"
        reversible: true
        SequentialAnimation {
            PropertyAnimation { property: "x"; duration: 1000 }
            ColorAnimation { duration: 1000 }
        }
    }
}

Wenn der Übergang die Werte „ to “ und „ reversible “ nicht festgelegt hat, würde der Übergang beim Loslassen der Maustaste die „ PropertyAnimation “ vor der „ ColorAnimation “ abspielen, anstatt die Reihenfolge umzukehren.

running : bool [read-only]

Diese Eigenschaft gibt an, ob der Übergang gerade ausgeführt wird.