Merge pull request #41 from YAPP-Github/ui/#39-onboarding-lottie

[UI/YAF-000] 온보딩 Lottie Animation을 적용합니다.
YAPP-Github · Jan 16, 2025 · 935aae7 · 935aae7
2 parents a146918 + d8cd643
commit 935aae7
Show file tree

Hide file tree

Showing 20 changed files with 409 additions and 23 deletions.
diff --git a/core/designsystem/src/main/res/raw/step1.gif b/core/designsystem/src/main/res/raw/step1.gif
diff --git a/core/designsystem/src/main/res/raw/step2.json b/core/designsystem/src/main/res/raw/step2.json
diff --git a/core/designsystem/src/main/res/raw/step3.json b/core/designsystem/src/main/res/raw/step3.json
diff --git a/core/ui/build.gradle.kts b/core/ui/build.gradle.kts
@@ -14,4 +14,5 @@ dependencies {
     implementation(libs.orbit.core)
     implementation(libs.orbit.compose)
     implementation(libs.orbit.viewmodel)
+    implementation(libs.lottie.compose)
 }
diff --git a/core/ui/src/main/java/com/yapp/ui/component/lottie/LottieAnimation.kt b/core/ui/src/main/java/com/yapp/ui/component/lottie/LottieAnimation.kt
@@ -0,0 +1,72 @@
+package com.yapp.ui.component.lottie
+
+import androidx.annotation.RawRes
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.layout.ContentScale
+import com.airbnb.lottie.compose.LottieCompositionSpec
+import com.airbnb.lottie.compose.LottieConstants
+import com.airbnb.lottie.compose.animateLottieCompositionAsState
+import com.airbnb.lottie.compose.rememberLottieComposition
+
+@Composable
+fun LottieAnimation(
+    modifier: Modifier = Modifier,
+    @RawRes resId: Int,
+    iterations: Int = LottieConstants.IterateForever,
+    contentScale: ContentScale = ContentScale.FillWidth,
+    scaleXAdjustment: Float = 1f,
+    scaleYAdjustment: Float = 1f,
+) {
+    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(resId))
+    val progress by animateLottieCompositionAsState(
+        composition = composition,
+        iterations = iterations,
+    )
+    val alpha = remember { Animatable(0f) }
+
+    LaunchedEffect(composition) {
+        if (composition != null) {
+            alpha.animateTo(
+                targetValue = 1f,
+                animationSpec = tween(durationMillis = 500),
+            )
+        }
+    }
+
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .graphicsLayer(
+                scaleX = getScaleFromContentScale(contentScale) * scaleXAdjustment,
+                scaleY = getScaleFromContentScale(contentScale) * scaleYAdjustment,
+                alpha = alpha.value,
+            ),
+    ) {
+        if (composition != null) {
+            com.airbnb.lottie.compose.LottieAnimation(
+                composition = composition,
+                progress = { progress },
+                modifier = Modifier.fillMaxSize(),
+            )
+        }
+    }
+}
+
+private fun getScaleFromContentScale(contentScale: ContentScale): Float {
+    return when (contentScale) {
+        ContentScale.Fit -> 1f
+        ContentScale.FillWidth -> 1.2f
+        ContentScale.FillHeight -> 1.5f
+        else -> 1f
+    }
+}
diff --git a/feature/onboarding/build.gradle.kts b/feature/onboarding/build.gradle.kts
@@ -13,4 +13,6 @@ dependencies {
     implementation(libs.orbit.core)
     implementation(libs.orbit.compose)
     implementation(libs.orbit.viewmodel)
+    implementation(libs.coil.compose)
+    implementation(libs.coil.gif)
 }
diff --git a/feature/onboarding/src/main/java/com/kms/onboarding/OnBoardingScreen.kt b/feature/onboarding/src/main/java/com/kms/onboarding/OnBoardingScreen.kt
@@ -66,6 +66,7 @@ fun OnboardingScreen(
     onNextClick: () -> Unit,
     onBackClick: (() -> Unit)?,
     showTopAppBar: Boolean = true,
+    showTopAppBarActions: Boolean = true,
     content: @Composable () -> Unit,
 ) {
     Column(
@@ -81,6 +82,7 @@ fun OnboardingScreen(
                 currentStep = currentStep,
                 totalSteps = totalSteps,
                 onBackClick = onBackClick,
+                showTopAppBarActions = showTopAppBarActions,
             )
         }
 
@@ -91,6 +93,7 @@ fun OnboardingScreen(
         }
 
         OnboardingBottomBar(
+            currentStep = currentStep,
             isButtonEnabled = isButtonEnabled,
             onNextClick = onNextClick,
         )

diff --git a/feature/onboarding/src/main/java/com/kms/onboarding/OnboardingAccessScreen.kt b/feature/onboarding/src/main/java/com/kms/onboarding/OnboardingAccessScreen.kt
@@ -34,9 +34,7 @@ fun OnboardingAccessScreen(
         currentStep = currentStep,
         totalSteps = totalSteps,
         isButtonEnabled = true,
-        onNextClick = {
-            isToggled.value = !isToggled.value
-        },
+        onNextClick = onNextClick,
         onBackClick = onBackClick,
     ) {
         val (text, imageRes) = when (isToggled.value) {

diff --git a/feature/onboarding/src/main/java/com/kms/onboarding/OnboardingCompleteScreen1.kt b/feature/onboarding/src/main/java/com/kms/onboarding/OnboardingCompleteScreen1.kt
@@ -0,0 +1,73 @@
+package com.kms.onboarding
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import com.yapp.designsystem.theme.OrbitTheme
+import com.yapp.ui.component.lottie.LottieAnimation
+import com.yapp.ui.utils.heightForScreenPercentage
+import com.yapp.ui.utils.paddingForScreenPercentage
+import feature.onboarding.R
+
+@Composable
+fun OnboardingCompleteScreen1(
+    state: OnboardingContract.State,
+    onNextClick: () -> Unit,
+    onBackClick: () -> Unit,
+) {
+    OnboardingScreen(
+        currentStep = 0,
+        totalSteps = 0,
+        isButtonEnabled = true,
+        onNextClick = onNextClick,
+        onBackClick = onBackClick,
+        showTopAppBar = true,
+        showTopAppBarActions = false,
+    ) {
+        Column(modifier = Modifier.fillMaxSize()) {
+            Spacer(modifier = Modifier.heightForScreenPercentage(0.05f))
+            Text(
+                text = stringResource(id = R.string.onboarding_completed_step1_subtitle),
+                style = OrbitTheme.typography.body2Regular,
+                color = OrbitTheme.colors.main,
+                modifier = Modifier.fillMaxWidth(),
+                textAlign = TextAlign.Center,
+            )
+            Text(
+                text = stringResource(id = R.string.onboarding_completed_step1_title),
+                style = OrbitTheme.typography.heading1SemiBold,
+                color = OrbitTheme.colors.white,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .paddingForScreenPercentage(topPercentage = 0.0147f, bottomPercentage = 0.1f),
+                textAlign = TextAlign.Center,
+            )
+            LottieAnimation(
+                modifier = Modifier.wrapContentSize(),
+                resId = core.designsystem.R.raw.step2,
+                contentScale = ContentScale.FillWidth,
+            )
+        }
+    }
+}
+
+@Composable
+@Preview
+fun OnboardingCompleteScreen1Preview() {
+    OrbitTheme {
+        OnboardingCompleteScreen1(
+            state = OnboardingContract.State(),
+            onNextClick = {},
+            onBackClick = {},
+        )
+    }
+}
diff --git a/feature/onboarding/src/main/java/com/kms/onboarding/OnboardingCompleteScreen2.kt b/feature/onboarding/src/main/java/com/kms/onboarding/OnboardingCompleteScreen2.kt
@@ -0,0 +1,112 @@
+package com.kms.onboarding
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kms.onboarding.component.OnBoardingTopAppBar
+import com.yapp.designsystem.theme.OrbitTheme
+import com.yapp.ui.component.button.OrbitButton
+import com.yapp.ui.component.lottie.LottieAnimation
+import com.yapp.ui.utils.heightForScreenPercentage
+import com.yapp.ui.utils.paddingForScreenPercentage
+import feature.onboarding.R
+
+@Composable
+fun OnboardingCompleteScreen2(
+    state: OnboardingContract.State,
+    onNextClick: () -> Unit,
+    onBackClick: () -> Unit,
+    currentStep: Int = 0,
+    totalSteps: Int = 0,
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(OrbitTheme.colors.gray_900)
+            .statusBarsPadding()
+            .navigationBarsPadding()
+            .imePadding(),
+    ) {
+        OnBoardingTopAppBar(
+            currentStep = currentStep,
+            totalSteps = totalSteps,
+            onBackClick = onBackClick,
+            showTopAppBarActions = false,
+        )
+
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .weight(1f),
+        ) {
+            Spacer(modifier = Modifier.heightForScreenPercentage(0.05f))
+            Text(
+                text = stringResource(id = R.string.onboarding_completed_step1_subtitle),
+                style = OrbitTheme.typography.body2Regular,
+                color = OrbitTheme.colors.main,
+                modifier = Modifier.fillMaxWidth(),
+                textAlign = TextAlign.Center,
+            )
+            Text(
+                text = stringResource(id = R.string.onboarding_completed_step2_title),
+                style = OrbitTheme.typography.heading1SemiBold,
+                color = OrbitTheme.colors.white,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .paddingForScreenPercentage(topPercentage = 0.0147f, bottomPercentage = 0.044f),
+                textAlign = TextAlign.Center,
+            )
+
+            Box(
+                modifier = Modifier.fillMaxSize(),
+                contentAlignment = Alignment.Center,
+            ) {
+                LottieAnimation(
+                    modifier = Modifier.wrapContentSize(),
+                    resId = core.designsystem.R.raw.step3,
+                    contentScale = ContentScale.FillWidth,
+                    scaleXAdjustment = 0.85f,
+                    scaleYAdjustment = 0.95f,
+                )
+                OrbitButton(
+                    label = "시작하기",
+                    modifier = Modifier
+                        .padding(horizontal = 20.dp)
+                        .padding(bottom = 10.dp)
+                        .align(Alignment.BottomCenter),
+                    onClick = onNextClick,
+                    enabled = true,
+                )
+            }
+        }
+    }
+}
+
+@Composable
+@Preview
+fun OnboardingCompleteScreen2Preview() {
+    OrbitTheme {
+        OnboardingCompleteScreen2(
+            state = OnboardingContract.State(),
+            onNextClick = {},
+            onBackClick = {},
+        )
+    }
+}
diff --git a/feature/onboarding/src/main/java/com/kms/onboarding/OnboardingExplainScreen.kt b/feature/onboarding/src/main/java/com/kms/onboarding/OnboardingExplainScreen.kt
@@ -10,9 +10,12 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.kms.onboarding.component.GifImage
 import com.yapp.designsystem.theme.OrbitTheme
 import com.yapp.ui.utils.heightForScreenPercentage
+import com.yapp.ui.utils.paddingForScreenPercentage
 import feature.onboarding.R
 
 @Composable
@@ -45,10 +48,25 @@ fun OnboardingExplainScreen(
                 color = OrbitTheme.colors.white,
                 modifier = Modifier
                     .padding(horizontal = 20.dp)
-                    .padding(top = 12.dp)
+                    .paddingForScreenPercentage(topPercentage = 0.014f, bottomPercentage = 0.037f)
                     .fillMaxWidth(),
                 textAlign = TextAlign.Center,
             )
+            GifImage(
+                modifier = Modifier.fillMaxSize(),
+                gifResId = core.designsystem.R.raw.step1,
+            )
         }
     }
 }
+
+@Composable
+@Preview
+fun OnboardingExplainScreenPreview() {
+    OrbitTheme {
+        OnboardingExplainScreen(
+            state = OnboardingContract.State(),
+            onNextClick = {},
+        )
+    }
+}