Animation for Rows/Columns in Jetpack Compose

Viewed 1578

I am trying out and learning Jetpack Compose. There I have

Columns {
   //..
}

or

Rows{
   //..
}

with simple UI elements like ImageViews, which are then shown horizontically or vertically. I already navigate through for instance a row and highlight currently selected ImageView.

My intention is I would like to select an ImageView in that row and change its position somewhere else in that row ... with an animation:

  1. Navigate to a ImageView with left and right arrowkeys (already done)
  2. Select currently with e.g. enter key (already done)
  3. Animation: Selected ImageView (from step 2) shall move slightly up
  4. Animation: Press left and right to move up animated ImageView (from step 3) to indicate new position. I would also change that image views opacity.
  5. Animation: I also think of to separate adjacent ImageViews to indicate where to drop the previously selected ImageView.

Since I am new to Composables, I've heard something about Modifier.animations(), but I do not really know the best way to realize the animations in step 3-5? Maybe there is an example app/project with nice animations?!

0 Answers
Related