some more animations

app/src/main/java/com/google/jetpackcamera/ui/JcaApp.kt

@@ -16,6 +16,12 @@
 package com.google.jetpackcamera.ui
 
 import android.Manifest
+import androidx.compose.animation.AnimatedContentTransitionScope
+import androidx.compose.animation.core.EaseIn
+import androidx.compose.animation.core.EaseOut
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Modifier
@@ -87,7 +93,7 @@ private fun JetpackCameraNavHost(
             )
         }
 
-        composable(PREVIEW_ROUTE) {
+        composable(route = PREVIEW_ROUTE, enterTransition = { fadeIn() }) {
             val permissionStates = rememberMultiplePermissionsState(
                 permissions = listOf(
                     Manifest.permission.CAMERA,
@@ -113,7 +119,26 @@ private fun JetpackCameraNavHost(
                 isDebugMode = isDebugMode
             )
         }
-        composable(SETTINGS_ROUTE) {
+        composable(
+            route = SETTINGS_ROUTE,
+            enterTransition = {
+                fadeIn(
+                    animationSpec = tween(
+                        300,
+                        easing = LinearEasing
+                    )
+                ) + slideIntoContainer(
+                    animationSpec = tween(300, easing = EaseIn),
+                    towards = AnimatedContentTransitionScope.SlideDirection.Start
+                )
+            },
+            exitTransition = {
+                slideOutOfContainer(
+                    animationSpec = tween(300, easing = EaseOut),
+                    towards = AnimatedContentTransitionScope.SlideDirection.End
+                )
+            }
+        ) {
             SettingsScreen(
                 versionInfo = VersionInfoHolder(
                     versionName = BuildConfig.VERSION_NAME,

feature/preview/src/main/java/com/google/jetpackcamera/feature/preview/quicksettings/ui/QuickSettingsComponents.kt

@@ -15,8 +15,9 @@
  */
 package com.google.jetpackcamera.feature.preview.quicksettings.ui
 
+import androidx.compose.animation.core.Spring
 import androidx.compose.animation.core.animateFloatAsState
-import androidx.compose.animation.core.tween
+import androidx.compose.animation.core.spring
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
@@ -36,10 +37,13 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.draw.scale
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.platform.LocalConfiguration
@@ -72,7 +76,7 @@ import kotlin.math.min
 // completed components ready to go into preview screen
 
 @Composable
-fun ExpandedQuickSetRatio(
+fun FocusedQuickSetRatio(
     setRatio: (aspectRatio: AspectRatio) -> Unit,
     currentRatio: AspectRatio,
     modifier: Modifier = Modifier
@@ -179,9 +183,9 @@ fun QuickSetRatio(
 
 @Composable
 fun QuickSetFlash(
+    modifier: Modifier = Modifier,
     onClick: (FlashMode) -> Unit,
-    flashModeUiState: FlashModeUiState,
-    modifier: Modifier = Modifier
+    flashModeUiState: FlashModeUiState
 ) {
     when (flashModeUiState) {
         is FlashModeUiState.Unavailable ->
@@ -283,8 +287,8 @@ fun ToggleQuickSettingsButton(
     modifier: Modifier = Modifier
 ) {
     val rotationAngle by animateFloatAsState(
-        targetValue = if (isOpen) 180f else 0f,
-        animationSpec = tween(durationMillis = 300) // Adjust duration as needed
+        targetValue = if (isOpen) -180f else 0f,
+        animationSpec = spring(stiffness = Spring.StiffnessLow) // Adjust duration as needed
     )
     Row(
         horizontalArrangement = Arrangement.Center,
@@ -308,7 +312,6 @@ fun ToggleQuickSettingsButton(
                     indication = null,
                     onClick = toggleDropDown
                 )
-            // .scale(1f, if (isOpen) -1f else 1f)
         )
     }
 }
@@ -347,12 +350,33 @@ fun QuickSettingUiItem(
     isHighLighted: Boolean = false,
     enabled: Boolean = true
 ) {
+    val iconSize = dimensionResource(id = R.dimen.quick_settings_ui_item_icon_size)
+
+    var buttonClicked by remember { mutableStateOf(false) }
+    val animatedScale by animateFloatAsState(
+        targetValue = if (buttonClicked) 1.1f else 1f, // Scale up to 110%
+        animationSpec = spring(
+            dampingRatio = Spring.DampingRatioLowBouncy,
+            stiffness = Spring.StiffnessMedium
+        ),
+        finishedListener = {
+            buttonClicked = false // Reset the trigger
+        }
+    )
     Column(
         modifier =
         modifier
             .wrapContentSize()
             .padding(dimensionResource(id = R.dimen.quick_settings_ui_item_padding))
-            .clickable(onClick = onClick, enabled = enabled),
+            .clickable(
+                enabled = enabled,
+                onClick = {
+                    buttonClicked = true
+                    onClick()
+                },
+                indication = null,
+                interactionSource = null
+            ),
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
@@ -366,9 +390,7 @@ fun QuickSettingUiItem(
             Icon(
                 painter = painter,
                 contentDescription = accessibilityText,
-                modifier = Modifier.size(
-                    dimensionResource(id = R.dimen.quick_settings_ui_item_icon_size)
-                )
+                modifier = Modifier.size(iconSize).scale(animatedScale)
             )
 
             Text(text = text, textAlign = TextAlign.Center)

feature/preview/src/main/java/com/google/jetpackcamera/feature/preview/ui/CameraControlsOverlay.kt

@@ -151,6 +151,8 @@ fun CameraControlsOverlay(
 
             ControlsBottom(
                 modifier = Modifier
+                    // padding to avoid snackbar
+                    .padding(bottom = 60.dp)
                     .fillMaxWidth()
                     .align(Alignment.BottomCenter),
                 previewUiState = previewUiState,
@@ -198,7 +200,11 @@ private fun ControlsTop(
                         .testTag(SETTINGS_BUTTON),
                     onNavigateToSettings = onNavigateToSettings
                 )
-                if (!isQuickSettingsOpen) {
+                AnimatedVisibility(
+                    visible = !isQuickSettingsOpen,
+                    enter = fadeIn(),
+                    exit = fadeOut()
+                ) {
                     QuickSettingsIndicators(
                         flashModeUiState = flashModeUiState,
                         onFlashModeClick = onChangeFlash
@@ -272,7 +278,10 @@ private fun ControlsBottom(
     ) -> Unit = { _, _, _ -> },
     onStopVideoRecording: () -> Unit = {}
 ) {
-    Column(modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally) {
+    Column(
+        modifier = modifier,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
         CompositionLocalProvider(
             LocalTextStyle provides LocalTextStyle.current.copy(fontSize = 20.sp)
         ) {
@@ -307,20 +316,27 @@ private fun ControlsBottom(
         ) {
             // Row that holds flip camera, capture button, and audio
             Row(Modifier.weight(1f), horizontalArrangement = Arrangement.SpaceEvenly) {
-                if (!isQuickSettingsOpen && videoRecordingState is VideoRecordingState.Inactive) {
-                    FlipCameraButton(
-                        modifier = Modifier.testTag(FLIP_CAMERA_BUTTON),
-                        onClick = onFlipCamera,
-                        // enable only when phone has front and rear camera
-                        enabledCondition = systemConstraints.availableLenses.size > 1
-                    )
-                } else if (!isQuickSettingsOpen &&
-                    videoRecordingState is VideoRecordingState.Active
+                // animation fades in/out this component based on quick settings
+                AnimatedVisibility(
+                    visible = !isQuickSettingsOpen,
+                    enter = fadeIn(),
+                    exit = fadeOut()
                 ) {
-                    PauseResumeToggleButton(
-                        onSetPause = onSetPause,
-                        currentRecordingState = videoRecordingState
-                    )
+                    if (videoRecordingState is VideoRecordingState.Inactive) {
+                        FlipCameraButton(
+                            modifier = Modifier.testTag(FLIP_CAMERA_BUTTON),
+                            onClick = onFlipCamera,
+                            lensFacing = previewUiState.currentCameraSettings.cameraLensFacing,
+                            // enable only when phone has front and rear camera
+                            enabledCondition = systemConstraints.availableLenses.size > 1
+                        )
+                    } else if (videoRecordingState is VideoRecordingState.Active
+                    ) {
+                        PauseResumeToggleButton(
+                            onSetPause = onSetPause,
+                            currentRecordingState = videoRecordingState
+                        )
+                    }
                 }
             }
             CaptureButton(

feature/preview/src/main/java/com/google/jetpackcamera/feature/preview/ui/PreviewScreenComponents.kt

@@ -27,7 +27,6 @@ import androidx.camera.viewfinder.compose.MutableCoordinateTransformer
 import androidx.camera.viewfinder.core.ImplementationMode
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.core.Animatable
-import androidx.compose.animation.core.EaseOutExpo
 import androidx.compose.animation.core.LinearEasing
 import androidx.compose.animation.core.Spring
 import androidx.compose.animation.core.animateFloatAsState
@@ -84,7 +83,6 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableFloatStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.runtime.setValue
 import androidx.compose.runtime.snapshotFlow
@@ -93,6 +91,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.draw.scale
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.graphics.vector.rememberVectorPainter
@@ -125,7 +124,6 @@ import kotlinx.coroutines.flow.combine
 import kotlinx.coroutines.flow.distinctUntilChanged
 import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.flow.onCompletion
-import kotlinx.coroutines.launch
 
 private const val TAG = "PreviewScreen"
 private const val BLINK_TIME = 100L
@@ -155,7 +153,7 @@ fun ElapsedTimeText(
 fun PauseResumeToggleButton(
     modifier: Modifier = Modifier,
     onSetPause: (Boolean) -> Unit,
-    size: Float = 75f,
+    size: Float = 80f,
     currentRecordingState: VideoRecordingState.Active
 ) {
     Box(
@@ -199,21 +197,47 @@ fun AmplitudeVisualizer(
     onToggleAudio: () -> Unit
 ) {
     val currentUiState = rememberUpdatedState(audioUiState)
+    var buttonClicked by remember { mutableStateOf(false) }
+    // animation value for the toggle icon itself
+    val animatedToggleScale by animateFloatAsState(
+        targetValue = if (buttonClicked) 1.1f else 1f, // Scale up to 110%
+        animationSpec = spring(
+            dampingRatio = Spring.DampingRatioLowBouncy,
+            stiffness = Spring.StiffnessMedium
+        ),
+        finishedListener = {
+            buttonClicked = false // Reset the trigger
+        }
+    )
 
     // Tweak the multiplier to amplitude to adjust the visualizer sensitivity
-    val animatedScaling by animateFloatAsState(
-        targetValue = EaseOutExpo.transform(1 + (1.75f * currentUiState.value.amplitude.toFloat())),
+    val animatedAudioScale by animateFloatAsState(
+        targetValue = 1 + (1.75f * currentUiState.value.amplitude.toFloat()),
+        animationSpec = spring(
+            dampingRatio = Spring.DampingRatioLowBouncy,
+            stiffness = Spring.StiffnessLow
+        ),
         label = "AudioAnimation"
     )
-    Box(modifier = modifier.clickable { onToggleAudio() }) {
-        // animated circle
+    Box(
+        modifier = modifier.clickable(
+            onClick = {
+                buttonClicked = true
+                onToggleAudio()
+            },
+            interactionSource = null,
+            // removes the greyish background animation that appears when clicking
+            indication = null
+        )
+    ) {
+        // animated audio circle
         Canvas(
             modifier = Modifier
                 .align(Alignment.Center),
             onDraw = {
                 drawCircle(
                     // tweak the multiplier to size to adjust the maximum size of the visualizer
-                    radius = (size * animatedScaling).coerceIn(size, size * 1.65f),
+                    radius = (size * animatedAudioScale).coerceIn(size, size * 1.65f),
                     alpha = .5f,
                     color = Color.White
                 )
@@ -226,7 +250,7 @@ fun AmplitudeVisualizer(
                 .align(Alignment.Center),
             onDraw = {
                 drawCircle(
-                    radius = (size),
+                    radius = (size * animatedToggleScale),
                     color = Color.White
                 )
             }
@@ -236,6 +260,7 @@ fun AmplitudeVisualizer(
             modifier = Modifier
                 .align(Alignment.Center)
                 .size((0.5 * size).dp)
+                .scale(animatedToggleScale)
                 .apply {
                     if (currentUiState.value is AudioUiState.Enabled.On) {
                         testTag(AMPLITUDE_HOT_TAG)
@@ -622,28 +647,37 @@ fun FlipCameraButton(
 ) {
     var rotation by remember { mutableFloatStateOf(0f) }
     val animatedRotation = remember { Animatable(0f) }
-    val coroutineScope = rememberCoroutineScope()
+    var initialLaunch by remember { mutableStateOf(false) }
+
+    // spin animate whenever lensfacing changes
+    LaunchedEffect(lensFacing) {
+        if (initialLaunch) {
+            // full 360
+            rotation -= 180f
+            animatedRotation.animateTo(
+                targetValue = rotation,
+                animationSpec = spring(
+                    dampingRatio = Spring.DampingRatioMediumBouncy,
+                    stiffness = Spring.StiffnessVeryLow
+                )
+            )
+        }
+        // dont rotate on the initial launch
+        else {
+            initialLaunch = true
+        }
+    }
     IconButton(
         modifier = modifier.size(40.dp),
-        onClick = {
-            rotation -= 360f
-            coroutineScope.launch {
-                animatedRotation.animateTo(
-                    targetValue = rotation,
-                    animationSpec = spring(
-                        dampingRatio = Spring.DampingRatioLowBouncy,
-                        stiffness = Spring.StiffnessVeryLow
-                    )
-                )
-            }
-            onClick()
-        },
+        onClick = onClick,
         enabled = enabledCondition
     ) {
         Icon(
             imageVector = Icons.Filled.FlipCameraAndroid,
             contentDescription = stringResource(id = R.string.flip_camera_content_description),
-            modifier = Modifier.size(72.dp).rotate(animatedRotation.value)
+            modifier = Modifier
+                .size(72.dp)
+                .rotate(animatedRotation.value)
         )
     }
 }