[Java][Android] Lottie 라이브러리 활용해 애니메이션 기능 구현하기

안녕하세요

오늘은 Lottie 라이브러리로 애니메이션 기능을 구현해보도록 하겠습니다.

Lottie는 애니메이션을 JSON 형식으로 앱에서 재생할 수 있도록 해주는 도구입니다.

 

https://lottiefiles.com 에서 마음에 드는 .json 애니메이션 파일을 다운로드 해주시고

 

이름을 animation.json 으로 변경해준 뒤에,

(*이름을 꼭 animation으로 할 필요는 없지만 이번 포스팅에서는 animation을 사용하겠습니다.)

해당 json 파일을 res/raw/ 폴더에 저장해주시면 됩니다.

(*raw 폴더가 없으면 만들어주세요.)

 

 

그리고 build.gradle.kts (Module :app) 에

implementation ("com.airbnb.android:lottie:6.0.0")

로티 라이브러리를 추가해줍니다.

 

 

전체 코드입니다.

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:gravity="center"
  android:orientation="vertical"
  android:padding="24dp">

  <com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottieAnimationView"
    android:layout_width="300dp"
    android:layout_height="300dp"
    app:lottie_rawRes="@raw/animation"
    app:lottie_autoPlay="false"
    app:lottie_loop="true" />

  <Button
    android:id="@+id/btnPlayPause"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="애니메이션 재생"
    android:layout_marginTop="20dp"/>
</LinearLayout>

 

MainActivity.java

public class MainActivity extends AppCompatActivity {

  private LottieAnimationView lottieAnimationView;
  private Button btnPlayPause;
  private boolean isPlaying = false;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    lottieAnimationView = findViewById(R.id.lottieAnimationView);
    btnPlayPause = findViewById(R.id.btnPlayPause);

    btnPlayPause.setOnClickListener(v -> {
      if (isPlaying) {
        lottieAnimationView.pauseAnimation();
        btnPlayPause.setText("애니메이션 재생");
      } else {
        lottieAnimationView.playAnimation();
        btnPlayPause.setText("애니메이션 정지");
      }
      isPlaying = !isPlaying;
    });
  }

}

 

 

시연 영상입니다.