Alexandru Hadăr
03/30/2022, 10:25 AMAnimatedVisibility
, the animation seems a bit staggering/sluggish. After I’ve played a coupled of times with it, it moves smoothly.
I tend to believe this is due to some kind of lazy initialization? Or what could be the case and what could be the solution?
I’m using compose version 1.1.1
🧵Alexandru Hadăr
03/30/2022, 10:26 AMAlexandru Hadăr
03/30/2022, 10:29 AMexpand
+ fade
, but then I changed to
AnimatedVisibility(
visible = selected,
enter = expandVertically(
animationSpec = spring(stiffness = Spring.StiffnessHigh)
),
exit = shrinkVertically(
animationSpec = spring(stiffness = Spring.StiffnessHigh)
))
and it’s the result you see in the videof.babic
03/30/2022, 11:20 AMAlexandru Hadăr
03/30/2022, 11:31 AMAlexandru Hadăr
03/30/2022, 11:31 AM@ExperimentalAnimationApi
@Composable
fun CollapsableCard(article: Article) {
var selected by remember(article) { mutableStateOf(false) }
val stiffnes: Float = Spring.StiffnessMedium
val borderColor = animateColorAsState(targetValue = if (selected) LimedSpruce else LightGray)
Column(
modifier = Modifier
.fillMaxWidth()
.clip(RoundedCornerShape(8.dp))
.clickable { selected = !selected }
.border(BorderStroke(2.dp, borderColor.value), shape = RoundedCornerShape(8.dp))
.padding(8.dp)
) {
article.image?.let { photoUrl ->
AnimatedVisibility(
visible = selected,
enter = expandVertically(
animationSpec = spring(stiffness = stiffnes)
),
exit = shrinkVertically(
animationSpec = spring(stiffness = stiffnes)
)
) {
Box(modifier = Modifier
.fillMaxWidth()
.height(100.dp)
.background(Color.Red))
}
}
Spacer(Modifier.height(12.dp))
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.padding(horizontal = 8.dp)
) {
Icon(
painter = painterResource(id = R.drawable.ic_streak), contentDescription = null,
Modifier
.size(36.dp)
.clip(CircleShape)
.background(LightGray)
.padding(8.dp)
)
Spacer(modifier = Modifier.width(8.dp))
Text(article.title, style = MaterialTheme.typography.subtitle1, fontWeight = FontWeight.Bold)
}
Spacer(Modifier.height(12.dp))
AnimatedVisibility(
visible = selected,
enter = expandVertically(
animationSpec = spring(stiffness = stiffnes)
),
exit = shrinkVertically(
animationSpec = spring(stiffness = stiffnes)
)
) {
Column {
article.description?.let {
Text(
text = it,
style = MaterialTheme.typography.body2,
modifier = Modifier.padding(start = 8.dp, end = 8.dp, bottom = 8.dp)
)
}
Row(
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 8.dp),
horizontalArrangement = Arrangement.SpaceBetween
) {
ButtonWithIcon(
modifier = Modifier.weight(1f),
iconRes = R.drawable.ic_headphones_24dp,
text = "Listen"
)
Spacer(modifier = Modifier.width(16.dp))
ButtonWithIcon(
modifier = Modifier.weight(1f),
iconRes = R.drawable.ic_read_24dp,
text = "Read"
)
}
}
}
}
}
Alexandru Hadăr
03/30/2022, 11:31 AMf.babic
03/30/2022, 11:34 AMRick Regan
03/30/2022, 11:58 AMAlexandru Hadăr
03/30/2022, 12:00 PMRick Regan
03/30/2022, 12:00 PMDoris Liu
03/31/2022, 7:36 PMAlexandru Hadăr
04/15/2022, 12:30 PM