Animation

Question

I want to animate gridview elements so that each element is concentrated in the center of the view and one element is visible, and then again the grid elements return to their original position. I have added images for clarity. The animation flow is shown in fig. 1. Fig. 3 - Fig. 4 - Fig. 1. How can this be done?

Answer 1

I solved the problem this way:

but. Find the total width (W) and height (H) of the Gridview.

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

B. Find the center of the (Cx, Cy) Gridview; Cx = width / 2, Cy = height / 2. The x (Cx) coordinate will change for each item in the row. The y (Cy) coordinate will change for each item in the column.

FROM.

• For the gridItem element at position (0,0) of the matrix.

  Find the percentage to transfer

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

  Translate the element fromXDelta = 0 toXDelta = x% p fromYDelta = 0 toYDelta = y% p

• For the gridItem element at position (0,1) of the matrix. The x coordinate of the center of the GridView is closer for this element, so we need to subtract (widthOfEachItem + spacingBetweenItems).

  Now Cx = Cx - (widthOfEachItem + spacingBetweenItems)

  In this case, only the x coordinate will change. y coordinate will remain the same.

  Find the percentage for the transfer:

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

  Translate the element fromXDelta = 0 toXDelta = x% p fromYDelta = 0 toYDelta = y% p

• For the gridItem element at position (1,0) of the matrix.

  The y coordinate of the Gridview center is closer for this element, so we need to subtract (heightOfTheItem + spacingBetweenItems).

  Now Cy = Cy - (heightOfTheItem + spacingBetweenItems)

  In this case, only the y coordinate will change. x will remain the same as the position of the element (0,0).

  Find the percentage for the transfer -

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

  Translate the element fromXDelta = 0 toXDelta = x% p fromYDelta = 0 toYDelta = y% p

• For the grid element in position (1,1) of the matrix.

  The x coordinate of the center of the GridView is closer for this element, so we have to subtract (widthOfEachItem + spacingBetweenItems).

  Now Cx = Cx - (widthOfEachItem + spacingBetweenItems)

  The y coordinate of the center of the GridView is closer for this element, so we need to subtract (heightOfTheItem + spacingBetweenItems).

  Now Cy = Cy - (heightOfTheItem + spacingBetweenItems)

  In this case, the x and y coordinates change.

  Find the percentage for the transfer -

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

  Translate the element fromXDelta = 0 toXDelta = x% p fromYDelta = 0 toYDelta = y% p

  Thus, calculate the x% and y% values ​​for all the elements in the GridView.

  For items in a row outside the central toXDelta, there will be -ve.

  For items in the column behind the central toYDelta, there will be -ve.

  For more precise alignment of elements in the center (after animation), consider adding and subtracting the coordinate of the center of each element in the center of the Gridview.

  After moving the elements from their initial position to the center, if you want to return them to their original position, simply enter the values ​​in * Delta -ve.

  This is what I did for the GridView element in (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" /> 

code>