경험의 기록

에어비엔비에서 제공하는 Lottie 라이브러리를 사용하면

좀 더 쉽게 애니메이션을 만들 수 있다.

 

https://github.com/airbnb/lottie-android

 

airbnb/lottie-android

Render After Effects animations natively on Android and iOS, Web, and React Native - airbnb/lottie-android

github.com

라이브러리의 깃허브이며,

 

https://lottiefiles.com/

 

Free Lottie Animation Files, Tools & Plugins - LottieFiles

The world’s largest online platform for the world’s smallest animation format for designers, developers, and more. Access Lottie animation tools and plugins for Android, iOS, and Web.

lottiefiles.com

이 곳에서 로그인 후 애니메이션을 다운 받을 수 있다.

 

 


사용해보기

종속성 추가

// 로티
def lottieVersion = "3.7.0"
implementation "com.airbnb.android:lottie:$lottieVersion"

깃에 나와있는대로 추가해준다.

 

애니메이션 다운로드

추가하고자 하는 애니메이션을 JSON 으로 다운받는다.

 

에셋 폴더를 추가해주고

폴더에 아까 받은 JSON 파일을 넣어준다.

 

레이아웃에서

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_fileName="lurkingcat.json"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"/>

fileName 에 아까 받은 json 파일을,

autoplay는 시작하자마자 재생할건지의 여부,

loop는 반복할것인지에 대한 속성이다.

 

잘 적용되는 것을 확인할 수 있다.

 

 

class MainActivity : AppCompatActivity() {
    lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.animationView.setOnClickListener {
            binding.animationView.playAnimation()
        }
    }
}

또한 playAnimation 메소드를 이용하여 원할 때 재생할 수 있다.

 

 

https://github.com/HanYeop/AndroidStudio-Practice2/tree/master/LottieEx

 

HanYeop/AndroidStudio-Practice2

(2021.05.20~) 안드로이드 학습 내용 저장소. Contribute to HanYeop/AndroidStudio-Practice2 development by creating an account on GitHub.

github.com

 

반응형

공유하기

facebook twitter kakaoTalk kakaostory naver band
loading