Kotlin 연습 Lottie / Gif로 움직이는 사진 넣기

원래는 일반적인 gif 를 Kotlin으로 움직이는 방법을 알아볼까 했지만 

https://world-of-larooly.tistory.com/28

Swift Lottie 로 움직이는 사진 넣기

요즘은 Lottie 도 많이 쓰이기도 하고 

이걸 안드로이드 쪽에서는 어떻게 처리하는지 궁금해져서

둘 다 알아보도록 하겠습니다. (고민될 때는 둘 다 하는게 짱이죠.)

 

0. 다운로드한 파일 asset  에 넣기

1. Lottie

2. Gif

 

일단 이번 예제에서 쓰일 Lottie 와 Gif 파일을 준비해야겠죠?

아래 사이트에서 다운로드 받으실때 설정하면 gif와 lottie 둘다 받으실 수 있어요.

https://lottiefiles.com/

LottieFiles: Download Free lightweight animations for website & apps.

저번과 동일하게 여기서 마음에 드시는 걸로 다운로드 해주세요. 

오늘은 아래 있는 걸로 하겠습니다. 

야옹이를 사용해서 하도록 하겠습니다.

0. 다운로드한 파일 asset  에 넣기

- asset 폴더가 안보이시는 분들은 아래를 참고해서 만들어주세요.

폴더가 없으신 분들은 참고하세요.

- 저는 아래처럼 넣어준 상태에서 시작하겠습니다.

 

1. Lottie

- 파일을 실행시키려면 build.gradle(:app) 에 추가해주세요.

dependencies {
	...
    implementation "com.airbnb.android:lottie:5.2.0"
	...
}

- 참고로 최신 버전은 여기서 확인 가능합니다. (글 작성 기준 : 5.2.0)

- 버전 뿐 아니라 사용법도 같이 적혀 있으니 참고해주세요.

http://airbnb.io/lottie/#/android

Lottie Docs

- 저희는 버튼을 누를때마다 야옹이(?) 가 나와서 한번 움직이는 걸로 해줄께요. 

- 먼저 고양이가 움직이는 뷰를 만들어주도록 하겠습니다. 

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animation_lottie"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#229966"
    app:lottie_autoPlay="true"
    app:lottie_fileName="blackcat.json"
    app:lottie_loop="false" />

- app:lottie_autoPlay 이미지가 알아서 재생될지 여부를 결정합니다.

- app:lottie_loop 이미지가 계속 움직일지 한번만 움직일지를 결정합니다.

(여기까지만 하셔도 이미지는 움직이긴 합니다만 버튼으로 움직임을 제어해봅시다.)

 

- 그리고 저희가 누를 버튼이 필요하겠죠?

<Button
    android:id="@+id/button_lottie"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="Lottie" />

 

- 아래 보이시는 옵션중에 필요한 것만 사용하시면 됩니다. 

val lottieView = findViewById<LottieAnimationView>(R.id.animation_lottie)
val btnLottie = findViewById<Button>(R.id.button_lottie).setOnClickListener {
    lottieView.isGone = false // 영역을 보이게 해주세요. (이건 Lottie 기능이 아닌 View 기본 기능입니다.)
    lottieView.repeatCount = LottieDrawable.INFINITE// 0 // 몇번 더 할지를 결정
    lottieView.speed = 0.3f // 속도를 지정할 수 있어요.
    lottieView.setMinProgress(0.4f) // 0~1 사이 시작지점을 정할 수 있어요
    lottieView.setMaxProgress(0.5f) // 0~1 사이 종료지점을 정할 수 있어요.

    lottieView.playAnimation() // 애니메이션을 시작해주세요.
}

- repeatCount  몇번 더 할지를 결정 (LottieDrawable.INFINITE : 무한 ,0 : 한번 재생후 반복 안함) 

- speed 속도 조절 (1배가 기본)
 - setMinProgress/setMaxProgress 0~1 사이 시작지점/종료지점 설정 (특정 구간의 움직임만 설정해 반복이 가능해요)

 

여기서 제가 원하는 옵션만 설정해서 해볼께요.

저는 아래만 설정해서 돌려볼께요. 

lottieView.repeatCount = 1// 한번더 반복 -> 총 두번 움직임
lottieView.speed = 0.5f //->원래속도의 0.5 배 재생

두번만 천천히 움직이고 멈추시는게 보이나요?

 

Lottie 는 여기까지 하고 Gif 로 넘어가 봅시다.

 

2. Gif

- 마찬가지로 파일을 실행하기 위해 Glide 라는 외부 라이브러리를 사용할껍니다. 

dependencies {
    ...
    implementation 'com.github.bumptech.glide:glide:4.14.2'
    ...
}

- 마찬가지로 최신버전은 아래 링크를 참고해주세요. (글 작성 기준 : 4.14.2)

https://github.com/bumptech/glide

GitHub - bumptech/glide: An image loading and caching library for Android focused on smooth scrolling

- 아직 Glide 쪽은 제어를 어떻게 하는지 잘 모르겠네요. 

- 일단 기본 방식은 ImageView에 gif 를 넣는 방식입니다. 

<ImageView
    android:id="@+id/animation_gif"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#995599"
    app:srcCompat="@drawable/ic_launcher_foreground" />

val gifView = findViewById<ImageView>(R.id.animation_gif)

val btnGif = findViewById<Button>(R.id.button_gif).setOnClickListener {
    gifView.isGone = false
    val gifUrl = Uri.parse("file:///android_asset/"+"blackcat.gif")
    Glide.with(this).asGif().load(gifUrl).into(gifView)
}

- 잘만드셨다면 아래처럼 보이실 겁니다.

마찬가지로 잘 움직이시는게 보이나요?

- Lottie 쪽에 비해 Gif 내용이 간단해 보일수있지만 아직연습단계라 저도 더 알게 되면 업데이트 하겠습니다. 

 

* 전체 코드 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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/animation_lottie"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#229966"
        app:lottie_autoPlay="true"
        app:lottie_fileName="blackcat.json"
        app:lottie_loop="false" />


    <ImageView
        android:id="@+id/animation_gif"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#995599"
        app:srcCompat="@drawable/ic_launcher_foreground" />

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <Button
            android:id="@+id/button_lottie"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Lottie" />

        <Button
            android:id="@+id/button_gif"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Gif" />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.kt

package com.example.testkotlinmovingimage

import android.animation.Animator.AnimatorListener
import android.animation.ValueAnimator
import android.net.Uri
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.ImageView
import androidx.core.view.isGone
import com.airbnb.lottie.Lottie
import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieDrawable
import com.bumptech.glide.Glide
import com.bumptech.glide.load.resource.gif.GifDrawable
import com.bumptech.glide.request.RequestListener

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val lottieView = findViewById<LottieAnimationView>(R.id.animation_lottie)

//        lottieView.playAnimation()
        val gifView = findViewById<ImageView>(R.id.animation_gif)

        lottieView.isGone = false
        gifView.isGone = true

        val btnLottie = findViewById<Button>(R.id.button_lottie).setOnClickListener {
            lottieView.isGone = false
            gifView.isGone = true
            lottieView.repeatCount = 1//LottieDrawable.INFINITE// 0 // 몇번 더 할지를 결정
            lottieView.speed = 0.5f // 속도를 지정할 수 있어요.
//            lottieView.setMinProgress(0.4f) // 0~1 사이 시작지점을 정할 수 있어요
//            lottieView.setMaxProgress(0.5f) // 0~1 사이 종료지점을 정할 수 있어요.

            lottieView.playAnimation()
        }



        val btnGif = findViewById<Button>(R.id.button_gif).setOnClickListener {
            lottieView.isGone = true
            gifView.isGone = false

            val gifUrl = Uri.parse("file:///android_asset/"+"blackcat.gif")
            Glide.with(this).asGif().load(gifUrl).into(gifView)


        }


    }

}

gif의 경우에는 좀 더 알게되면 내용을 추가하는 방향으로 하겠습니다. 

(저도 아직 공부중이라 잘 모르는 내용이 많아요.)

 

이 글이 누군가에게 도움이 되길 바라며

오늘도 파이팅입니다~