Animowanie android GridView przedmioty

Question

Chcę animować elementy gridview w taki sposób, że każdy element zostanie skoncentrowana w centrum widok i jedna pozycja jest widoczna, a następnie ponownie elementy siatki wracają do swojej pierwotnej pozycji. Dodałem obrazy dla większej przejrzystości. Przepływ animacji to Rys. 1 - Rys. 2 - Rys. 3 - Rys. 4 - Rys 1. Jak to zrobić?

Answer 1

I rozwiązać problem w następujący sposób:

A. znaleźć całkowitą szerokość (W) i wysokość (h) Gridview.

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

B. Znajdź środek (Cx, Cy) widoku Grid; Cx = szerokość/2, Cy = wysokość/2. Współrzędna x (Cx) zmieni się dla każdego elementu z rzędu. Współrzędna y (Cy) zmieni się dla każdego elementu w kolumnie.

C

1. Dla gridItem w pozycji (0,0) matrycy.

   znaleźć procent tłumaczenia

   x% = (Cx/W) * 100, Y% = (CY/W) * 100

   Przekłada element fromXDelta = 0 toXDelta = x% P fromYDelta = 0 doYDelta = y% p

2. Dla elementu grid w pozycji (0,1) macierzy. Współrzędna x środka GridView jest bliżej tego elementu, więc musimy odliczyć (widthOfEachItem + spacingBetweenItems).

   Teraz Cx = Cx - (widthOfEachItem + spacingBetweenItems)

   Tylko x koordynować będzie zmieniać się w tej sprawie. Współrzędna y pozostanie taka sama.

   znaleźć procent do tłumaczenia:

   x% = (Cx/W) * 100, Y% = (CY/W) * 100

   Przekłada element fromXDelta = 0 toXDelta = x% P odYDelta = 0 doYDelta = y% p

3. Dla elementu grid w pozycji (1,0) macierzy.

   Współrzędna y środka widoku siatki jest bliżej tego elementu, więc musimy odliczyć (heightOfTheItem + spacingBetweenItems).

   Teraz Cy = Cy - (heightOfTheItem + spacingBetweenItems)

   Tylko y koordynować będzie zmieniać się w tej sprawie. Współrzędna x pozostanie taka sama jak pozycja przedmiotu w punkcie (0,0).

   znaleźć procent tłumaczenia -

   x% = (Cx/w) * 100, Y% = (CY/W) * 100

   Przekłada element fromXDelta = 0 toXDelta = x% P odYDelta = 0 doYDelta = y% p

4. Dla elementu siatki na pozycji (1,1) macierzy.

   Współrzędna x środka GridView jest bliżej tego elementu, więc musimy odliczyć (widthOfEachItem + spacingBetweenItems).

   Teraz Cx = Cx - (widthOfEachItem + spacingBetweenItems)

   y współrzędna środka GridView jest bliżej do tej pozycji, więc mamy do odliczenia (heightOfTheItem + spacingBetweenItems).

   teraz Cy = Cy - (heightOfTheItem + spacingBetweenItems)

   X i Y koordynować będzie zmieniać się w tym przypadku.

   znaleźć procent tłumaczenia -

   x% = (Cx/w) * 100,% y = (CY/W) x 100;

   Przekłada element fromXDelta = 0 toXDelta = x% p = 0 toYDelta fromYDelta = y% p

   W ten sposób obliczyć wartości x% y% i dla wszystkich elementów w GridView.

   Dla pozycji w rzędzie poza pozycją centralną toXDelta będzie oznaczać -ve.

   Dla pozycji w kolumnie poza pozycją centralną toYDelta będzie oznaczać -ve.

   Aby dokładniej wyrównać elementy w środku (po animacji), należy rozważyć dodanie i odjęcie współrzędnych środka każdego elementu do środka widoku Grid.

   Po przetłumaczeniu pozycji z ich pierwotnej pozycji na środek, jeśli chcesz przetłumaczyć je z powrotem na ich pierwotną pozycję, po prostu ustaw wartości na * Delta -ve.

   To co zrobiłem dla elementu GridView na (0,0):

<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" />