Travis Griggs
03/30/2023, 10:00 PMChris Sinco [G]
03/30/2023, 10:39 PMTravis Griggs
03/30/2023, 10:55 PMDoris Liu
03/30/2023, 11:22 PMAnimatedVisibility
? Combining shrink
/`expand` with slide
might get you close to what you want.Travis Griggs
03/31/2023, 12:17 AMRow(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 10.dp),
verticalAlignment = Alignment.CenterVertically
) {
Icon( ... )
Spacer(modifier = Modifier.width(4.dp))
Text(text = keyInfo.name, modifier = Modifier.weight(1.0f), maxLines = 1)
Spacer(modifier = Modifier.width(10.dp))
SettingsLabel(text = keyInfo.created.shortPrinted())
AnimatedVisibility(visible = allowSelection,
enter = slideInHorizontally(initialOffsetX = { w -> w }),
exit = slideOutHorizontally(targetOffsetX = { w -> w })
) {
IconButton(
onClick = onSelectionClick, modifier = Modifier
.padding(start = 16.dp)
.size(28.dp)
) {
when (isSelected) {
true -> Icon(
Icons.Outlined.CheckCircle, "${keyInfo.name} selected for edit"
)
false -> Icon(
Icons.Default.RadioButtonUnchecked, "${keyInfo.name} not selected for edit"
)
}
}
}
}
}
Doris Liu
03/31/2023, 1:14 AMAnimatedVisibility(visible = allowSelection,
enter = slideInHorizontally(...) + expandHorizontally(), exit = slideOutHorizontally(..) + shrinkHorizontally() )
The expand and shrink would create a size animation, which will influence the placement of sibling and result in a placement animation.Travis Griggs
03/31/2023, 1:24 AMDoris Liu
03/31/2023, 1:33 AMexpandHorizontally
to AnimatedVisibility? Can you share a video?Chris Sinco [G]
03/31/2023, 1:34 AMCode.Nguyennn
03/31/2023, 3:08 AMTravis Griggs
03/31/2023, 2:58 PMenter = slideInHorizontally(initialOffsetX = { w -> w }) + expandHorizontally(expandFrom = Alignment.End),
exit = slideOutHorizontally(targetOffsetX = { w -> w }) + shrinkHorizontally(shrinkTowards = Alignment.End)
And now it looks beautiful. It's amazing how bad a janky/partial animation looks, and how convincing and comfortable a solid thorough animation looks.
What I want to understand now is WHY this works?? Both transforms just seem like things that some black magic engine is using to move from an original layout box to a target layout box. But in one case (the slides), the Row composition seems indifferent to the intermediate process, adjusting siblings only at the end. But with the expand transitions, the Row composition suddenly becomes real time aware of this element and adjusts the other elements accordingly.Doris Liu
03/31/2023, 4:08 PMChris Sinco [G]
03/31/2023, 4:42 PMTravis Griggs
03/31/2023, 8:54 PM