Skip to content

Animate follow icon rotation in Jetcaster #1603

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 19, 2025
Merged

Animate follow icon rotation in Jetcaster #1603

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
67c8f9a
Animate follow icon rotation in Jetcaster
XDdevv Aug 18, 2025
66bf1f4
Use updateTransition to avoid initial animation
XDdevv Aug 18, 2025
6252f18
Use snap() instead of tween to disable initial animation
XDdevv Aug 19, 2025
9544201
Apply Spotless formatting
XDdevv Aug 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 28 additions & 1 deletion Jetcaster/mobile/src/main/java/com/example/jetcaster/util/Buttons.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,12 @@

package com.example.jetcaster.util

import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.snap
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.animation.core.updateTransition
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
Expand All @@ -25,7 +31,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
Expand All @@ -52,8 +60,26 @@ 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)
Expand All @@ -62,6 +88,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)
)
}
}
Loading