[코틀린 컴포즈] Lottie 활용하기

오늘은 플러터로 자주 사용하던 Lottie파일을 컴포즈로 안드로이드앱에 적용해보려고 한다.

 

implementation 추가하기

버전은 최신버전으로 업데이트해서 이용해보자.

2024년 2월 현재 최신버전은 6.3.0 이다.

implementation("com.airbnb.android:lottie-compose:6.3.0")

이제 로티 애니메이션 파일을 찾으러 가보자.

 

Lottie파일 다운로드

아래 사이트에서 무료로 사용할 수 있는 애니메이션들을 구할 수 있다.

https://lottiefiles.com/

LottieFiles: Download Free lightweight animations for website & apps.

아래에서 원하는 파일을 json형식 파일로 다운 받고 아래와 같은 위치에 프로젝트에 저장했다.

로티 애니메이션 위젯 만들기

@Composable
fun Loader() {
    //로티 JSON 파일 가져오기
    val composition by rememberLottieComposition(LottieCompositionSpec.Asset("login.json"))
    //로티 애니메이션 정렬하기
    val progress by animateLottieCompositionAsState(
        composition,
        iterations = Int.MAX_VALUE, // 반복횟수 설정 : 무한 반복하게 최대 수.
    )
    //로티 애니메이션 뷰
    LottieAnimation(
        composition = composition,
        progress = { progress },
        modifier = Modifier.size(300.dp) // 로티 위젯 크기 설정
    )
}

 

위에서 원하는 설정을 바꿔서 이용하면 된다.

결과물

 

오늘은 로티파일을 코틀린 컴포즈로 적용해서 위젯으로 사용하는 방법을 배웠다.

파이팅!!