Android/안드로이드 Lottie/LottieFiles(.lottie) 가이드

✨ 개요

Lottie는 After Effects 애니메이션을 JSON으로 내보낸 뒤 네이티브에서 그려주는 라이브러리입니다.
안드로이드에서는 LottieAnimationView(뷰 시스템)만으로 설치 없이 가벼운 모션을 구현할 수 있습니다. 또한 LottieFiles의 .lottie(zip 컨테이너) 포맷도 선택할 수 있어요.


1. 포맷 한눈 비교

포맷 핵심 장점
Lottie(JSON) AE → Bodymovin으로 내보낸 JSON 표준적, 자료 풍부, 안드로이드 기본 Lottie에서 바로 사용
dotLottie(.lottie) JSON/에셋/메타를 하나로 묶은 zip 여러 애니/테마/상태를 한 파일로 배포, 구성·버저닝 편리

2 의존성

// gradle 프로젝트 레벨 or settings.gradle.kts
repositories { maven(url = "https://jitpack.io") }


// gradle App 레벨
dependencies {
    implementation("com.github.LottieFiles:dotlottie-android:0.5.0")
}

3 기본 사용

3-1 소스코드

import com.dotlottie.dlplayer.Mode
import com.lottiefiles.dotlottie.core.model.Config
import com.lottiefiles.dotlottie.core.util.DotLottieSource
import com.lottiefiles.dotlottie.core.widget.DotLottieAnimation

fun makeLottie() {
    val config = Config.Builder()
        .autoplay(true)
        .speed(1f)
        .loop(true)
        .source(DotLottieSource.Url("https://lottiefiles-mobile-templates.s3.amazonaws.com/ar-stickers/swag_sticker_piggy.lottie"))
        //.source(DotLottieSource.Asset("file.json")) // asset from the asset folder .json or .lottie
        //.source(DotLottieSource.Res(R.raw.animation)) // resource from raw resources .json or .lottie
        .useFrameInterpolation(true)
        .playMode(Mode.FORWARD)
        .build()

    val lottiView = findViewById<DotLottieAnimation>(R.id.lottie_view)
    lottiView.load(config)
}

3-2 레이아웃

<com.lottiefiles.dotlottie.core.widget.DotLottieAnimation
        android:id="@+id/lottie_view"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="36dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

4 기타 함수

val lottiView = findViewById<DotLottieAnimation>(R.id.lottie_view)

lottiView.stop()
lottiView.play()
lottiView.pause()
lottiView.setLoop(true)
lottiView.setSpeed(1.25f)

5. 결론



Related Posts