Add animation to FABs

amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/chatrooms/ChannelFabColumn.kt

@@ -20,6 +20,12 @@
  */
 package com.vitorpamplona.amethyst.ui.screen.loggedIn.chatrooms
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.height
@@ -38,6 +44,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import com.vitorpamplona.amethyst.R
@@ -76,7 +83,12 @@ fun ChannelFabColumn(
     }
 
     Column {
-        if (isOpen) {
+        AnimatedVisibility(
+            visible = isOpen,
+            enter = slideInVertically(initialOffsetY = { it / 2 }) + fadeIn(),
+            exit = slideOutVertically(targetOffsetY = { it / 2 }) + fadeOut(),
+        ) {
+            Column {
                 FloatingActionButton(
                     onClick = {
                         wantsToSendNewMessage = true
@@ -115,6 +127,11 @@ fun ChannelFabColumn(
 
                 Spacer(modifier = Modifier.height(20.dp))
             }
+        }
+
+        val rotationDegree by animateFloatAsState(
+            targetValue = if (isOpen) 45f else 0f,
+        )
 
         FloatingActionButton(
             onClick = { isOpen = !isOpen },
@@ -125,7 +142,10 @@ fun ChannelFabColumn(
             Icon(
                 imageVector = Icons.Outlined.Add,
                 contentDescription = stringRes(R.string.messages_create_public_private_chat_description),
-                modifier = Modifier.size(26.dp),
+                modifier =
+                    Modifier.size(26.dp).graphicsLayer {
+                        rotationZ = rotationDegree
+                    },
                 tint = Color.White,
             )
         }

amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/video/NewImageButton.kt

@@ -25,7 +25,12 @@ import android.net.Uri
 import android.os.Build
 import androidx.activity.compose.rememberLauncherForActivityResult
 import androidx.activity.result.contract.ActivityResultContracts
+import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -36,6 +41,7 @@ import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.AddPhotoAlternate
 import androidx.compose.material.icons.filled.CameraAlt
+import androidx.compose.material.icons.outlined.Close
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
@@ -186,7 +192,13 @@ fun NewImageButton(
         ShowProgress(postViewModel)
     } else {
         Column {
-            if (isOpen) {
+//            if (isOpen) {
+            AnimatedVisibility(
+                visible = isOpen,
+                enter = slideInVertically(initialOffsetY = { it / 2 }) + fadeIn(),
+                exit = slideOutVertically(targetOffsetY = { it / 2 }) + fadeOut(),
+            ) {
+                Column {
                     FloatingActionButton(
                         onClick = {
                             wantsToPostFromCamera = true
@@ -225,6 +237,7 @@ fun NewImageButton(
 
                     Spacer(modifier = Modifier.height(20.dp))
                 }
+            }
 
             FloatingActionButton(
                 onClick = {
@@ -233,6 +246,24 @@ fun NewImageButton(
                 modifier = Size55Modifier,
                 shape = CircleShape,
                 containerColor = MaterialTheme.colorScheme.primary,
+            ) {
+                AnimatedVisibility(
+                    visible = isOpen,
+                    enter = fadeIn(),
+                    exit = fadeOut(),
+                ) {
+                    Icon(
+                        imageVector = Icons.Outlined.Close,
+                        contentDescription = stringRes(id = R.string.new_short),
+                        modifier = Modifier.size(26.dp),
+                        tint = Color.White,
+                    )
+                }
+
+                AnimatedVisibility(
+                    visible = !isOpen,
+                    enter = fadeIn(),
+                    exit = fadeOut(),
                 ) {
                     Icon(
                         painter = painterResource(R.drawable.ic_compose),
@@ -243,6 +274,7 @@ fun NewImageButton(
                 }
             }
         }
+    }
 }
 
 @Composable