✏️ Lottie로 로딩 애니메이션 넣어주기

오늘은 Lottie로 애니메이션을 추가하는 방법을 알아보겠습니다!
저는 앱을 개발하면서 Lottie라는 존재를 알게되었는데, 혹시 모르시는 분들이 계시다면 나중에 개발할 때 이용해보셔도 좋을 것 같아 소개하게 되었습니다 :)

Lottie ?

Lottie란 JSON 기반의 애니메이션 파일을 의미하며 다른 애니메이션 파일 형식보다도 작은 파일 크기를 가지고 크기 조정도 자유로우며 다양한 플랫폼을 지원한다는 등의 장점이 있습니다.
이러한 장점덕에 Lottie는 전 세계 28만개 이상의 기업에서 사용되고 있다고 합니다.
또한 수많은 디자이너분들이 업로드해둔 다양한 애니메이션을 무료(일부 유료)로 사용할 수 있다는 점이 가장 큰 장점인 것 같습니다.
아래 결과처럼요👍

 

그러니까 저처럼 로딩화면을 구성할 때 조금 색다른 애니메이션을 원하신다면 이번 글! 꼭 읽어보세요!

 

사전준비

Lottie를 앱에 띄워주기 위해서는 두 가지가 필요합니다.

1. 사용할 이미지 다운
2. Lottie 패키지 추가

 

이미지의 경우, Lottie로 들어가 필요한 이미지와 관련된 키워드를 통해 검색합니다.
그럼 앞선 이미지와 같은 결과가 나오는데, 그 중 마음에 드는 이미지를 하나 선택하여 다운로드해줍니다.
다운로드 이후에는 대쉬보드에서 확인할 수 있습니다.
대시보드는 상단의 버튼을 통해 이동할 수 있어요 :)

 

 

그리고 각 애니메이션의 더보기를 눌러 download as를 눌러주면 다양한 선택지가 나오는 것을 확인할 수 있습니다.
우리는 JSON을 사용할 예정이니까 Lottie JSON 파일을 받아주세요!
그 후에는 프로젝트에 추가해주시는 것도 잊지마세요❗️

 

 

자, 이제 사용할 이미지는 골랐으니까 적용하기 위한 준비로 들어갑시다!🔥

Lottie를 사용하기 위해서는 프로젝트에 Lottie를 추가해줘야 합니다.
패키지를 추가하는 방법은 매우 간단합니다.
우선 프로젝트의 네비게이터에서 우클릭을 통해 나온 리스트 중에 Add Package Depencdencies를 클릭해주세요.

 

 

그럼 다음과 같은 창이 나타나게 되고 우측 상단의 검색창에 Lottie를 입력해 나온 패키지를 Add Package를 통해 프로젝트에 추가해주면 됩니다.

 

 

구현하기

이제 사전준비도 다 끝냈고 앱에 Lottie를 구현해볼 차례입니다.
Lottie 애니메이션을 띄워주기 위해서는 애니메이션이 포함된 LottieAnimationView를 만들고 현재 뷰에 추가해주면 됩니다.
아래 코드처럼 작성해보세요☺️

import UIKit
import Lottie // Lottie를 사용하기 위해 import

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // lottieAnimationView 불러오기 
        let lottieView = lottieView()
    }

    // lottieAnimationView 구성
    func lottieView() -> LottieAnimationView {
           // 현재 저장되어있는 애니메이션 이름으로 Lottie 애니메이션 가져오기 
        let animation = LottieAnimation.named("lottie")
        // 애니메이션이 포함된 animationView 생성하기
        let animationView = LottieAnimationView(animation: animation)
        // animationView의 크기 조정(각자 필요한 사이즈로 변경해주세요!)
        animationView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
        // animationView의 위치 조정(현재 뷰의 가운데)
        animationView.center = self.view.center
        // animationView의 반복 횟수 지정(기본은 playOnce)
        // loop는 -> 한 방향으로 무한반복합니다
        // 일정 횟수동안 반복하고 싶다면 repeat, reapeatBackwards를 사용해보세요
        // autoReverse는 애니메이션을 -> <- 두 방향으로 반복합니다![]
        animationView.loopMode = .loop
        // 현재 뷰에 animationView 추가
        view.addSubview(animationView)
        // animationView 반환 
        return animationView
    }
}

 

이렇게 작성한 코드를 시뮬레이터로 돌리면 어떤 결과가 나올까요?
바로 아래 이미지와 같이 실행됩니다.

아니, 애니메이션이라면서요! 안 움직이는데요???🧐

아마 대부분의 분들이 이런 생각을 하지않았을까 조심스레 추측해봅니다.

우리는 이미지를 원하는게 아니라 애니메이션을 원하는거죠?

그럼 애니메이션은 어떤 식으로 재생되나요?

viewDidLoad()에서 아래 코드를 추가해보세요.

lottieView.play()

 

그럼 짠!
애니메이션이 움직이는 것을 확인할 수 있습니다.

 

 

그럼 또 애니메이션 재생을 멈추고 싶다면?

lottieView.stop()

 

말그대로 애니메이션을 중지해주면 됩니다!

마무리

오늘은 이렇게 기본적인 Lottie Animation 사용방법에 대해 알아봤습니다!
물론 LottieAnimationView에는 이외에도 AnimationSpeed, CurrentProgress 등 커스텀할 수 있는 다양한 속성들이 있습니다.
하지만 모든걸 처음부터 알 필요없는만큼 우선은 기본적인 것부터 필요할 때 또 야금야금 알아가는것도 괜찮지않을까요..?☺️