This article specifically includes: the rotation animation when the order of the list item data changes, the small animation when the list item is added/deleted, and the animation of the side slide deletion

Don’t crap, is mainly introduced in this paper a Modifier: Modifier. AnimateItemPlacement (). This modifier first appeared in Jetpack Compose version 1.0-Beta03 (released November 17, 2021) and is currently in an experimental phase. But it’s very interesting what it can do.

Sequence change animation

Here’s a quick example:

var list by remember { mutableStateOf(listOf("A", "B", "C", "D", "E"))} LazyColumn {item {Button(onClick = {list = list.shuffled()}) {Text(" shuffled ")}} items(items = list, Key = {it} {the Text (" it "list items: $, Modifier. AnimateItemPlacement ())}}Copy the code

The running effect is as follows:

So simple to implement!

Swipe to remove the animation

In Jetpack Compose, the SwipeToDismiss widget is used for SwipeToDismiss

Here’s a simple example:

Data types:

 data class Student(val id:Int, val name:String)
Copy the code

Micro parts

var studentList by remember { mutableStateOf( (1.. 100).map { Student(it, "Student $it") } ) } LazyColumn( modifier = Modifier.fillMaxWidth(), verticalArrangement = Arrangement.spacedBy(8.dp) ) { items(studentList, key = {item: Student -> item.id}){color = foreground; color = foreground; color = foreground; Specific data changes here if (dismissState isDismissed (DismissDirection. StartToEnd)) {studentList = studentList. ToMutableList () of { it.remove(item) } } SwipeToDismiss( state = dismissState, AnimateItemPlacement () This modifier adds animation modifier = modification.fillMaxWidth ().animateItemPlacement(), ; // This parameter is requested to dismissThresholds = {direction -> FractionalThreshold(if (direction ==) DismissDirection. StartToEnd) 0.25 f else 0.5 f)}, / / allow the direction of the sliding delete directions = setOf (DismissDirection. StartToEnd), / / "background", Background = {/* Ensure the viewing experience. */ Text(item.name, Modifier. Padding (8.dp), fontSize = 28.sp)}}}Copy the code

The effect is as follows:

The above code comes fromandroid – SwipeToDismiss inside LazyColumn with animation – Stack Overflow

other

The animateItemPlacement modifier is valid only for LazyColumn and LazyRow, and the key parameter must be specified. In addition to rearrangement, position changes caused by changing alignment or Arrangement will also be animated.

This modifier takes an optional parameter: animationSpec: FiniteAnimationSpec

, which you can modify to change the animation effect.

Afterword.

I’ve been thinking about writing this article for a long time, but I’ve been putting it off until now. In fact, what the article wrote is to introduce an API, but this API is very useful, and there is no Chinese information, so I wrote. Make your own contribution.

All of the code for this article can be found here, along with an official Google example. If you’re interested, take a look.