안드로이드 Lottie 로티 애니메이션 사용하기.

공감 및 댓글은 포스팅 하는데  아주아주 큰 힘이 됩니다!! 포스팅 내용이 찾아주신 분들께  도움이 되길 바라며 더 깔끔하고 좋은 포스팅을  만들어 나가겠습니다^^

이번 포스팅에서는 안드로이드에서 로티애니메이션 사용 방법에 대해

공부합니다.

로티 애니메이션 깃헙

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

1. 의존성을 추가해줍니다.

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

    //for lottie animation
    implementation 'com.airbnb.android:lottie:2.7.0'
}

2. assets 폴더를 만들어주고 그 안에 애니메이션 json 파일을 넣어줍니다.

샘플 파일들은

https://lottiefiles.com/featured 여기서 다운받으실 수 있습니다.

3. xml 구성 및 애니메이션 적용하기.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottieAnimView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</android.support.constraint.ConstraintLayout>

MainActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.airbnb.lottie.LottieAnimationView;
import com.airbnb.lottie.LottieDrawable;

public class MainActivity extends AppCompatActivity {

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

        LottieAnimationView animationView = findViewById(R.id.lottieAnimView);
        setUpAnimation(animationView);

    }

    private void setUpAnimation(LottieAnimationView animationView) {
        // 재생할 애니메이션 넣어준다.
        animationView.setAnimation("data.json");
        // 반복횟수를 무한히 주고 싶을 땐 LottieDrawable.INFINITE or 원하는 횟수
        animationView.setRepeatCount(LottieDrawable.INFINITE); 
        // 시작
        animationView.playAnimation();
    }
}

물론 xml만으로도 적용할 수 있습니다.

xml만으로 적용하기

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottieAnimView"
    app:lottie_loop="true"
    app:lottie_repeatCount="10"
    app:lottie_autoPlay="true"

    app:lottie_rawRes="@raw/data"
    app:lottie_fileName="data.json"
    
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

xml코드로 적용할 경우 무한히 재생할 때는 lottie_loop="true"를 주면 되고

정해진 횟수만큼 재생할 때는 lottie_repeatCount="10" 처럼 사용합니다.

lottie_autoPlay="true"를 주면 애니메이션이 준비되는 대로 바로 실행합니다.

그리고 애니메이션 파일을 두 가지 방법으로 줄 수 있는데

app:lottie_rawRes="@raw/..." 

과

app:lottie_fileName="data.json" 입니다.

둘 중 원하는 방법으로 쓰시면 됩니다.

어렵지 않죠? 실제로 사용해보시면 금방 활용하실 수 있을거에요.

이상입니다. 감사합니다.