feat: Adicionado logo animado como ação de carregamento

Logo criado em .mp4 e convertido para formato da API Lottie através do site oficial
Animação está em FeedScreen como recurso visual para ação de carregamento

Author: git-jr

app/src/main/java/com/paradoxo/threadscompose/MainActivity.kt

@@ -118,7 +118,7 @@ class MainActivity : ComponentActivity() {
         super.onCreate(savedInstanceState)
         WindowCompat.setDecorFitsSystemWindows(window, false)
 
-        val testMode = true
+        val testMode = false
 
         if (testMode) {
             setContent {
@@ -231,21 +231,24 @@ class MainActivity : ComponentActivity() {
             }
 
             3 -> {
-                var previsousProgress by remember { mutableFloatStateOf(0f) }
-                var speed by remember { mutableFloatStateOf(0f) }
+                var previousProgress by remember { mutableFloatStateOf(0f) }
+                var speed by remember { mutableFloatStateOf(1f) }
                 val composition by rememberLottieComposition(
                     LottieCompositionSpec.RawRes(
                         R.raw.logo_lines_animated
                     )
                 )
                 val animatable = rememberLottieAnimatable()
 
+                val context = LocalContext.current
+                context.showMessage(animatable.isPlaying.toString())
+
                 LaunchedEffect(speed) {
                     animatable.animate(
                         composition,
                         iteration = LottieConstants.IterateForever,
                         speed = speed,
-                        initialProgress = previsousProgress,
+                        initialProgress = previousProgress,
                     )
                 }
                 val interactionSource = remember { MutableInteractionSource() }
@@ -259,7 +262,7 @@ class MainActivity : ComponentActivity() {
                             indication = null
                         ) {
                             speed = if (speed == 0f) 1f else 0f
-                            previsousProgress = animatable.progress
+                            previousProgress = animatable.progress
                         }
                 )
             }

app/src/main/java/com/paradoxo/threadscompose/ui/FeedScreen.kt

@@ -4,7 +4,9 @@ import androidx.compose.animation.core.Animatable
 import androidx.compose.animation.core.Spring
 import androidx.compose.animation.core.spring
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.gestures.detectVerticalDragGestures
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
@@ -17,6 +19,9 @@ import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+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
@@ -28,6 +33,11 @@ import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.airbnb.lottie.compose.LottieAnimation
+import com.airbnb.lottie.compose.LottieCompositionSpec
+import com.airbnb.lottie.compose.LottieConstants
+import com.airbnb.lottie.compose.rememberLottieAnimatable
+import com.airbnb.lottie.compose.rememberLottieComposition
 import com.paradoxo.threadscompose.R
 import com.paradoxo.threadscompose.model.Post
 import kotlinx.coroutines.launch
@@ -45,7 +55,7 @@ fun FeedScreen(
             .systemBarsPadding()
     ) {
         item {
-            ExpandableAppLogo()
+            ExpandableAppLogoLottie()
         }
 
         items(
@@ -70,6 +80,107 @@ fun FeedScreen(
     }
 }
 
+@Composable
+private fun ExpandableAppLogoLottie() {
+    val maxHeightImage = 200.dp
+    val defaultSizeImage = 72.dp
+    val coroutineScope = rememberCoroutineScope()
+    val animatedImageSize = remember { Animatable(defaultSizeImage.value) }
+
+
+    val lottiePreviousProgress by remember { mutableFloatStateOf(0f) }
+    val lottieSpeed by remember { mutableFloatStateOf(1f) }
+    val lottieComposition by rememberLottieComposition(
+        LottieCompositionSpec.RawRes(
+            R.raw.logo_lines_animated
+        )
+    )
+    val lottieAnimatable = rememberLottieAnimatable()
+
+    LaunchedEffect(lottieSpeed) {
+        lottieAnimatable.animate(
+            lottieComposition,
+            iteration = LottieConstants.IterateForever,
+            speed = lottieSpeed,
+        )
+    }
+
+    Box(
+        modifier = Modifier
+            .pointerInput(Unit) {
+                detectVerticalDragGestures(
+                    onVerticalDrag = { change, offset ->
+                        coroutineScope.launch {
+                            val newSize =
+                                (animatedImageSize.value + offset / 8).coerceAtLeast(
+                                    defaultSizeImage.value
+                                )
+                            if (newSize < maxHeightImage.value) {
+                                animatedImageSize.snapTo(newSize)
+                            }
+                            change.consume()
+                        }
+                    },
+                    onDragEnd = {
+                        coroutineScope.launch {
+                            animatedImageSize.animateTo(
+                                defaultSizeImage.value,
+                                animationSpec = spring(
+                                    dampingRatio = Spring.DampingRatioLowBouncy,
+                                    stiffness = Spring.StiffnessLow
+                                )
+                            )
+                        }
+                        coroutineScope.launch {
+                            lottieAnimatable.animate(
+                                lottieComposition,
+                                iteration = 1,
+                                speed = lottieSpeed,
+                                reverseOnRepeat = true,
+                                initialProgress = lottiePreviousProgress,
+                            )
+                        }
+                    },
+                    onDragStart = {
+                        coroutineScope.launch {
+                            lottieAnimatable.animate(
+                                lottieComposition,
+                                iteration = LottieConstants.IterateForever,
+                                speed = lottieSpeed,
+                                initialProgress = lottiePreviousProgress,
+                            )
+                        }
+                    }
+                )
+            }
+    ) {
+        // To remove click animation of clickable modifier
+        val interactionSource = remember { MutableInteractionSource() }
+
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .clickable(
+                    interactionSource = interactionSource,
+                    indication = null
+                ) {
+//                    lottieSpeed = if (lottieSpeed == 0f) 1f else 0f
+//                    lottiePreviousProgress = lottieAnimatable.progress
+                },
+            horizontalArrangement = Arrangement.Center,
+        ) {
+
+            LottieAnimation(
+                composition = lottieComposition,
+                progress = { lottieAnimatable.progress },
+                modifier = Modifier
+                    .size(animatedImageSize.value.dp)
+            )
+
+        }
+    }
+}
+
 @Composable
 private fun ExpandableAppLogo() {
     val maxHeightImage = 200.dp