add animated visibility to badge

avan1235 · Apr 13, 2023 · 3088e74 · 3088e74
1 parent f57d573
commit 3088e74
Showing 1 changed file with 30 additions and 13 deletions.
diff --git a/...-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/ScrollScreen.kt b/...-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/ScrollScreen.kt
@@ -1,6 +1,11 @@
 package ml.dev.kotlin.minigames.shared.ui.component
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.LinearEasing
 import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.expandIn
+import androidx.compose.animation.shrinkOut
 import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.Orientation
 import androidx.compose.foundation.layout.*
@@ -160,21 +165,33 @@ private fun BottomIcon(
     CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {
         BadgedBox(
             badge = {
-                if (badgeCount > 0) Badge(
-                    modifier = Modifier.offset(
-                        x = (-20).dp,
-                        y = 44.dp,
+                AnimatedVisibility(
+                    visible = badgeCount > 0,
+                    enter = expandIn(
+                        animationSpec = tween(durationMillis = 200, easing = LinearEasing),
+                        expandFrom = Alignment.Center
+                    ),
+                    exit = shrinkOut(
+                        animationSpec = tween(durationMillis = 300, easing = LinearEasing),
+                        shrinkTowards = Alignment.Center
                     ),
-                    backgroundColor = Color.Red,
-                    contentColor = Color.White,
                 ) {
-                    val badgeText = if (badgeCount > 999) "999+" else "$badgeCount"
-                    Text(
-                        text = badgeText,
-                        fontSize = 10.sp,
-                        fontWeight = FontWeight.Bold,
-                        modifier = Modifier.padding(2.dp)
-                    )
+                    Badge(
+                        modifier = Modifier.offset(
+                            x = (-20).dp,
+                            y = 44.dp,
+                        ),
+                        backgroundColor = Color.Red,
+                        contentColor = Color.White,
+                    ) {
+                        val badgeText = if (badgeCount > 999) "999+" else "$badgeCount"
+                        Text(
+                            text = badgeText,
+                            fontSize = 10.sp,
+                            fontWeight = FontWeight.Bold,
+                            modifier = Modifier.padding(2.dp)
+                        )
+                    }
                 }
             },
         ) {