ListView défilement de l'animation

La ViewTransition fournit beaucoup d'exemples intéressants sur la façon d'animer une ListView pour des opérations comme populate (période de transition pour les premiers points lors de la création de composant), add, remove (auto-explicatifs) ainsi que d'autres opérations.

Donné un ListView vous définissez un élément Transition pour chaque opération que vous souhaitez animer. L'animation du cadre de peuvent être exploitées pour créer des composés animations, simplement en combinant les animations de base pour créer la (plus ou moins) un comportement complexe qui vous intéressent (voir aussi ici pour un exemple).

Ici une définition pour un ListView (le premier document lié fournit quelques belles images):

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

Enfin, notez que certains comportements peuvent être obtenus en utilisant les Shaders et la combinaison de l'animation sur les éléments et les transitions sur la délégué/éléments de la déléguer. Un bel exemple est Tweet De Recherche, dans lequel un effet d'ombrage (voir [ShaderEffect][5]) sur l'élément de barre est combiné avec un simple Transition sur ListView add.

MODIFIER

Personnalisé de défilement comme dans les exemples nécessite de prendre en compte la position de la Items à l'intérieur de la ListView. La clé d'une solution de travail est de trouver une façon de calculer la position actuelle de la Item à l'intérieur de la partie visible de la vue et utiliser cette valeur pour calculer la transformation appropriée. ListView dérive de Flickable qui a plusieurs propriétés utiles à cette fin.

Cependant, la y propriété de la Item est visée à l' globale hauteur du contenu à l'intérieur de la ListView. Pour avoir sa position.w.r.t. le début de la zone visible, nous pouvons utiliser la contenu de la propriété. Une image vaut mille mots, dans ce cas:

La différence entre y et contentY fournit une valeur qui peut être utilisé pour calculer la facteur de transformation (peut-être par rapport à la height de la ListView). En effet, comme le ListView est activé, les deux valeurs et leur changement dans la différence et donc modifie le facteur de transformation pour un Item.

Une telle transformation ne couvre que partie du problème. Une fois le claquement/mouvement se termine le Items de l'animation doit être "fini" à faire tout le visible items utilisable. Pour cet effet, nous pouvons exploiter Liaison et ses when propriété d'activer la finition de l'animation que lorsque c'est nécessaire, c'est à dire quand feuilleter ou glisser se termine.

Compte tenu de tout cela, (ennuyeux) introduction, nous allons prendre en compte la deuxième animation (le plus simple). Ici, nous pouvons utiliser échelle pour obtenir l'effet désiré. Le delegate code à l'intérieur de la ListView se présente comme suit:

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

La première Binding définir le facteur d'échelle sur la base de listY tandis que le second jeu de la mise à l'échelle de 1, mais seulement lorsque le ListView n'est pas en mouvement. La finale Behavior est nécessaire de lisse la transition à l'échelle Item.

Le troisième effet peut être obtenu d'une manière similaire avec un 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)
        }
    }
}

Cette fois j'ai choisi (arbitrairement) utiliser une seule Binding. La même pourrait avoir été fait pour le premier exemple, c'est à dire que nous pourrions avoir écrit dans la première, délégué scale: 1 - listY /list.height /2.

Suivant une approche similaire vous pouvez également créer le premier film d'animation et autres. Pour la première animation, je pense que la combinaison d'un Rotation avec un Translate devrait suffire.

OriginalL'auteur BaCaRoZzo

Un PathView affiche les données à partir de modèles créés à partir intégré dans QML types comme ListModel et XmlListModel, ou modèle de classes en C++ qui héritent de QAbstractListModel.
Le point de vue d'un modèle, qui définit les données à afficher, et un délégué, qui définit la façon dont les données doivent être affichées. Le délégué est instancié pour chaque élément du chemin d'accès. Les éléments peuvent être effleuré de les déplacer le long du chemin.

OriginalL'auteur zSilas