[2022.07.09] 코딩 일기 : 55일 차

55일 차 코딩 일기입니다.

오늘은 Compose Navigation의 애니메이션을 추가하였습니다.

그냥 NavHost를 이용하면 FadeIn / FadeOut이 기본적인지 깜빡이는 효과를 보이면서 화면이 전환되었습니다.

배경색이 검정이라 더 눈에 띄게 보이는 듯하기도 하고 다른 화면과 다른 게 화면이 변하는 것이 신경 쓰여서 애니메이션을 적용하였습니다.

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun ShopNavigationGraph() {
    val navHostController = rememberAnimatedNavController()
    val routeAction = remember(navHostController) {
        RouteAction(navHostController)
    }

    AnimatedNavHost(
        navController = navHostController,
        startDestination = RouteAction.Shop,

        ) {
        composable(
            route = RouteAction.Shop,
            enterTransition = { scaleIn(animationSpec = spring(stiffness = Spring.StiffnessMedium)) },
            exitTransition = { scaleOut(animationSpec = spring(stiffness = Spring.StiffnessMedium)) }
        ) {
            ShoppingContainer(routeAction)
        }
 ...
 }

아직 테스트 단계라고 하여 ExperimentalAnimationApi를 넣어 주었습니다.

Compose는 이런 부분이 많이 있어서 언제든 바뀔 수 있다는 게 걸리는 부분인 것 같습니다.

import com.google.accompanist.navigation.animation.AnimatedNavHost
import com.google.accompanist.navigation.animation.composable
import com.google.accompanist.navigation.animation.rememberAnimatedNavController

기존의 NavHost를 바꾸는 부분에서 composable를 import안 바꾸고 사용해서 안됐었습니다ㅠ

바보 같이 다른 곳에서 왜 안되지 하고 찾고 있었네요 ㅎㅎ;;

애니메이션은 여러 가지 효과를 줄 수 있습니다. 기본 예제에서는 Slide 효과를 알려주지만

저는 다른 화면에서 scaleIn / sacleOut 효과가 가장 비슷하기 때문에 저렇게 적용해 보았습니다~

그다음 피그마로 내 정보 UI를 꾸며보았습니다.

쿠폰함도 디자인하려다가 쿠폰함이 쓸모가 없는 것 같아서 고민을 좀 해보려고 합니다