Animate Shared episode date using sharedBounds

Author: mr3y-the-programmer

app/src/main/kotlin/com/mr3y/podcaster/ui/screens/EpisodeDetailsScreen.kt

@@ -1,5 +1,6 @@
 package com.mr3y.podcaster.ui.screens
 
+import androidx.compose.animation.SharedTransitionScope
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -61,6 +62,7 @@ import com.mr3y.podcaster.ui.components.RemoveFromQueueButton
 import com.mr3y.podcaster.ui.components.TopBar
 import com.mr3y.podcaster.ui.components.rememberHtmlToAnnotatedString
 import com.mr3y.podcaster.ui.components.rememberSharedContentState
+import com.mr3y.podcaster.ui.components.sharedBounds
 import com.mr3y.podcaster.ui.components.sharedElement
 import com.mr3y.podcaster.ui.presenter.PodcasterAppState
 import com.mr3y.podcaster.ui.presenter.RefreshResult
@@ -280,10 +282,11 @@ private fun EpisodeDetails(
             text = formattedEpisodeDate,
             color = MaterialTheme.colorScheme.onSurfaceVariant,
             style = MaterialTheme.typography.titleMedium,
-            modifier = Modifier.sharedElement(
+            modifier = Modifier.sharedBounds(
                 LocalSharedTransitionScope.current,
                 LocalAnimatedVisibilityScope.current,
                 rememberSharedContentState(key = episode.dateSharedTransitionKey),
+                resizeMode = SharedTransitionScope.ResizeMode.ScaleToBounds(),
             ),
         )
         Text(

app/src/main/kotlin/com/mr3y/podcaster/ui/screens/SubscriptionsScreen.kt

@@ -1,5 +1,6 @@
 package com.mr3y.podcaster.ui.screens
 
+import androidx.compose.animation.SharedTransitionScope
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
@@ -80,6 +81,7 @@ import com.mr3y.podcaster.ui.components.RemoveFromQueueButton
 import com.mr3y.podcaster.ui.components.TopBar
 import com.mr3y.podcaster.ui.components.rememberHtmlToAnnotatedString
 import com.mr3y.podcaster.ui.components.rememberSharedContentState
+import com.mr3y.podcaster.ui.components.sharedBounds
 import com.mr3y.podcaster.ui.components.sharedElement
 import com.mr3y.podcaster.ui.presenter.PodcasterAppState
 import com.mr3y.podcaster.ui.presenter.RefreshResult
@@ -386,10 +388,11 @@ private fun ColumnScope.EpisodesList(
                                     textAlign = TextAlign.Center,
                                     maxLines = 2,
                                     overflow = TextOverflow.Ellipsis,
-                                    modifier = Modifier.sharedElement(
+                                    modifier = Modifier.sharedBounds(
                                         LocalSharedTransitionScope.current,
                                         LocalAnimatedVisibilityScope.current,
                                         rememberSharedContentState(key = episode.dateSharedTransitionKey),
+                                        resizeMode = SharedTransitionScope.ResizeMode.ScaleToBounds(),
                                     ),
                                 )
                             }

ui/design-system/src/main/kotlin/com/mr3y/podcaster/ui/components/SharedElementTransition.kt

@@ -2,19 +2,27 @@ package com.mr3y.podcaster.ui.components
 
 import androidx.compose.animation.AnimatedVisibilityScope
 import androidx.compose.animation.BoundsTransform
+import androidx.compose.animation.EnterTransition
+import androidx.compose.animation.ExitTransition
 import androidx.compose.animation.ExperimentalSharedTransitionApi
 import androidx.compose.animation.SharedTransitionScope
 import androidx.compose.animation.SharedTransitionScope.OverlayClip
 import androidx.compose.animation.SharedTransitionScope.PlaceHolderSize
 import androidx.compose.animation.SharedTransitionScope.PlaceHolderSize.Companion.contentSize
+import androidx.compose.animation.SharedTransitionScope.ResizeMode
+import androidx.compose.animation.SharedTransitionScope.ResizeMode.Companion.ScaleToBounds
 import androidx.compose.animation.core.Spring.StiffnessMediumLow
 import androidx.compose.animation.core.VisibilityThreshold
 import androidx.compose.animation.core.spring
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.Alignment.Companion.Center
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Rect
 import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.LayoutDirection
 
@@ -59,6 +67,44 @@ fun Modifier.sharedElement(
     }
 }
 
+fun Modifier.sharedBounds(
+    sharedTransitionScope: SharedTransitionScope?,
+    animatedVisibilityScope: AnimatedVisibilityScope?,
+    state: SharedTransitionScope.SharedContentState?,
+    enter: EnterTransition = fadeIn(),
+    exit: ExitTransition = fadeOut(),
+    boundsTransform: BoundsTransform = BoundsTransform { _, _ ->
+        spring(
+            stiffness = StiffnessMediumLow,
+            visibilityThreshold = Rect.VisibilityThreshold,
+        )
+    },
+    resizeMode: ResizeMode = ScaleToBounds(ContentScale.FillWidth, Center),
+    placeHolderSize: PlaceHolderSize = contentSize,
+    renderInOverlayDuringTransition: Boolean = true,
+    zIndexInOverlay: Float = 0f,
+    clipInOverlayDuringTransition: OverlayClip = ParentClip
+): Modifier {
+    return if (sharedTransitionScope == null || animatedVisibilityScope == null || state == null) {
+        this
+    } else {
+        with(sharedTransitionScope) {
+            sharedBounds(
+                state,
+                animatedVisibilityScope,
+                enter,
+                exit,
+                boundsTransform,
+                resizeMode,
+                placeHolderSize,
+                renderInOverlayDuringTransition,
+                zIndexInOverlay,
+                clipInOverlayDuringTransition
+            )
+        }
+    }
+}
+
 fun Modifier.skipToLookaheadSize(
     sharedTransitionScope: SharedTransitionScope?,
 ): Modifier {