add colorPropKey to explodeTransitionDefinition

Author: p-hlp

app/src/main/java/com/example/intimesimple/ui/animations/AnimationDefinitions.kt

@@ -5,7 +5,10 @@ import androidx.compose.animation.ColorPropKey
 import androidx.compose.animation.core.FloatPropKey
 import androidx.compose.animation.core.keyframes
 import androidx.compose.animation.core.transitionDefinition
+import androidx.compose.animation.core.tween
 import androidx.compose.ui.graphics.Color
+import com.example.intimesimple.ui.theme.DarkBlue900
+import com.example.intimesimple.ui.theme.Green500
 
 
 object AnimationDefinitions{
@@ -20,22 +23,25 @@ object AnimationDefinitions{
 
 
     @SuppressLint("Range")
-    fun explodeTransitionDefinition() = transitionDefinition<FabState>{
+    val explodeTransitionDefinition = transitionDefinition<FabState>{
         state(FabState.Idle){
-            this[sizeState] = 80f
+            this[sizeState] = 60f
+            this[colorState] = Green500
         }
 
         state(FabState.Exploded){
             this[sizeState] = 4000f
+            this[colorState] = DarkBlue900
         }
 
         transition(fromState = FabState.Idle, toState = FabState.Exploded){
             sizeState using keyframes {
                 durationMillis = 700
-                50f at 0
+                60f at 0
                 30f at 120
                 4000f at 700
             }
+            colorState using tween(durationMillis = 300)
         }
     }
 }

app/src/main/java/com/example/intimesimple/ui/composables/WorkoutListScreen.kt

@@ -1,24 +1,34 @@
 package com.example.intimesimple.ui.composables
 
 import android.net.Uri
+import androidx.compose.animation.transition
+import androidx.compose.foundation.Canvas
 import androidx.navigation.compose.*
 import androidx.compose.foundation.Text
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumnFor
 import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
+import androidx.compose.material.ripple.RippleIndication
 import androidx.compose.runtime.*
 import androidx.compose.runtime.livedata.observeAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.imageFromResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.core.os.bundleOf
 import androidx.navigation.NavController
 import com.example.intimesimple.R
 import com.example.intimesimple.data.local.Workout
+import com.example.intimesimple.ui.animations.AnimationDefinitions
+import com.example.intimesimple.ui.animations.AnimationDefinitions.colorState
+import com.example.intimesimple.ui.animations.AnimationDefinitions.sizeState
 import com.example.intimesimple.ui.composables.navigation.Screen
 import com.example.intimesimple.ui.theme.Green500
 import com.example.intimesimple.ui.viewmodels.WorkoutListViewModel
@@ -41,44 +51,61 @@ fun WorkoutListScreen(
 
     // build screen layout with scaffold
     Scaffold(
-            modifier = modifier,
-            topBar = {
-                TopAppBar(
-                        title = {
-                            Text(
-                                    text = stringResource(id = R.string.app_name).toUpperCase()
-                            )
-                        }
-                )
-            },
-            bodyContent = { paddingValues ->
-                WorkoutListContent(
-                        modifier = modifier.padding(paddingValues),
-                        innerPadding = PaddingValues(4.dp),
-                        items = workouts,
-                        onSwipe = {
-                            workoutListViewModel.deleteWorkout(it)
-                        },
-                        onClick = {
-                            navController.navigate(
-                                Uri.parse(WORKOUT_DETAIL_URI + "${it.id}")
-                            )
-                            sendServiceCommand(ACTION_INITIALIZE_DATA)
-                        }
-                )
-            },
-            floatingActionButton = {
-                FloatingActionButton(
+        modifier = modifier,
+        topBar = {
+            TopAppBar(
+                title = {
+                    Text(
+                        text = stringResource(id = R.string.app_name).toUpperCase()
+                    )
+                }
+            )
+        },
+        bodyContent = { paddingValues ->
+            WorkoutListContent(
+                modifier = modifier.padding(paddingValues),
+                innerPadding = PaddingValues(4.dp),
+                items = workouts,
+                onSwipe = {
+                    workoutListViewModel.deleteWorkout(it)
+                },
+                onClick = {
+                    navController.navigate(
+                        Uri.parse(WORKOUT_DETAIL_URI + "${it.id}")
+                    )
+                    sendServiceCommand(ACTION_INITIALIZE_DATA)
+                }
+            )
+        },
+        floatingActionButton = {
+            var animateFab by remember { mutableStateOf(false) }
+
+            val state = transition(
+                definition = AnimationDefinitions.explodeTransitionDefinition,
+                initState = AnimationDefinitions.FabState.Idle,
+                toState = if (!animateFab) AnimationDefinitions.FabState.Idle
+                else AnimationDefinitions.FabState.Exploded,
+                onStateChangeFinished = {
+                    navController.navigate(Screen.WorkoutAddScreen.route)
+                    animateFab = false
+                }
+            )
+
+            Canvas(
+                modifier = Modifier.padding(16.dp)
+                    .clickable(
                         onClick = {
-                            navController.navigate(Screen.WorkoutAddScreen.route)
-                        },
-                        icon = {
-                            Icon(Icons.Filled.Add)
-                        },
-                        backgroundColor = Green500
-                )
-            },
-            floatingActionButtonPosition = FabPosition.End
+                            animateFab = true
+                        }, indication = RippleIndication(
+                            radius = 26.dp,
+                            bounded = false
+                        )
+                    ),
+            ) {
+                drawCircle(state[colorState], state[sizeState])
+            }
+        },
+        floatingActionButtonPosition = FabPosition.End
     )
 }