ListView Scroll-Animation

Nach vielen Stunden Arbeit, Recherchen und @ BaCaRozZos großer Hilfe (Thanks @ BaCaRoZzo) habe ich endlich die richtige Lösung gefunden. Verwenden Sie den Ereignishandler Component.onCompleted() , um die jedem Delegierten zugeordnete Animation auszuführen.

Hier ist ein Beispiel, viel Spaß!

Die ViewTransition bietet viele interessante Beispiele zur Animation eines ListView für Operationen wie populate (der Übergang für die ursprünglichen Elemente bei der Komponentenerstellung), add , remove (selbsterklärend) sowie andere Operationen.

Wenn Sie ListView angeben, definieren Sie für jede Operation, die Sie animieren möchten, ein Element Transition . Das Animationsframework kann genutzt werden, um zusammengesetzte Animationen zu erstellen, indem einfach das Basic kombiniert wird Animationen, um das (mehr oder weniger) komplexe Verhalten zu erzeugen, an dem Sie interessiert sind (siehe auch hier für ein aktuelles Beispiel).

Hier eine Definition für ein ListView (das erste verlinkte Dokument liefert einige schöne Bilder):

Beachten Sie schließlich, dass einige Verhaltensweisen durch die Verwendung von Shadern und die Kombination von Animationen für die Elemente und Übergänge auf den Delegaten / Elementen des Delegaten erzielt werden können. Ein schönes Beispiel ist Tweet Search , in dem ein Schattierungseffekt (vgl [ShaderEffect][5] ) auf dem Balkenelement wird mit einem einfachen Transition in ListView add kombiniert.

BEARBEITEN

Wenn Sie ein benutzerdefiniertes Scrolling wie in den Beispielen benötigen, müssen Sie die Position von Item s innerhalb von ListView berücksichtigen. Ein Schlüssel zu einer funktionierenden Lösung besteht darin, eine Möglichkeit zu finden, die aktuelle Position von Item innerhalb des sichtbaren Teils der Ansicht zu berechnen und diesen Wert zur Berechnung der entsprechenden Transformation zu verwenden. ListView stammt von Flickable ab, welches zu diesem Zweck mehrere nützliche Eigenschaften besitzt.

Die y -Eigenschaft von Item bezieht sich jedoch auf die Gesamthöhe des Inhalts innerhalb von ListView . Um seine Position w.r.t. Den Anfang des sichtbaren Bereichs können wir verwenden contentY Eigentum. Ein Bild sagt in diesem Fall mehr als tausend Worte:

Die Differenz zwischen y und contentY liefert einen Wert, der zur Berechnung des erforderlichen Transformationsfaktors verwendet werden kann (möglicherweise in Bezug auf height von ListView ). In der Tat ändern sich die beiden Werte und ihre Differenz, wenn der ListView gerippt wird, und ändert so den Transformationsfaktor für eine bestimmte Item .

Eine solche Transformation deckt nur den Teil des Problems ab. Sobald die Bewegung beendet ist, muss die Item s Animation beendet sein, um alle sichtbaren item s nutzbar zu machen. Zu diesem Zweck können wir Binding und dessen Eigenschaft when nutzen aktiviere die Finishing-Animation nur bei Bedarf, zB wenn flicking oder dragging endet.

Nehmen wir angesichts all dieser (langweiligen) Einführung die zweite Animation (die einfachere) in Betracht. Hier können wir scale verwenden, um den gewünschten Effekt zu erzielen . Der Code delegate in ListView sieht wie folgt aus:

Der erste Binding definiert den Skalierungsfaktor auf Basis von listY , während der zweite die Skalierung auf 1 setzt, aber nur wenn ListView sich nicht bewegt. Das letzte Behavior ist notwendig, um den Übergang zum vollständig skalierten Item zu glätten .

Der dritte Effekt kann auf ähnliche Weise mit einer Rotation :

Diesmal habe ich gewählt, um (beliebig) nur ein Binding zu verwenden. Das gleiche könnte für das erste Beispiel verwendet worden sein, d. h. wir hätten in den ersten Delegierten scale: 1 - listY / list.height / 2 schreiben können.

Nach einem ähnlichen Ansatz können Sie auch die erste und andere Animationen erstellen. Für die erste Animation denke ich, dass ich ein Rotation mit einem Translate sollte ausreichen.

Ein PathView zeigt Daten von Modellen an, die aus integrierten QML-Typen erstellt wurden wie ListModel und XmlListModel oder benutzerdefinierte Modellklassen, die in C ++ definiert sind und die von QAbstractListModel erben. Die Ansicht enthält ein Modell, das die anzuzeigenden Daten definiert, und einen Delegaten, der definiert, wie die Daten angezeigt werden sollen. Der Delegat wird für jedes Element auf dem Pfad instanziiert. Die Elemente können umgeblättert werden, um sie entlang des Pfades zu bewegen.