ViewTransition QML Type

Gibt Elemente an, die in einer Ansicht einem Übergang unterliegen. Mehr...

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Angehängte Eigenschaften

• destination : point
• index : int
• item : item
• targetIndexes : list
• targetItems : list

Ausführliche Beschreibung

Mit ListView und GridView ist es möglich, Übergänge festzulegen, die immer dann angewendet werden sollen, wenn sich die Elemente in der Ansicht aufgrund von Änderungen am Modell der Ansicht ändern. Beide haben die folgenden Eigenschaften, die auf die entsprechenden Übergänge eingestellt werden können, die für verschiedene Operationen ausgeführt werden sollen:

• populate - der Übergang, der auf die Elemente anzuwenden ist, die ursprünglich für die Ansicht erstellt wurden, oder wenn sich das Modell ändert
• add - der Übergang, der auf Elemente anzuwenden ist, die der Ansicht nach ihrer Erstellung hinzugefügt werden
• remove - den Übergang, der für Elemente gilt, die aus der Ansicht entfernt werden
• move - den Übergang, der auf Elemente anzuwenden ist, die innerhalb der Ansicht verschoben werden (d. h. als Ergebnis einer Verschiebeoperation im Modell)
• displaced - der generische Übergang, der auf alle Elemente anzuwenden ist, die durch eine Hinzufügungs-, Verschiebungs- oder Entfernungsoperation verschoben werden
• addDisplaced removeDisplaced und - die Übergänge, die angewandt werden, wenn Elemente durch Hinzufügen, Verschieben oder Entfernen verschoben werden (diese überschreiben den generischen Übergang "verschoben", falls angegeben) moveDisplaced

Für die Positionierertypen Row, Column, Grid und Flow, die mit Sammlungen von untergeordneten Elementen und nicht mit Datenmodellen arbeiten, werden stattdessen die folgenden Eigenschaften verwendet:

• populate - der Übergang, der auf Elemente anzuwenden ist, die dem Positionierer zum Zeitpunkt seiner Erstellung hinzugefügt wurden
• add - der Übergang, der auf Elemente anzuwenden ist, die dem Positionierer hinzugefügt oder wieder hinzugefügt werden, oder Elemente, die zu visible
• move - den Übergang, der auf Elemente anzuwenden ist, die innerhalb des Positionierers verschoben wurden, auch wenn sie aufgrund des Hinzufügens oder Entfernens anderer Elemente verschoben wurden, oder wenn Elemente innerhalb des Positionierers anderweitig neu angeordnet wurden, oder wenn Elemente aufgrund der Größenänderung anderer Elemente im Positionierer neu positioniert wurden

Ansichtsübergänge haben Zugriff auf eine angehängte Eigenschaft ViewTransition, die Details zu den Elementen, die sich im Übergang befinden, und den Vorgang, der den Übergang ausgelöst hat, enthält. Da Ansichtsübergänge einmal pro Element ausgeführt werden, können diese Details verwendet werden, um jeden Übergang für jedes einzelne Element anzupassen.

Die angehängte Eigenschaft ViewTransition bietet die folgenden Eigenschaften, die spezifisch für das Element sind, auf das der Übergang angewendet wird:

• ViewTransition.item - das Element, für das der Übergang gilt
• ViewTransition.index - der Index dieses Elements
• ViewTransition.destination - der (x,y) Punkt, zu dem dieses Element für die entsprechende Ansichtsoperation bewegt wird

Darüber hinaus bietet ViewTransition spezifische Eigenschaften für die Elemente, die das Ziel der Operation sind, die den Übergang ausgelöst hat:

• ViewTransition.targetIndexes - die Indizes der Zielelemente
• ViewTransition.targetItems - die Zielelemente selbst

(Beachten Sie, dass für die Positionierertypen Row, Column, Grid und Flow der Übergang move diese beiden zusätzlichen Details nur liefert, wenn der Übergang durch das Hinzufügen von Elementen zu einem Positionierer ausgelöst wird).

Ansichtsübergänge können ohne Bezugnahme auf eines der oben aufgeführten Attribute geschrieben werden. Diese Attribute liefern lediglich zusätzliche Details, die für die Anpassung von Ansichtsübergängen nützlich sind.

Im Folgenden wird eine Einführung in View Transitions gegeben und erläutert, wie die angehängte Eigenschaft ViewTransition verwendet werden kann, um View Transitions zu erweitern.

Ansichtsübergänge: ein einfaches Beispiel

Hier ist ein einfaches Beispiel für die Verwendung von Ansichtsübergängen. Die folgende Ansicht legt Übergänge für die Eigenschaften add und displaced fest, die ausgeführt werden, wenn der Ansicht Elemente hinzugefügt werden:

ListView {
    width: 240; height: 320
    model: ListModel {}

    delegate: Rectangle {
        width: 100; height: 30
        border.width: 1
        color: "lightsteelblue"
        Text {
            anchors.centerIn: parent
            text: name
        }
    }

    add: Transition {
        NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 400 }
        NumberAnimation { property: "scale"; from: 0; to: 1.0; duration: 400 }
    }

    displaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 400; easing.type: Easing.OutBounce }
    }

    focus: true
    Keys.onSpacePressed: model.insert(0, { "name": "Item " + model.count })
}

Wenn die Leertaste gedrückt wird und dem Modell ein Element hinzugefügt wird, wird das neue Element eingeblendet und über 400 Millisekunden vergrößert, wenn es der Ansicht hinzugefügt wird. Außerdem wird jedes Element, das durch das Hinzufügen eines neuen Elements verschoben wird, über einen Zeitraum von 400 Millisekunden an seine neue Position in der Ansicht animiert, wie durch den Übergang displaced festgelegt.

Würden fünf Elemente nacheinander bei Index 0 eingefügt, hätte dies den folgenden Effekt:

Beachten Sie, dass die obigen NumberAnimation Objekte kein target angeben müssen, um das entsprechende Element zu animieren. Auch NumberAnimation in addTransition muss nicht den Wert to angeben, um das Element an seine richtige Position in der Ansicht zu verschieben. Dies liegt daran, dass die Ansicht die Werte target und to implizit mit den korrekten Positionswerten des Elements und der Endposition des Elements versieht, wenn diese Eigenschaften nicht explizit definiert sind.

Im einfachsten Fall kann ein Ansichtsübergang ein Element nach einer Ansichtsoperation einfach an seine neue Position bringen, so wie es der displaced Übergang oben tut, oder einige Elementeigenschaften animieren, wie im add Übergang oben. Zusätzlich kann ein Ansichtsübergang die angehängte Eigenschaft ViewTransition verwenden, um das Animationsverhalten für verschiedene Elemente anzupassen. Es folgen einige Beispiele, wie dies erreicht werden kann.

Verwendung der ViewTransition Attached Property

Wie bereits erwähnt, liefern die verschiedenen ViewTransition-Eigenschaften Details, die sich auf das einzelne Element beziehen, zu dem der Übergang stattfindet, sowie auf die Operation, die den Übergang ausgelöst hat. In der obigen Animation werden fünf Elemente nacheinander bei Index 0 eingefügt. Wenn das fünfte und letzte Element eingefügt wird und der Ansicht "Element 4" hinzugefügt wird, wird der Übergang add einmal (für das eingefügte Element) und der Übergang displaced viermal (einmal für jedes der vier vorhandenen Elemente in der Ansicht) ausgeführt.

Wenn wir an dieser Stelle den Übergang displaced untersuchen, der für das unterste verschobene Element ("Element 0") ausgeführt wurde, würden die für diesen Übergang bereitgestellten ViewTransition-Eigenschaftswerte wie folgt lauten:

Die Listen ViewTransition.targetIndexes und ViewTransition.targetItems liefern die Elemente und Indizes aller Delegateninstanzen die das Ziel der relevanten Operation sind. Für eine add Operation sind dies alle Elemente die zur Ansicht hinzugefügt werden; für eine remove sind dies alle Elemente die aus der Ansicht entfernt werden, und so weiter. (Beachten Sie, dass diese Listen nur Verweise auf Elemente enthalten, die innerhalb der Ansicht oder ihrer zwischengespeicherten Elemente erstellt wurden; Ziele, die sich nicht im sichtbaren Bereich der Ansicht oder im Element-Cache befinden, sind nicht zugänglich).

Während also die Werte für ViewTransition.item, ViewTransition.index und ViewTransition.destination für jede einzelne Transition, die ausgeführt wird, variieren, sind die Werte für ViewTransition.targetIndexes und ViewTransition.targetItems für jede add und displaced Transition, die durch eine bestimmte Hinzufügung ausgelöst wird, gleich.

Animationen basierend auf dem Index verzögern

Da jeder Ansichtsübergang für jedes vom Übergang betroffene Element einmal ausgeführt wird, können die ViewTransition-Eigenschaften innerhalb eines Übergangs verwendet werden, um ein benutzerdefiniertes Verhalten für die Übergänge der einzelnen Elemente zu definieren. Zum Beispiel könnte die ListView im vorherigen Beispiel diese Informationen verwenden, um einen Welleneffekt bei der Bewegung der verschobenen Elemente zu erzeugen.

Dies kann erreicht werden, indem der Übergang displaced so modifiziert wird, dass er die Animation jedes verschobenen Elements basierend auf der Differenz zwischen seinem Index (bereitgestellt durch ViewTransition.index) und dem ersten entfernten Index (bereitgestellt durch ViewTransition.targetIndexes) verzögert:

    displaced: Transition {
        id: dispTrans
        SequentialAnimation {
            PauseAnimation {
                duration: (dispTrans.ViewTransition.index -
                        dispTrans.ViewTransition.targetIndexes[0]) * 100
            }
            NumberAnimation { properties: "x,y"; duration: 400; easing.type: Easing.OutBounce }
        }
    }

Jedes verschobene Element verzögert seine Animation um zusätzliche 100 Millisekunden, wodurch ein subtiler Welleneffekt entsteht, wenn Elemente durch das Hinzufügen verschoben werden, etwa so:

Animieren von Elementen an Zwischenpositionen

Die Eigenschaft ViewTransition.item gibt einen Verweis auf das Element, auf das der Übergang angewendet wird. Über diese Eigenschaft kann auf alle Attribute des Elements, die benutzerdefinierten Werte von property usw. zugegriffen werden.

Nachfolgend sehen Sie eine Modifikation des Übergangs displaced aus dem vorherigen Beispiel. Es wird ein ParallelAnimation mit verschachtelten NumberAnimation Objekten hinzugefügt, die auf ViewTransition.item verweisen, um auf die x und y Werte jedes Elements zu Beginn ihrer Übergänge zuzugreifen. Dadurch kann jedes Element zu einer Zwischenposition relativ zu seinem Startpunkt für den Übergang animiert werden, bevor es zu seiner endgültigen Position in der Ansicht animiert wird:

    displaced: Transition {
        id: dispTrans
        SequentialAnimation {
            PauseAnimation {
                duration: (dispTrans.ViewTransition.index -
                        dispTrans.ViewTransition.targetIndexes[0]) * 100
            }
            ParallelAnimation {
                NumberAnimation {
                    property: "x"; to: dispTrans.ViewTransition.item.x + 20
                    easing.type: Easing.OutQuad
                }
                NumberAnimation {
                    property: "y"; to: dispTrans.ViewTransition.item.y + 50
                    easing.type: Easing.OutQuad
                }
            }
            NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.OutBounce }
        }
    }

Jetzt bewegt sich ein verschobenes Element zunächst zu einer Position von (20, 50) relativ zu seiner Ausgangsposition und dann zu seiner endgültigen, korrekten Position in der Ansicht:

Da die endgültige NumberAnimation keinen to Wert angibt, setzt die Ansicht diesen Wert implizit auf die endgültige Position des Objekts in der Ansicht, so dass diese letzte Animation das Objekt an die richtige Stelle verschiebt. Wenn der Übergang die Endposition des Elements für eine Berechnung benötigt, ist diese über ViewTransition.destination zugänglich.

Anstatt mehrere NumberAnimations zu verwenden, können Sie eine PathAnimation verwenden, um ein Element über einen gekrümmten Pfad zu animieren. Der Übergang add aus dem vorherigen Beispiel könnte zum Beispiel wie folgt mit einem PathAnimation ergänzt werden: um neu hinzugefügte Elemente entlang eines Pfades zu animieren:

    add: Transition {
        id: addTrans
        NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 400 }
        NumberAnimation { property: "scale"; from: 0; to: 1.0; duration: 400 }

        PathAnimation {
            duration: 1000
            path: Path {
                startX: addTrans.ViewTransition.destination.x + 200
                startY: addTrans.ViewTransition.destination.y + 200
                PathCurve { relativeX: -100; relativeY: -50 }
                PathCurve { relativeX: 50; relativeY: -150 }
                PathCurve {
                    x: addTrans.ViewTransition.destination.x
                    y: addTrans.ViewTransition.destination.y
                }
            }
        }
    }

Damit werden neu hinzugefügte Elemente entlang eines Pfades animiert. Beachten Sie, dass jeder Pfad relativ zum endgültigen Zielpunkt jedes Elements angegeben wird, so dass Elemente, die an verschiedenen Indizes eingefügt werden, ihre Pfade von verschiedenen Positionen aus beginnen:

Umgang mit unterbrochenen Animationen

Ein Ansichtsübergang kann jederzeit unterbrochen werden, wenn ein anderer Ansichtsübergang angewendet werden muss, während der ursprüngliche Übergang im Gange ist. Angenommen, Element A wird bei Index 0 eingefügt und durchläuft einen "Hinzufügen"-Übergang; dann wird Element B bei Index 0 in schneller Folge eingefügt, bevor der Übergang von Element A beendet ist. Da Element B vor Element A eingefügt wird, verdrängt es Element A, was dazu führt, dass die Ansicht den "Hinzufügen"-Übergang von Element A auf halbem Weg unterbricht und stattdessen einen "Verschieben"-Übergang für Element A startet.

Bei einfachen Animationen, die lediglich die Bewegung eines Gegenstands bis zu seinem endgültigen Bestimmungsort animieren, ist es unwahrscheinlich, dass diese Unterbrechung zusätzliche Überlegungen erfordert. Wenn ein Übergang jedoch andere Eigenschaften ändert, kann diese Unterbrechung unerwünschte Nebeneffekte verursachen. Betrachten Sie das erste Beispiel auf dieser Seite, das hier der Einfachheit halber wiederholt wird:

ListView {
    width: 240; height: 320
    model: ListModel {}

    delegate: Rectangle {
        width: 100; height: 30
        border.width: 1
        color: "lightsteelblue"
        Text {
            anchors.centerIn: parent
            text: name
        }
    }

    add: Transition {
        NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 400 }
        NumberAnimation { property: "scale"; from: 0; to: 1.0; duration: 400 }
    }

    displaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 400; easing.type: Easing.OutBounce }
    }

    focus: true
    Keys.onSpacePressed: model.insert(0, { "name": "Item " + model.count })
}

Wenn mehrere Elemente in rascher Folge hinzugefügt werden, ohne den Abschluss eines vorherigen Übergangs abzuwarten, ist das Ergebnis wie folgt:

Jedes neu hinzugefügte Element durchläuft einen add Übergang, aber bevor der Übergang abgeschlossen werden kann, wird ein weiteres Element hinzugefügt und verdrängt das zuvor hinzugefügte Element. Aus diesem Grund wird der Übergang add für das zuvor hinzugefügte Element unterbrochen und stattdessen ein Übergang displaced für dieses Element gestartet. Aufgrund der Unterbrechung sind die Animationen opacity und scale noch nicht abgeschlossen, so dass die Deckkraft und die Skalierung der Elemente unter 1,0 liegen.

Um dies zu beheben, sollte der Übergang displaced zusätzlich sicherstellen, dass die Elementeigenschaften auf die Endwerte gesetzt werden, die im Übergang add angegeben sind, so dass diese Werte jedes Mal zurückgesetzt werden, wenn ein Element verschoben wird. In diesem Fall bedeutet dies, dass die Deckkraft und die Skalierung des Elements auf 1,0 gesetzt werden:

    displaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 400; easing.type: Easing.OutBounce }

        // ensure opacity and scale values return to 1.0
        NumberAnimation { property: "opacity"; to: 1.0 }
        NumberAnimation { property: "scale"; to: 1.0 }
    }

Wenn nun der Übergang eines Elements add unterbrochen wird, werden seine Deckkraft und Skala bei der Verschiebung auf 1,0 animiert, wodurch die fehlerhaften visuellen Effekte von vorher vermieden werden:

Das gleiche Prinzip gilt für jede Kombination von Ansichtsübergängen. Ein hinzugefügter Gegenstand kann verschoben werden, bevor sein Hinzufüge-Übergang beendet ist, oder ein verschobener Gegenstand kann entfernt werden, bevor sein Verschiebe-Übergang beendet ist, und so weiter; als Faustregel gilt also, dass jeder Übergang denselben Satz von Eigenschaften behandeln sollte.

Einschränkungen in Bezug auf ScriptAction

Wenn ein Ansichtsübergang initialisiert wird, werden alle Eigenschaftsbindungen, die sich auf die angehängte Eigenschaft ViewTransition beziehen, in Vorbereitung auf den Übergang ausgewertet. Aufgrund der Art des internen Aufbaus eines Ansichtsübergangs sind die Attribute der angehängten ViewTransition-Eigenschaft nur für das relevante Element gültig, wenn der Übergang initialisiert wird, und sind möglicherweise nicht gültig, wenn der Übergang tatsächlich ausgeführt wird.

Daher sollte eine ScriptAction innerhalb einer View Transition nicht auf die ViewTransition attached property verweisen, da sie sich möglicherweise nicht auf die erwarteten Werte zu dem Zeitpunkt bezieht, zu dem die ScriptAction tatsächlich aufgerufen wird. Betrachten Sie das folgende Beispiel:

ListView {
    width: 240; height: 320
    model: ListModel {
        Component.onCompleted: {
            for (var i=0; i<8; i++)
                append({"name": i})
        }
    }

    delegate: Rectangle {
        width: 100; height: 30
        border.width: 1
        color: "lightsteelblue"
        Text {
            anchors.centerIn: parent
            text: name
        }
        objectName: name
    }

    move: Transition {
        id: moveTrans
        SequentialAnimation {
            ColorAnimation { property: "color"; to: "yellow"; duration: 400 }
            NumberAnimation { properties: "x,y"; duration: 800; easing.type: Easing.OutBack }
            ScriptAction { script: moveTrans.ViewTransition.item.color = "lightsteelblue" }
        }
    }

    displaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 400; easing.type: Easing.OutBounce }
    }

    focus: true
    Keys.onSpacePressed: model.move(5, 1, 3)
}

Wenn die Leertaste gedrückt wird, werden drei Elemente von Index 5 nach Index 1 verschoben. Für jedes verschobene Element animiert die Sequenz moveTransition vermutlich die Farbe des Elements zu "gelb", dann animiert sie es zu seiner endgültigen Position und ändert dann die Farbe des Elements zurück zu "hellblau" mit Hilfe von ScriptAction. Bei der Ausführung führt der Übergang jedoch nicht zum gewünschten Ergebnis:

Nur das zuletzt verschobene Element erhält wieder die Farbe "lightsteelblue"; die anderen bleiben gelb. Das liegt daran, dass ScriptAction erst ausgeführt wird, nachdem der Übergang bereits initialisiert wurde. Zu diesem Zeitpunkt hat sich der Wert von ViewTransition.item geändert und bezieht sich auf ein anderes Element; das Element, auf das sich das Skript beziehen wollte, ist nicht das, das ViewTransition.item zum Zeitpunkt des tatsächlichen Aufrufs von ScriptAction enthält.

Um dieses Problem zu vermeiden, könnte die Ansicht in diesem Fall die Eigenschaft stattdessen mit PropertyAction setzen:

    move: Transition {
        id: moveTrans
        SequentialAnimation {
            ColorAnimation { property: "color"; to: "yellow"; duration: 400 }
            NumberAnimation { properties: "x,y"; duration: 800; easing.type: Easing.OutBack }
            //ScriptAction { script: moveTrans.ViewTransition.item.color = "lightsteelblue" } BAD!

            PropertyAction { property: "color"; value: "lightsteelblue" }
        }
    }

Wenn der Übergang initialisiert wird, wird die PropertyAction target auf das entsprechende ViewTransition.item für den Übergang gesetzt und wird später wie erwartet mit dem richtigen Elementziel ausgeführt.

Dokumentation der angehängten Eigenschaft