Adjust expandable fab animation

Co-authored-by: p
This commit is contained in:
AntsyLich 2024-10-13 23:06:02 +06:00
parent 32d2c2ac1b
commit eb6092bd0c
No known key found for this signature in database

View file

@ -9,11 +9,11 @@ import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut import androidx.compose.animation.fadeOut
import androidx.compose.animation.shrinkHorizontally import androidx.compose.animation.shrinkHorizontally
import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.sizeIn import androidx.compose.foundation.layout.sizeIn
import androidx.compose.foundation.layout.width
import androidx.compose.material3.FloatingActionButton import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.FloatingActionButtonDefaults import androidx.compose.material3.FloatingActionButtonDefaults
import androidx.compose.material3.FloatingActionButtonElevation import androidx.compose.material3.FloatingActionButtonElevation
@ -46,12 +46,8 @@ fun ExtendedFloatingActionButton(
contentColor: Color = contentColorFor(containerColor), contentColor: Color = contentColorFor(containerColor),
elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(), elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
) { ) {
val minWidth by animateDpAsState(
targetValue = if (expanded) ExtendedFabMinimumWidth else FabContainerWidth,
label = "minWidth",
)
FloatingActionButton( FloatingActionButton(
modifier = modifier.sizeIn(minWidth = minWidth), modifier = modifier,
onClick = onClick, onClick = onClick,
interactionSource = interactionSource, interactionSource = interactionSource,
shape = shape, shape = shape,
@ -59,18 +55,29 @@ fun ExtendedFloatingActionButton(
contentColor = contentColor, contentColor = contentColor,
elevation = elevation, elevation = elevation,
) { ) {
val minWidth by animateDpAsState(
targetValue = if (expanded) ExtendedFabMinimumWidth else FabContainerWidth,
animationSpec = tween(
durationMillis = 500,
easing = EasingEmphasizedCubicBezier,
),
label = "minWidth",
)
val startPadding by animateDpAsState( val startPadding by animateDpAsState(
targetValue = if (expanded) ExtendedFabIconSize / 2 else 0.dp, targetValue = if (expanded) ExtendedFabIconSize / 2 else 0.dp,
animationSpec = tween(
durationMillis = if (expanded) 300 else 900,
easing = EasingEmphasizedCubicBezier,
),
label = "startPadding", label = "startPadding",
) )
val endPadding by animateDpAsState(
targetValue = if (expanded) ExtendedFabTextPadding else 0.dp,
label = "endPadding",
)
Row( Row(
modifier = Modifier.padding(start = startPadding, end = endPadding), modifier = Modifier
.sizeIn(minWidth = minWidth)
.padding(start = startPadding),
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center,
) { ) {
icon() icon()
AnimatedVisibility( AnimatedVisibility(
@ -78,8 +85,7 @@ fun ExtendedFloatingActionButton(
enter = ExtendedFabExpandAnimation, enter = ExtendedFabExpandAnimation,
exit = ExtendedFabCollapseAnimation, exit = ExtendedFabCollapseAnimation,
) { ) {
Row { Box(modifier = Modifier.padding(start = ExtendedFabIconPadding, end = ExtendedFabTextPadding)) {
Spacer(Modifier.width(ExtendedFabIconPadding))
text() text()
} }
} }