Merge pull request #868 from synonymdev/feat/hero-animation-header

feat: hero swap animation for balance header

Author: jvsena42

app/src/main/java/to/bitkit/ui/components/BalanceHeaderView.kt

@@ -1,6 +1,9 @@
 package to.bitkit.ui.components
 
 import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.EnterExitState
+import androidx.compose.animation.SizeTransform
+import androidx.compose.animation.core.animateFloat
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -10,9 +13,13 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.TransformOrigin
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.platform.LocalInspectionMode
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
@@ -53,7 +60,7 @@ fun BalanceHeaderView(
 
     if (isPreview) {
         BalanceHeader(
-            modifier = modifier,
+            isBitcoinPrimary = true,
             smallRowSymbol = "$",
             smallRowText = "12.34",
             largeRowPrefix = prefix,
@@ -66,6 +73,7 @@ fun BalanceHeaderView(
             onClick = {},
             onToggleHideBalance = {},
             testTag = testTag,
+            modifier = modifier,
         )
         return
     }
@@ -88,7 +96,7 @@ fun BalanceHeaderView(
         val isBitcoinPrimary = primaryDisplay == PrimaryDisplay.BITCOIN
 
         BalanceHeader(
-            modifier = modifier,
+            isBitcoinPrimary = isBitcoinPrimary,
             smallRowSymbol = if (isBitcoinPrimary) fiat.symbol else btc.symbol,
             smallRowText = if (isBitcoinPrimary) fiat.formatted else btc.value,
             smallRowIsSymbolSuffix = if (isBitcoinPrimary) fiat.isSymbolSuffix else false,
@@ -105,30 +113,64 @@ fun BalanceHeaderView(
             onClick = onClick ?: { currency.switchUnit() },
             onToggleHideBalance = { settings.setHideBalance(!hideBalance) },
             testTag = testTag,
+            modifier = modifier,
         )
     }
 }
 
 @Composable
 fun BalanceHeader(
+    isBitcoinPrimary: Boolean,
+    smallRowText: String,
+    largeRowText: String,
+    largeRowSymbol: String,
+    showSymbol: Boolean,
+    onClick: () -> Unit,
     modifier: Modifier = Modifier,
     smallRowSymbol: String? = null,
-    smallRowText: String,
     smallRowIsSymbolSuffix: Boolean = false,
     smallRowModifier: Modifier = Modifier,
     largeRowPrefix: String? = null,
-    largeRowText: String,
-    largeRowSymbol: String,
     largeRowIsSymbolSuffix: Boolean = false,
     largeRowModifier: Modifier = Modifier,
-    showSymbol: Boolean,
     hideBalance: Boolean = false,
     isSwipeToHideEnabled: Boolean = false,
     showEyeIcon: Boolean = false,
-    onClick: () -> Unit,
     onToggleHideBalance: () -> Unit = {},
     testTag: String? = null,
 ) {
+    val smallRowState = remember(
+        isBitcoinPrimary,
+        smallRowSymbol,
+        smallRowText,
+        smallRowIsSymbolSuffix,
+    ) {
+        SmallRowState(
+            isBitcoinPrimary,
+            smallRowSymbol,
+            smallRowText,
+            smallRowIsSymbolSuffix,
+        )
+    }
+
+    val largeRowState = remember(
+        isBitcoinPrimary,
+        largeRowPrefix,
+        largeRowText,
+        largeRowSymbol,
+        largeRowIsSymbolSuffix,
+        showSymbol,
+    ) {
+        LargeRowState(
+            isBitcoinPrimary,
+            largeRowPrefix,
+            largeRowText,
+            largeRowSymbol,
+            largeRowIsSymbolSuffix,
+            showSymbol,
+        )
+    }
+
     Column(
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.Start,
@@ -140,28 +182,62 @@ fun BalanceHeader(
             .clickableAlpha { onClick() }
             .then(testTag?.let { Modifier.testTag(it) } ?: Modifier)
     ) {
-        SmallRow(
-            symbol = smallRowSymbol,
-            text = smallRowText,
-            isSymbolSuffix = smallRowIsSymbolSuffix,
-            hideBalance = hideBalance,
-            modifier = smallRowModifier,
-        )
+        AnimatedContent(
+            targetState = smallRowState,
+            transitionSpec = {
+                BalanceAnimations.swapSmallRowTransition using
+                    SizeTransform(clip = false)
+            },
+            contentKey = { it.isBitcoinPrimary },
+            label = "smallRowSwapAnimation",
+        ) { state ->
+            val scale by transition.animateFloat(label = "smallRowScale") {
+                if (it == EnterExitState.Visible) 1f else SMALL_ROW_SWAP_SCALE
+            }
+            SmallRow(
+                symbol = state.symbol,
+                text = state.text,
+                isSymbolSuffix = state.isSymbolSuffix,
+                hideBalance = hideBalance,
+                modifier = smallRowModifier.graphicsLayer {
+                    scaleX = scale
+                    scaleY = scale
+                    transformOrigin = TransformOrigin(0f, 0f)
+                },
+            )
+        }
 
         VerticalSpacer(12.dp)
 
         Row(
             verticalAlignment = Alignment.CenterVertically,
         ) {
-            LargeRow(
-                prefix = largeRowPrefix,
-                text = largeRowText,
-                symbol = largeRowSymbol,
-                showSymbol = showSymbol,
-                isSymbolSuffix = largeRowIsSymbolSuffix,
-                hideBalance = hideBalance,
-                modifier = largeRowModifier,
-            )
+            AnimatedContent(
+                targetState = largeRowState,
+                transitionSpec = {
+                    BalanceAnimations.swapLargeRowTransition using
+                        SizeTransform(clip = false)
+                },
+                contentKey = { it.isBitcoinPrimary },
+                label = "largeRowSwapAnimation",
+            ) { state ->
+                val scale by transition.animateFloat(label = "largeRowScale") {
+                    if (it == EnterExitState.Visible) 1f else LARGE_ROW_SWAP_SCALE
+                }
+                LargeRow(
+                    prefix = state.prefix,
+                    text = state.text,
+                    symbol = state.symbol,
+                    showSymbol = state.showSymbol,
+                    isSymbolSuffix = state.isSymbolSuffix,
+                    hideBalance = hideBalance,
+                    modifier = largeRowModifier.graphicsLayer {
+                        scaleX = scale
+                        scaleY = scale
+                        transformOrigin = TransformOrigin(0f, 0f)
+                    },
+                )
+            }
 
             if (showEyeIcon) {
                 Spacer(modifier = Modifier.weight(1f))
@@ -188,6 +264,28 @@ fun BalanceHeader(
     }
 }
 
+// Matches iOS: .scale(scale: 1.5) for small row, .scale(scale: 0.5) for large row
+private const val SMALL_ROW_SWAP_SCALE = 1.5f
+private const val LARGE_ROW_SWAP_SCALE = 0.5f
+
+@Immutable
+private data class SmallRowState(
+    val isBitcoinPrimary: Boolean,
+    val symbol: String?,
+    val text: String,
+    val isSymbolSuffix: Boolean,
+)
+
+@Immutable
+private data class LargeRowState(
+    val isBitcoinPrimary: Boolean,
+    val prefix: String?,
+    val text: String,
+    val symbol: String,
+    val isSymbolSuffix: Boolean,
+    val showSymbol: Boolean,
+)
+
 @Composable
 fun LargeRow(
     prefix: String?,
@@ -295,14 +393,15 @@ private fun SmallRow(
 private fun Preview() {
     AppThemeSurface {
         BalanceHeader(
+            isBitcoinPrimary = true,
             smallRowSymbol = "$",
             smallRowText = "27.36",
             largeRowPrefix = "+",
             largeRowText = "136 825",
             largeRowSymbol = "₿",
             showSymbol = true,
+            onClick = {},
             modifier = Modifier.fillMaxWidth(),
-            onClick = {}
         )
     }
 }
@@ -312,6 +411,7 @@ private fun Preview() {
 private fun PreviewHidden() {
     AppThemeSurface {
         BalanceHeader(
+            isBitcoinPrimary = true,
             smallRowSymbol = "$",
             smallRowText = "27.36",
             largeRowPrefix = "+",
@@ -320,9 +420,9 @@ private fun PreviewHidden() {
             showSymbol = true,
             hideBalance = true,
             isSwipeToHideEnabled = true,
-            modifier = Modifier.fillMaxWidth(),
             onClick = {},
-            onToggleHideBalance = {}
+            onToggleHideBalance = {},
+            modifier = Modifier.fillMaxWidth(),
         )
     }
 }

app/src/main/java/to/bitkit/ui/shared/animations/BalanceAnimations.kt

@@ -2,12 +2,17 @@ package to.bitkit.ui.shared.animations
 
 import androidx.compose.animation.ContentTransform
 import androidx.compose.animation.core.EaseInOutCubic
+import androidx.compose.animation.core.Spring
+import androidx.compose.animation.core.spring
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.slideInHorizontally
+import androidx.compose.animation.slideInVertically
 import androidx.compose.animation.slideOutHorizontally
+import androidx.compose.animation.slideOutVertically
 import androidx.compose.animation.togetherWith
+import androidx.compose.ui.unit.IntOffset
 
 /**
  * Animation specifications for balance hiding/showing transitions.
@@ -83,6 +88,52 @@ object BalanceAnimations {
             animationSpec = tween(380)
         ) + fadeOut(animationSpec = tween(380))
 
+    // Matches iOS: Animation.spring(response: 0.3, dampingFraction: 0.8)
+    private val swapSpring = spring<IntOffset>(
+        dampingRatio = 0.8f,
+        stiffness = Spring.StiffnessMediumLow,
+    )
+    private val swapFadeSpring = spring<Float>(
+        dampingRatio = 0.8f,
+        stiffness = Spring.StiffnessMediumLow,
+    )
+
+    /**
+     * Swap transition for the small row (top).
+     * Matches iOS: .move(edge: .bottom) + .opacity + .scale(1.5, anchor: .topLeading)
+     * Enter from below, exit to below, with spring physics.
+     */
+    val swapSmallRowTransition: ContentTransform =
+        slideInVertically(
+            initialOffsetY = { it },
+            animationSpec = swapSpring,
+        ) + fadeIn(
+            animationSpec = swapFadeSpring,
+        ) togetherWith slideOutVertically(
+            targetOffsetY = { it },
+            animationSpec = swapSpring,
+        ) + fadeOut(
+            animationSpec = swapFadeSpring,
+        )
+
+    /**
+     * Swap transition for the large row (bottom).
+     * Matches iOS: .move(edge: .top) + .opacity + .scale(0.5, anchor: .topLeading)
+     * Enter from above, exit to above, with spring physics.
+     */
+    val swapLargeRowTransition: ContentTransform =
+        slideInVertically(
+            initialOffsetY = { -it },
+            animationSpec = swapSpring,
+        ) + fadeIn(
+            animationSpec = swapFadeSpring,
+        ) togetherWith slideOutVertically(
+            targetOffsetY = { -it },
+            animationSpec = swapSpring,
+        ) + fadeOut(
+            animationSpec = swapFadeSpring,
+        )
+
     /**
      * Eye icon transition
      * Simple fade for clean appearance/disappearance