diff --git a/Jetcaster/mobile/src/main/java/com/example/jetcaster/util/Buttons.kt b/Jetcaster/mobile/src/main/java/com/example/jetcaster/util/Buttons.kt index 3979a05aa..8bc981000 100644 --- a/Jetcaster/mobile/src/main/java/com/example/jetcaster/util/Buttons.kt +++ b/Jetcaster/mobile/src/main/java/com/example/jetcaster/util/Buttons.kt @@ -16,6 +16,10 @@ package com.example.jetcaster.util +import androidx.compose.animation.core.animateFloat +import androidx.compose.animation.core.snap +import androidx.compose.animation.core.spring +import androidx.compose.animation.core.updateTransition import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi @@ -25,7 +29,9 @@ import androidx.compose.material3.IconToggleButtonColors import androidx.compose.material3.IconToggleButtonShapes import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.rotate import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.dp @@ -52,8 +58,25 @@ fun ToggleFollowPodcastIconButton(isFollowed: Boolean, onClick: () -> Unit, modi checkedShape = CircleShape, ), ) { + val transition = updateTransition(targetState = isFollowed, label = "FollowToggle") + val iconRotation by transition.animateFloat( + label = "IconRotation", + transitionSpec = { + if (initialState == targetState) { + snap() + } else { + spring( + dampingRatio = 0.6f, + stiffness = 200f, + ) + } + }, + ) { followed -> + if (followed) 360f else 0f + } + Icon( - // TODO: think about animating these icons + // Animated rotation when follow state changes painter = when { isFollowed -> painterResource(id = R.drawable.ic_check) else -> painterResource(id = R.drawable.ic_add) @@ -62,6 +85,7 @@ fun ToggleFollowPodcastIconButton(isFollowed: Boolean, onClick: () -> Unit, modi isFollowed -> stringResource(R.string.cd_following) else -> stringResource(R.string.cd_not_following) }, + modifier = Modifier.rotate(iconRotation), ) } }