◀️ finish animateFloatAsState

theapache64 · Oct 21, 2021 · a6ccc4e · a6ccc4e
1 parent c9e16ad
commit a6ccc4e
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 6 deletions.
diff --git a/app/src/main/java/com/theapache64/composeanimationplayground/ui/composable/ChildSample.kt b/app/src/main/java/com/theapache64/composeanimationplayground/ui/composable/ChildSample.kt
@@ -0,0 +1,19 @@
+package com.theapache64.composeanimationplayground.ui.composable
+
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun ChildSample(
+    title: String,
+    content: @Composable () -> Unit
+) {
+    Text(text = title)
+    Spacer(modifier = Modifier.height(4.dp))
+    content()
+}
+
diff --git a/app/src/main/java/com/theapache64/composeanimationplayground/ui/composable/VerticalSpace.kt b/app/src/main/java/com/theapache64/composeanimationplayground/ui/composable/VerticalSpace.kt
@@ -0,0 +1,12 @@
+package com.theapache64.composeanimationplayground.ui.composable
+
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun VerticalSpace() {
+    Spacer(modifier = Modifier.height(10.dp))
+}
diff --git a/app/src/main/java/com/theapache64/composeanimationplayground/ui/screen/AppNavigation.kt b/app/src/main/java/com/theapache64/composeanimationplayground/ui/screen/AppNavigation.kt
@@ -11,6 +11,7 @@ import com.theapache64.composeanimationplayground.ui.screen.animation.animatedco
 import com.theapache64.composeanimationplayground.ui.screen.animation.animatedcontent.DefaultScreen
 import com.theapache64.composeanimationplayground.ui.screen.animation.animatedcontent.SizeTransformScreen
 import com.theapache64.composeanimationplayground.ui.screen.animation.animatedvisibility.MutableTransitionStateScreen
+import com.theapache64.composeanimationplayground.ui.screen.animation.animateproperty.AnimatePropertyAsStateScreen
 import com.theapache64.composeanimationplayground.ui.screen.selector.AnimationSelector
 import com.theapache64.composeanimationplayground.ui.screen.splash.SplashScreen
 

diff --git a/...composeanimationplayground/ui/screen/animation/animateproperty/AnimateFloatAsStateDemo.kt b/...composeanimationplayground/ui/screen/animation/animateproperty/AnimateFloatAsStateDemo.kt
@@ -1,24 +1,54 @@
 package com.theapache64.composeanimationplayground.ui.screen.animation.animateproperty
 
 import android.annotation.SuppressLint
+import androidx.compose.animation.core.FastOutSlowInEasing
 import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import com.theapache64.composeanimationplayground.ui.composable.ChildSample
 import com.theapache64.composeanimationplayground.ui.composable.TeslaLogo
 
-
 @SuppressLint("UnrememberedMutableState")
 @Composable
 fun AnimateFloatAsStateDemo(
-    isOn: Boolean
+    isActive: Boolean
 ) {
-    val targetValue = if (isOn) 0f else 100f
-    val animatedValue by animateFloatAsState(targetValue = targetValue)
+    val targetValue = if (isActive) 0f else 100f
+
+    Column {
+        ChildSample(title = "Simple Usage") {
+            SimpleUsage(targetValue)
+        }
+
+        ChildSample(title = "animationSpec usage") {
+            AnimationSpecUsage(targetValue)
+        }
+    }
+}
+
 
+@Composable
+private fun SimpleUsage(
+    targetValue: Float
+) {
+    val animatedValue by animateFloatAsState(targetValue = targetValue)
     TeslaLogo(
         modifier = Modifier.padding(start = animatedValue.dp)
     )
 }
+
+@Composable
+private fun AnimationSpecUsage(targetValue: Float) {
+    val animatedValue by animateFloatAsState(
+        targetValue = targetValue,
+        animationSpec = tween(1000, 1000, easing = FastOutSlowInEasing)
+    )
+    TeslaLogo(
+        modifier = Modifier.padding(start = animatedValue.dp)
+    )
+}
diff --git a/...seanimationplayground/ui/screen/animation/animateproperty/AnimatePropertyAsStateScreen.kt b/...seanimationplayground/ui/screen/animation/animateproperty/AnimatePropertyAsStateScreen.kt
@@ -1,4 +1,4 @@
-package com.theapache64.composeanimationplayground.ui.screen.animation
+package com.theapache64.composeanimationplayground.ui.screen.animation.animateproperty
 
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
@@ -8,17 +8,24 @@ import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.runtime.Composable
 import com.theapache64.composeanimationplayground.model.AnimationItem
 import com.theapache64.composeanimationplayground.ui.composable.AnimationItem
-import com.theapache64.composeanimationplayground.ui.screen.animation.animateproperty.AnimateFloatAsStateDemo
 
 private val animations: List<AnimationItem> by lazy {
     mutableListOf(
+
         // TODO: Float, Color, Dp, Size, Bounds, Offset, Rect, Int, IntOffset, and IntSize, AnimateShape (Rectangle to Triangle)
         AnimationItem(
             title = "animateFloatAsState",
             description = "animates the float value"
         ) { isOn ->
             AnimateFloatAsStateDemo(isOn)
         },
+
+        AnimationItem(
+            title = "animateColorAsState",
+            description = "animates the color value"
+        ) { isOn ->
+
+        },
     )
 }