added card with text.

Author: commandiron

animatable-compose/src/main/java/com/commandiron/animatable_compose/AnimatableCard.kt

@@ -20,8 +20,8 @@ import com.commandiron.animatable_compose.state.SharedAnimatableState
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun AnimatableCard(
-    onClick: () -> Unit,
     modifier: Modifier = Modifier,
+    onClick: () -> Unit = {},
     enabled: Boolean = true,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     border: BorderStroke? = null,
@@ -82,8 +82,8 @@ fun AnimatableCard(
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun AnimatableCard(
-    onClick: () -> Unit,
     modifier: Modifier = Modifier,
+    onClick: () -> Unit = {},
     enabled: Boolean = true,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     border: BorderStroke? = null,

animatable-compose/src/main/java/com/commandiron/animatable_compose/state/AnimatableState.kt

@@ -1,9 +1,6 @@
 package com.commandiron.animatable_compose.state
 
-import androidx.compose.animation.core.AnimationSpec
-import androidx.compose.animation.core.animateFloatAsState
-import androidx.compose.animation.core.animateSizeAsState
-import androidx.compose.animation.core.tween
+import androidx.compose.animation.core.*
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.*

app/src/main/java/com/commandiron/animatablecompose/MainActivity.kt

@@ -21,7 +21,7 @@ class MainActivity : ComponentActivity() {
                     color = MaterialTheme.colorScheme.background
                 ) {}
                 Box(Modifier.fillMaxSize(), Alignment.Center) {
-                    Show6CardDealer()
+                    Show4AnimatableCardWithText()
                 }
             }
         }

app/src/main/java/com/commandiron/animatablecompose/Show4AnimatableCardWithText.kt

@@ -1,8 +1,61 @@
 package com.commandiron.animatablecompose
 
+import androidx.compose.animation.core.Spring
+import androidx.compose.animation.core.spring
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.DpSize
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.commandiron.animatable_compose.AnimatableCard
+import com.commandiron.animatable_compose.AnimatableText
+import com.commandiron.animatable_compose.state.rememberAnimatableCardState
+import com.commandiron.animatable_compose.state.rememberAnimatableTextState
+import com.commandiron.animatable_compose.state.rememberSharedAnimatableState
 
 @Composable
 fun Show4AnimatableCardWithText() {
-
+    val animatableCardState = rememberAnimatableCardState(
+        initialSize = DpSize(width = 50.dp, height = 25.dp),
+        targetSize = DpSize(width = 300.dp, height = 150.dp),
+        toTargetSizeAnimationSpec = spring(Spring.DampingRatioHighBouncy, Spring.StiffnessVeryLow),
+        initialShape =  RoundedCornerShape(4.dp),
+        targetShape = RoundedCornerShape(16.dp),
+        toTargetShapeAnimationSpec = spring(Spring.DampingRatioHighBouncy, Spring.StiffnessVeryLow),
+    )
+    val animatableTextState = rememberAnimatableTextState(
+        initialFontSize = 4.sp,
+        targetFontSize = 36.sp,
+        toTargetFontSizeAnimationSpec = spring(Spring.DampingRatioHighBouncy, Spring.StiffnessVeryLow)
+    )
+    val sharedAnimatableState = rememberSharedAnimatableState(
+        listOf(
+            animatableCardState,
+            animatableTextState
+        )
+    )
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .clickable { sharedAnimatableState.animate() },
+        contentAlignment = Alignment.Center
+    ) {
+        AnimatableCard(
+            modifier = Modifier.size(100.dp),
+            state = sharedAnimatableState
+        ) {
+            Box(Modifier.fillMaxSize(), Alignment.Center) {
+                AnimatableText(
+                    text = "Animatable",
+                    state = sharedAnimatableState
+                )
+            }
+        }
+    }
 }