ListView-scrolling-animation

Den ViewTransition bietet eine Menge interessanter Beispiele auf, wie zu animieren eine ListView für Operationen wie populate (der übergang für die ersten items auf Komponente erstellen), add, remove (selbsterklärend) sowie andere Operationen.

Gegeben ListView definieren Sie ein element Transition für jede operation, die Sie animieren möchten. Das Animations-framework genutzt werden können zu erstellen, die Verbindung von Animationen, einfach durch die Kombination der grundlegenden Animationen zu erstellen, die (mehr oder weniger) komplexe Verhalten, die Sie interessiert (siehe auch hier für ein Aktuelles Beispiel).

Hier eine definition für einen ListView (das erste verlinkte Dokument enthält einige nette Bilder):

ListView {

    //data model, delegate, other usual stuff here...

    //transitions for insertion/deletation of elements
    add: Transition {
        NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 500 }
        NumberAnimation { property: "scale"; easing.type: Easing.OutBounce; from: 0; to: 1.0; duration: 750 }
    }

    addDisplaced: Transition {
        NumberAnimation { properties: "y"; duration: 600; easing.type: Easing.InBack }
    }

    remove: Transition {
        NumberAnimation { property: "scale"; from: 1.0; to: 0; duration: 200 }
        NumberAnimation { property: "opacity"; from: 1.0; to: 0; duration: 200 }
    }

    removeDisplaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.OutBack }
    }
}

Schließlich ist zu beachten, dass einige Verhaltensweisen können erreicht werden durch die Verwendung von Shadern und die Kombination von animation auf die Elemente und übergänge, auf die der Delegierte/die Elemente der Delegierten. Ein schönes Beispiel ist Tweet-Suche, in denen ein shading-Effekt (siehe [ShaderEffect][5]) auf die bar-Element, kombiniert mit einer einfachen Transition auf ListView add.

BEARBEITEN

Bieten eine maßgeschneiderte scrollen wie in den Beispielen benötigt, um eine Berücksichtigung der position des Items innerhalb der ListView. Ein Schlüssel zu einer funktionierenden Lösung zu finden, eine Möglichkeit zum berechnen der aktuellen position des Item innerhalb der sichtbare Teil der Ansicht, und verwenden Sie diesen Wert, um die Berechnung der entsprechenden transformation. ListView stammt aus Flickable die mehrere nützliche Eigenschaften für diesen Zweck.

Jedoch die y Eigenschaft des Item im Sinne der insgesamt Höhe des Inhalts innerhalb des ListView. Um seine position w.r.t. Beginn des sichtbaren Bereichs, können wir die contentY Eigenschaft. Ein Bild sagt mehr als tausend Worte in diesem Fall:

Den Unterschied zwischen y und contentY liefert einen Wert, welche verwendet werden können zum berechnen der erforderlichen umwandlungsfaktor (vielleicht in Bezug auf die height des ListView). In der Tat, die ListView wird umgelegt, die beiden Werte und Ihrer Differenz ändern sich und so ändert sich der umwandlungsfaktor für eine bestimmte Item.

Solche transformation deckt nur Teil des Problems. Sobald die flicking/die Bewegung endet die Items animation muss "fertig" zu machen, alle sichtbaren items nutzbar. Für diesen Zweck können wir ausnutzen Binding und seine when Eigenschaft aktivieren Sie die finishing-animation nur bei Bedarf, d.h. wenn flicking oder ziehen endet.

Angesichts all dieser (langweilige) Einleitung, let ' s take in Konto die zweite animation (die einfachere). Hier können wir scale, um den gewünschten Effekt. Die delegate code innerhalb der ListView sieht wie folgt aus:

ListView {
    id: list
    model: 100
    spacing: 10

    delegate: Rectangle {
        id: itemDelegate
        property int listY: y - list.contentY       //stores the difference between the two values
        width: parent.width
        height: 50
        border.color: "lightgray"
        color: "red"

        Binding {
            target: itemDelegate
            property: "scale"
            value: 1 - listY / list.height / 2      //the "scale" property accepts values in the range [0, 1]
            when: list.moving || list.flicking || list.dragging     //...when moved around
        }

        Binding {
            target: itemDelegate
            property: "scale"
            value: 1                                //flick finished --> scale to full size!
            when: !(list.moving || list.dragging)   //not moving or dragging any more
        }

        Behavior on scale {
            NumberAnimation { duration: 100; to: 1}
            enabled: !(list.flicking || list.dragging) //active only when flick or dragging ends!
        }
    }
}

Den ersten Binding definieren Sie den Skalierungsfaktor auf der basis von listY während der zweite die Skalierung auf 1 aber nur, wenn die ListView bewegt sich nicht. Die endgültige Behavior ist notwendig, um glatt den übergang in die vollständig skalierte Item.

Die Dritte Wirkung kann erhalten werden, in ähnlicher Weise mit einem Rotation:

ListView {
    anchors.fill: parent
    id: list
    spacing: 10
    model: 100

    delegate: Rectangle {
        id: itemDelegate
        property int listY: y - list.contentY
        property real angleZ: (90 * listY)  / list.height       //0 - 90 degrees
        transform: Rotation { origin.x: width / 2; origin.y: 30; axis { x: 1; y: 0; z: 0 } angle: angleZ}
        //transform: Rotation { origin.x: 0; origin.y: 30; axis { x: 1; y: 1; z: 0 } angle: angleZ}     <--- I like this one more!
        width: parent.width
        height: 50
        border.color: "lightgray"
        color: "red"

        Binding {
            target: itemDelegate
            property: "angleZ"
            value: 0
            when: !(list.moving || list.dragging)
        }

        Behavior on angleZ {
            NumberAnimation {duration: 200; to: 0}
            enabled: !(list.flicking || list.dragging)
        }
    }
}

Diese Zeit habe ich gewählt, zu (willkürlich) nur ein Binding. Die gleichen hätte, für das erste Beispiel, also konnten wir geschrieben haben in den ersten Delegierten scale: 1 - listY /list.height /2.

Nach einem ähnlichen Ansatz kann man auch die erste animation und andere. Für die erste animation ich denke, dass die Kombination einer Rotation mit einem Translate sollte ausreichen.

Einen Pfadansicht zeigt die Daten aus der erstellten Modelle von built-in QML Typen wie ListModel und XmlListModel oder custom-Modell definierten Klassen in C++, die Erben von QAbstractListModel.
Die Ansicht hat ein Modell definiert, das Daten angezeigt werden, und eine Stellvertretung, die definiert, wie die Daten angezeigt werden sollen. Der Delegat instanziiert wird für jedes Element auf dem Weg. Die Elemente können schnippte Sie zu bewegen, den Weg entlang.