WIP

- implementing animation
franciscobarrios · Dec 7, 2020 · b50d6ef · b50d6ef
1 parent 7c6f987
commit b50d6ef
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git a/app/build.gradle b/app/build.gradle
@@ -62,6 +62,7 @@ dependencies {
     // Compose
     implementation "androidx.ui:ui-tooling:$compose_version"
     implementation "androidx.compose.ui:ui:$compose_version"
+    implementation "androidx.compose.animation:animation:$compose_version"
     implementation "androidx.compose.material:material:$compose_version"
     implementation "androidx.compose.runtime:runtime:$compose_version"
     implementation "androidx.compose.runtime:runtime-livedata:$compose_version"

diff --git a/app/src/main/java/com/fjbg/todo/ui/anim/Animation.kt b/app/src/main/java/com/fjbg/todo/ui/anim/Animation.kt
@@ -1,9 +1,7 @@
 package com.fjbg.todo.ui.anim
 
-import androidx.compose.animation.core.FloatPropKey
-import androidx.compose.animation.core.TransitionDefinition
-import androidx.compose.animation.core.keyframes
-import androidx.compose.animation.core.transitionDefinition
+import androidx.compose.animation.ColorPropKey
+import androidx.compose.animation.core.*
 import androidx.compose.foundation.layout.preferredSize
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
@@ -13,6 +11,8 @@ import com.airbnb.lottie.compose.LottieAnimation
 import com.airbnb.lottie.compose.LottieAnimationSpec
 import com.airbnb.lottie.compose.rememberLottieAnimationState
 import com.fjbg.todo.R
+import com.fjbg.todo.ui.theme.almostWhite
+import com.fjbg.todo.ui.theme.primaryDark
 
 @Composable
 fun showIntroAnimation() {
@@ -31,22 +31,25 @@ fun showIntroAnimation() {
 }
 
 val sizeState = FloatPropKey()
+val colorState = ColorPropKey()
 
 enum class FabState {
-    Idle, Exploded
+    Idle, Exploded, IdleColor, ExplodedColor
 }
 
 fun sizeTransitionDefinition(): TransitionDefinition<FabState> {
     return transitionDefinition {
         state(FabState.Idle) { this[sizeState] = 80f }
         state(FabState.Exploded) { this[sizeState] = 4000f }
+        state(FabState.IdleColor) { this[colorState] = primaryDark }
+        state(FabState.ExplodedColor) { this[colorState] = almostWhite }
 
         transition(fromState = FabState.Idle, toState = FabState.Exploded) {
             sizeState using keyframes {
-                durationMillis = 700
+                durationMillis = 900
                 80f at 0
-                35f at 120
-                4000f at 700
+                35f at 150
+                4000f at 900
             }
         }
     }

diff --git a/app/src/main/java/com/fjbg/todo/ui/common/Common.kt b/app/src/main/java/com/fjbg/todo/ui/common/Common.kt
@@ -13,7 +13,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import com.fjbg.todo.ui.anim.FabState
 import com.fjbg.todo.ui.anim.sizeState
@@ -45,22 +44,26 @@ fun defaultContentView(
         floatingActionButton = {
             if (showBottomBar) {
                 val fabState = remember { mutableStateOf(FabState.Idle) }
-                FloatingActionButton(
+
+                val state = transition(
+                    definition = sizeTransitionDefinition(),
+                    initState = FabState.Idle,
+                    toState = fabState.value
+                )
+
+               /* FloatingActionButton(
                     onClick = {
                         if (fabState.value == FabState.Idle) fabState.value =
                             FabState.Exploded else fabState.value = FabState.Idle
                     },
                     backgroundColor = primaryDark,
                     icon = { Icon(asset = Icons.Default.Add, tint = almostWhite) }
-                )
+                )*/
 
-                val state = transition(
-                    definition = sizeTransitionDefinition(),
-                    toState = fabState.value
-                )
+
 
                 Canvas(modifier = Modifier.preferredSize(80.dp)) {
-                    drawCircle(Color.Red, state[sizeState])
+                    drawCircle(almostWhite, state[sizeState])
                 }
             }
         },