Improve animation.

ReactiveCircus · Feb 9, 2024 · f43a782 · f43a782
1 parent e3acfb5
commit f43a782
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 61 deletions.
diff --git a/...ivecircus/kstreamlined/android/feature/talkingkotlinepisode/TalkingKotlinEpisodeScreen.kt b/...ivecircus/kstreamlined/android/feature/talkingkotlinepisode/TalkingKotlinEpisodeScreen.kt
@@ -1,10 +1,6 @@
 package io.github.reactivecircus.kstreamlined.android.feature.talkingkotlinepisode
 
-import androidx.compose.animation.AnimatedContent
 import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.fadeIn
-import androidx.compose.animation.fadeOut
-import androidx.compose.animation.togetherWith
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -198,29 +194,26 @@ private fun ContentUi(
                 }
             }
             item {
-                Text(
-                    text = "${episode.displayablePublishTime} • ${episode.duration}",
-                    style = KSTheme.typography.labelMedium,
-                    modifier = Modifier.padding(vertical = 8.dp),
-                    color = KSTheme.colorScheme.onBackgroundVariant,
-                    textAlign = TextAlign.Center,
-                )
-                Text(
-                    text = episode.title,
-                    style = KSTheme.typography.titleLarge,
-                    modifier = Modifier.padding(horizontal = 24.dp),
-                    textAlign = TextAlign.Center,
-                )
-                AnimatedContent(
-                    targetState = isPlaying,
-                    modifier = Modifier.padding(top = 8.dp),
-                    transitionSpec = { fadeIn() togetherWith fadeOut() },
-                    contentAlignment = Alignment.Center,
-                    label = "isPlaying",
-                ) { playing ->
+                Column(
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                ) {
+                    Text(
+                        text = "${episode.displayablePublishTime} • ${episode.duration}",
+                        style = KSTheme.typography.labelMedium,
+                        modifier = Modifier.padding(vertical = 8.dp),
+                        color = KSTheme.colorScheme.onBackgroundVariant,
+                        textAlign = TextAlign.Center,
+                    )
+                    Text(
+                        text = episode.title,
+                        style = KSTheme.typography.titleLarge,
+                        modifier = Modifier.padding(horizontal = 24.dp),
+                        textAlign = TextAlign.Center,
+                    )
                     PlayPauseButton(
-                        isPlaying = playing,
+                        isPlaying = isPlaying,
                         onPlayPauseButtonClick = onPlayPauseButtonClick,
+                        modifier = Modifier.padding(top = 8.dp),
                     )
                 }
             }

diff --git a/...tivecircus/kstreamlined/android/feature/talkingkotlinepisode/component/PlayPauseButton.kt b/...tivecircus/kstreamlined/android/feature/talkingkotlinepisode/component/PlayPauseButton.kt
@@ -1,5 +1,11 @@
 package io.github.reactivecircus.kstreamlined.android.feature.talkingkotlinepisode.component
 
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.scaleIn
+import androidx.compose.animation.scaleOut
+import androidx.compose.animation.togetherWith
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
@@ -34,27 +40,26 @@ internal fun PlayPauseButton(
             verticalAlignment = Alignment.CenterVertically,
             horizontalArrangement = Arrangement.spacedBy(8.dp),
         ) {
-            if (isPlaying) {
+            AnimatedContent(
+                targetState = isPlaying,
+                transitionSpec = { scaleIn() togetherWith scaleOut() },
+                contentAlignment = Alignment.Center,
+                label = "isPlaying",
+            ) { playing ->
                 Icon(
-                    KSIcons.Pause,
-                    contentDescription = null,
-                )
-                Text(
-                    text = stringResource(
-                        id = R.string.pause
-                    ),
-                    style = KSTheme.typography.labelLarge.copy(
-                        fontWeight = FontWeight.ExtraBold
-                    ),
-                )
-            } else {
-                Icon(
-                    KSIcons.PlayArrow,
+                    if (playing) KSIcons.Pause else KSIcons.PlayArrow,
                     contentDescription = null,
                 )
+            }
+            AnimatedContent(
+                targetState = isPlaying,
+                transitionSpec = { fadeIn() togetherWith fadeOut() },
+                contentAlignment = Alignment.Center,
+                label = "isPlaying",
+            ) { playing ->
                 Text(
                     text = stringResource(
-                        id = R.string.play
+                        id = if (playing) R.string.pause else R.string.play
                     ),
                     style = KSTheme.typography.labelLarge.copy(
                         fontWeight = FontWeight.ExtraBold

diff --git a/...activecircus/kstreamlined/android/feature/talkingkotlinepisode/component/PodcastPlayer.kt b/...activecircus/kstreamlined/android/feature/talkingkotlinepisode/component/PodcastPlayer.kt
@@ -1,8 +1,8 @@
 package io.github.reactivecircus.kstreamlined.android.feature.talkingkotlinepisode.component
 
 import androidx.compose.animation.AnimatedContent
-import androidx.compose.animation.fadeIn
-import androidx.compose.animation.fadeOut
+import androidx.compose.animation.scaleIn
+import androidx.compose.animation.scaleOut
 import androidx.compose.animation.togetherWith
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -110,27 +110,15 @@ internal fun PodcastPlayer(
             AnimatedContent(
                 targetState = isPlaying,
                 modifier = Modifier.padding(end = 8.dp),
-                transitionSpec = { fadeIn() togetherWith fadeOut() },
+                transitionSpec = { scaleIn() togetherWith scaleOut() },
                 contentAlignment = Alignment.Center,
                 label = "isPlaying",
             ) { playing ->
-                when (playing) {
-                    true -> {
-                        LargeIconButton(
-                            KSIcons.Pause,
-                            contentDescription = null,
-                            onClick = onPlayPauseButtonClick,
-                        )
-                    }
-
-                    false -> {
-                        LargeIconButton(
-                            KSIcons.PlayArrow,
-                            contentDescription = null,
-                            onClick = onPlayPauseButtonClick,
-                        )
-                    }
-                }
+                LargeIconButton(
+                    if (playing) KSIcons.Pause else KSIcons.PlayArrow,
+                    contentDescription = null,
+                    onClick = onPlayPauseButtonClick,
+                )
             }
         }
     }