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 ListViewadd.
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:10delegate:Rectangle{
id: itemDelegate
propertyint 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:
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.
Je sais que sur ListView et ViewTransition. Veuillez noter que j'ai envie de DÉFILEMENT de l'ANIMATION n'est pas juste ajouter/supprimer/ déplacer... d'animation. Pouvez-vous me conseiller? Désolé, Il semble que je suis totalement à côté de la question alors. Pour ce qui concerne le point principal de la question, je l'ai étudié la même fonctionnellement et je me souviens d'un exemple intéressant. Je vais poster un lien (et remontez la réponse) dès que je vais le trouver. Désolé encore une fois. Merci beaucoup 🙂 Désolé pour le retard. L'exemple que j'ai eu était seulement pour l'élément sélectionné donc pas de transition progressive, j'ai été absent du bureau et, le dernier mais non le moindre, j'ai eu quelques problèmes avec y (était juste la fin de la nuit...longue histoire ici et un grand merci à Jens à la fin). En tout cas, j'espère que cette approche répond à vos besoins. Je vous remercie beaucoup. Vous m'avez donné une meilleure vision sur ce problème. J'ai partagé ma dernière solution pour vous et tout le monde. Je tiens à vous donner une note, mais il semble qu'il n'y est pas 🙁 Merci encore
Après de nombreuses heures de travail, de la recherche et @BaCaRoZzo est une grande aide (Merci @BaCaRoZzo), j'ai enfin trouvé la bonne solution. Utilisez simplement Component.onCompleted() gestionnaire d'événements pour exécuter l'animation associée à chaque délégué.
Voici un exemple, profitez-en!
importQtQuick2.3ListView{
anchors.fill: parent
id:list
model:100
cacheBuffer:50delegate:Rectangle{
id: itemDelegate
Component.onCompleted: showAnim.start();
transform:Rotation{ id:rt; origin.x: width; origin.y: height; axis { x:0.3; y:1; z:0} angle:0}// <--- I like this one more!
width: parent.width
height:50
color: index %2===0?"#EEE":"#DDD"SequentialAnimation{
id: showAnim
running:falseRotationAnimation{ target: rt; from:180; to:0; duration:800; easing.type:Easing.OutBack;property:"angle"}}}}
Ouais, excellente solution! Je ne l'ai toujours pas correspondre à vos besoins, mais au moins j'ai été utile et j'en suis tres content. 🙂 Aussi, je vais jouer avec votre solution pour vous. L'amour c'. 🙂
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.
Je vous remercie. Je l'ai vérifié. Il semble être applicable pour la résolution. Mais le Défilement de l'Animation a des comportements différents. Éléments invisibles, doit devient visible et remplit la liste de la zone visible avec une animation sur le défilement. Le PathView n'a pas suffisamment de conduite et ne répond à ce problème :\ . Jetez un oeil à l'échantillon vidéo codecanyon.net/item/android-listview-animations/4179731
La ViewTransition fournit beaucoup d'exemples intéressants sur la façon d'animer une
ListView
pour des opérations commepopulate
(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émentTransition
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):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 simpleTransition
surListView
add
.MODIFIER
Personnalisé de défilement comme dans les exemples nécessite de prendre en compte la position de la
Item
s à l'intérieur de laListView
. La clé d'une solution de travail est de trouver une façon de calculer la position actuelle de laItem
à l'intérieur de la partie visible de la vue et utiliser cette valeur pour calculer la transformation appropriée.ListView
dérive deFlickable
qui a plusieurs propriétés utiles à cette fin.Cependant, la
y
propriété de laItem
est visée à l' globale hauteur du contenu à l'intérieur de laListView
. Pour avoir sa position.w.r.t. le début de la zone visible, nous pouvons utiliser lacontenu
de la propriété. Une image vaut mille mots, dans ce cas:La différence entre
y
etcontentY
fournit une valeur qui peut être utilisé pour calculer la facteur de transformation (peut-être par rapport à laheight
de laListView
). En effet, comme leListView
est activé, les deux valeurs et leur changement dans la différence et donc modifie le facteur de transformation pour unItem
.Une telle transformation ne couvre que partie du problème. Une fois le claquement/mouvement se termine le
Item
s de l'animation doit être "fini" à faire tout le visibleitem
s utilisable. Pour cet effet, nous pouvons exploiterLiaison
et seswhen
propriété d'activer la finition de l'animation que lorsque c'est nécessaire, c'est à dire quandfeuilleter
ouglisser
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é. Ledelegate
code à l'intérieur de laListView
se présente comme suit:La première
Binding
définir le facteur d'échelle sur la base delistY
tandis que le second jeu de la mise à l'échelle de1
, mais seulement lorsque leListView
n'est pas en mouvement. La finaleBehavior
est nécessaire de lisse la transition à l'échelleItem
.Le troisième effet peut être obtenu d'une manière similaire avec un
Rotation
: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 unTranslate
devrait suffire.Désolé, Il semble que je suis totalement à côté de la question alors. Pour ce qui concerne le point principal de la question, je l'ai étudié la même fonctionnellement et je me souviens d'un exemple intéressant. Je vais poster un lien (et remontez la réponse) dès que je vais le trouver. Désolé encore une fois.
Merci beaucoup 🙂
Désolé pour le retard. L'exemple que j'ai eu était seulement pour l'élément sélectionné donc pas de transition progressive, j'ai été absent du bureau et, le dernier mais non le moindre, j'ai eu quelques problèmes avec
y
(était juste la fin de la nuit...longue histoire ici et un grand merci à Jens à la fin). En tout cas, j'espère que cette approche répond à vos besoins.Je vous remercie beaucoup. Vous m'avez donné une meilleure vision sur ce problème. J'ai partagé ma dernière solution pour vous et tout le monde. Je tiens à vous donner une note, mais il semble qu'il n'y est pas 🙁 Merci encore
OriginalL'auteur BaCaRoZzo
Après de nombreuses heures de travail, de la recherche et @BaCaRoZzo est une grande aide (Merci @BaCaRoZzo), j'ai enfin trouvé la bonne solution. Utilisez simplement
Component.onCompleted()
gestionnaire d'événements pour exécuter l'animation associée à chaque délégué.Voici un exemple, profitez-en!
OriginalL'auteur S.M.Mousavi
Un
PathView
affiche les données à partir de modèles créés à partir intégré dans QML types commeListModel
etXmlListModel
, ou modèle de classes en C++ qui héritent deQAbstractListModel
.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