Animate android Gridview Artikel

Question

Ich möchte die Elemente eines Gridview animieren, so dass jedes Element zum Zentrum von konzentriert wird Ansicht und ein Element ist sichtbar, und dann werden die Gitterelemente wieder an ihre ursprüngliche Position verschoben. Ich habe Bilder zur besseren Übersicht hinzugefügt. Der Ablauf der Animation ist Abb. 1- Abb. 2- Abb. 3 - Abb. 4 - Abb. 1. Wie kann es gemacht werden?

Answer 1

ich das Problem auf diese Weise gelöst:

A. die Gesamtbreite Finden (W) und Höhe (H) des Gridview.

W = (widthOfEachItem*totalItem) + (spacingBetweenItems*(totalItem-1)) 
H = (heightOfTheItem*totalItem) + (spacingBetweenItems*(totalItem-1)) 

B. Suchen Sie das Zentrum (Cx, Cy) der Gridview; Cx = Breite/2, Cy = Höhe/2. Die x-Koordinate (Cx) wird für jedes Element in einer Zeile geändert. Die y-Koordinate (Cy) ändert sich für jedes Element in einer Spalte.

C.

1. Für die GridItem an der Position (0,0) der Matrix.

   den Prozentsatz für die Translation Suche

   x% = (Cx/W) · 100, y% = (Cy/W) · 100

   Übersetzen das Element fromXDelta = 0 toXDelta = x% p fromYDelta = 0 bis YDelta = y% p

2. Für das gridItem bei Position (0,1) der Matrix. Die x-Koordinate des Mittelpunkts der GridView ist für dieses Objekt näher, daher müssen wir ableiten (widthOfEachItem + spacingBetweenItems).

   Jetzt Cx = Cx - (widthOfEachItem + spacingBetweenItems)

   Nur x-Koordinate wird in diesem Fall ändern. Ihre Koordinaten bleiben gleich.

   den Prozentsatz für die Übersetzung Finde:

   x% = (Cx/W) · 100, y% = (Cy/W) · 100

   Übersetzen das Element fromXDelta = 0 toXDelta = x% P fromYDelta = 0 bis YDelta = y% p

3. Für das gridItem bei Position (1,0) der Matrix.

   Die y-Koordinate des Mittelpunkts der Gridview ist näher für diesen Artikel, daher müssen wir ableiten (heightOfTheItem + spacingBetweenItems).

   Jetzt Cy = Cy - (heightOfTheItem + spacingBetweenItems)

   Nur y-Koordinate wird in diesem Fall ändern. x Koordinate bleibt die gleiche wie bei (0,0).

   den Prozentsatz für die Translation Suche -

   x% = (Cx/W) · 100, y% = (Cy/W) · 100

   Übersetzen des Elements fromXDelta = 0 toXDelta = x% P fromYDelta = 0 bis YDelta = y% p

4. Für das Rasterelement an Position (1,1) der Matrix.

   Die x-Koordinate der Mitte der GridView ist näher für dieses Element, so dass wir abziehen müssen (widthOfEachItem + spacingBetweenItems).

   Jetzt Cx = Cx - (widthOfEachItem + spacingBetweenItems)

   Das y-Koordinate des Zentrums des Gridview ist näher zu diesem Artikel, so müssen wir abziehen (heightOfTheItem + spacingBetweenItems).

   Jetzt Cy = Cy - (heightOfTheItem + spacingBetweenItems)

   Sowohl x und y-Koordinate in diesem Fall ändern wird.

   Finden den Prozentsatz für die Übersetzung -

   x% = (Cx/W) · 100, y% = (Cy/W) · 100;

   das Element Übersetzen fromXDelta = 0 toXDelta = x% p fromYDelta = 0 toYDelta = y% p

   Auf diese Weise die Werte von x% und y% für alle Elemente im Gridview berechnen.

   Für die Elemente in einer Reihe hinter dem zentralen Element wird das toXDelta -ve sein.

   Für die Elemente in einer Spalte hinter dem zentralen Element wird das toYDelta -ve sein.

   Für eine genauere Ausrichtung der Elemente in der Mitte (nach der Animation) ziehen Sie es in Betracht, die Koordinate des Mittelpunkts jedes Elements zur Mitte der Gridview hinzuzufügen und von ihr abzuziehen.

   Nach dem Übersetzen der Elemente von ihrer ursprünglichen Position in die Mitte, wenn Sie sie zurück in ihre ursprüngliche Position zu übersetzen möchten, nur die Werte von zu * Delta -ve.

   Dies ist, was ich für das Gridview-Element an (0,0) getan habe:

<translate 
      android:duration="600" 
      android:fromXDelta="0%p" 
      android:fromYDelta="0%p" 
      android:toXDelta="-7.8%p" 
      android:toYDelta="33.40%p" /> 
     <translate 
      android:duration="600" 
      android:fromXDelta="0%p" 
      android:fromYDelta="0%p" 
      android:startOffset="1050" 
      android:toXDelta="7.8%p" 
      android:toYDelta="-33.40%p" />