[iOS/Swift] Lottie 를 사용해서 애니메이션을 만드는 법

2022년 7월 12일에 작성됨

Lottie 라이브러리 import

간단힌 Lottie 라이브러리에 대해 설명하자면 에어비앤비에서 제공하는데, 쉽게 애니메이션을 그려주는 라이브러리입니다.
공식문서 를 통해 각자 원하는 방법으로 import 해주세요. 개인적으로 SPM을 선호해서 저는 SPM으로 import 했습니다.

Lottie 파일 다운로드

따로 디자이너가 있는 회사이거나 팀 프로젝트이면 디자이너분한테 파일을 받으면 되지만 혼자하는 프로젝트이면 LottieFiles 요기서 원하는 파일을 찾아서 다운해주세요.

 

보시면 알겠지만 다양한 파일로 다운이 가능합니다. 저희가 필요한 파일은 제일 상단에 Lottie JSON 파일입니다. Lottie는 JSON 형식의 파일을 이용하여 애니메이션을 렌더링하기 때문이죠.

 

다운로드 받은 JSON 파일을 프로젝트에 넣어주시면 기본 준비는 끝났습니다 !

Lottie 실행하기

...
import Lottie

class LoadingViewController: UIViewController {
    private let animationView: AnimationView = {
       let lottieView = AnimationView(name: "lottieFile")
       lottieView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
       return lottieView
    }()

    ...
}

 

우선 Lottie를 import 시켜주시고 본인이 원하는 크기에 맞춰 View를 만들어주세요. name 뒤에 나오는 string 값은 방금 추가한 JSON 파일의 이름입니다!

override func viewDidLoad() {
    super.viewDidLoad()

    ...

    view.addSubview(animationView)

    animationView.loopMode = .loop

    // 1번 play 방법
    animationView.play {(finish) in
        ...
    }

    // 2번 play방법
    self.animationView.play()

    ...
}

 

애니메이션을 실행시키는데 제일 핵심적이고 간단한 코드입니다. 이렇게만 하고 실행해도 정상적으로 돌아가지만 메서드들을 조금 더 자세하게 하나씩 알아보겠습니다.

 

animationView.loopMode

애니메이션을 몇 번 반복할 것인지 설정하는 메서드입니다.

// 무한으로 실행
animationView.loopMode = .loop

// 1번만 실행
animationView.loopMode = .playOnce

// 2번 실행하고 종료
animationView.loopMode = .repeat(2)

// 애니메이션을 실행한 뒤, 실행한 애니메이션을 거꾸로 다시 실행
animationView.loopMode = .repeatBackwards(1)

// 애니메이션을 실행한 뒤, 실행한 애니메이션을 거꾸로 다시 실행 (무한 반복)
animationView.loopMode = .autoReverse

 

animationView.play()

애니메이션을 실행시켜주는 아주 중요한 친구입니다. 이 메서드가 없으면 애니메이션 자체가 실행이 안됩니다.

 

animationView.animationSpeed

애니메이션 속도를 조절할 수 있는 메서드입니다.

// 0.5배속 재생
animationView.animationSpeed = 0.5

// 2배속 재생
animationView.animationSpeed = 2

 

fromFrame, toFrame

애니메이션을 프레임별로 지정해서 실행할 수 있습니다.

// animationView.animation?.endFrame 를 통해 애니메이션 파일의 프레임 크기를 알 수 있습니다.

animationView.play(fromFrame: 40, toFrame: 90)

 

endFrame을 통해 프레임 크기를 알아내서 그 크기를 벗어나지 않아야합니다. 이 예시코드는 40번째 프레임에서 90번째 프레임까지 실행시키겠다. 라는 뜻이 됩니다.

 

Progress

0.0 ~ 1.0 의 수치를 가지는 Progress 를 가지고 애니메이션을 설정할 수 있습니다.

animationView.play(fromProgress: 0.2, toProgress: 0.8)

이 예시코드는 0.2 ~ 0.8, 즉 애니메이션의 20% ~ 80% 까지만 실행시키겠다. 라는 뜻이 됩니다.

결과화면