Swift) Lottie를 이용해 애니메이션을 그려보자

 

 

 

안녕하세요, 소들입니당 :)

참.. 오랜만에 글을 쓰네요....!????

여러분은 지금 한 달정도 자유를 즐기려다 그게 3달이 되어버린 사람을 보고 계십니다

그래도 마음 한 켠엔 늘 블로그를 품고 살았다 이말이야ㅑㅑ

 

네.. 뭐 .. 오랜만에 글쓰는 거라 어색해서 주절주절 해봤고요

이번 포스팅에선 Lottie 라는 라이브러리가 무엇이고,

어떻게 사용하는지, 어떤 기능들이 있는지에 대해 알아볼 거예요 :)

모든 포스팅은 편의 말투로 합니다~!!

 

Aㅏ 

만약 써본 사람들 있더라도 대부분이 모두 .play() 메서드만 썼을 거 같아서...

근데 사실 Lottie에는 생각보다 다양한 기능이 있단 말이죠!?

따라서 그 기능에 대해서도 알아볼 것임

 

 

 

 

1. Lottie 라이브러리는 무엇을 하는 녀석일까

 

먼저 라이브러리의 깃허브 주소는

 

 

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

 

 

위와 같은데, 깃허브에 써져있는 Lottie의 설명을 보자면

 

Lottie는 최소한의 코드로 벡터 기반 애니메이션과 Art를 실시간으로 렌더링하는 안드로이드와 iOS용 모바일 라이브러리로,

애니메이션을 JSON 형식으로 내보내기 때문에 크기는 매우 작지만 복잡성은 클 수 있습니다.

Lottie는 애니메이션을 재생, 크기 조정, 루프 적용, 속도 향상, 속도 감소, 역회전 및 대화형 스크러빙 하는 것이 가능하고,

 애니메이션의 일부만 재생하거나, 반복할 수 있습니다

또한 Lottie는 UIView 컨트롤러 전환을 지원합니다. 

 

 

음..........? 정리 ㄱㄱ

Lottie는 JSON 형식의 파일을 이용하여 애니메이션을 렌더링 하는데,

이 Lottie는 iOS 뿐 아니라 Android, Web, Windows 등 서로 다른 플랫폼에서도 사용할 수 있어서,

이 JSON 형식의 파일만 있다면 서로 다른 플랫폼에서 동일한 애니메이션을 그려낼 수 있음!!!!

 

추가로 애니메이션을 재생하는 것 외에 루프, 속도, 역회전도 가능하다!!!!!!!!

 

그럼 여기서 말하는 애니메이션 뭘까 궁금할 수 있잖음

뭐냐면

 

 

저쪽 신사분께서 날린 메롱입니다

 

 

이렇게 위처럼 움직이는, 우리가 잘 아는 형식인 gif도 하나의 애니메이션임!!!

다만, 위는 gif라는 형식의 애니메이션이지만, Lottie는 JSON 형식을 이용해서 애니메이션을 나타냄

이처럼 애니메이션을 내 App에 넣어서 생동감🍃을 좀 주고싶다!! 하면 Lottie를 쓸 수 이따ㅏ

 

참고로,

Lottie는 PNG, GIF 형식과 비교했을 때 작고 고품질이며,

런타임에 조작할 수 있는 오픈소스 형식이라고 함

그 뒤로는 뭐 앱스토어 상위 500개 앱 자랑 어쩌고 저쩌고

 

따라서 정리해보면, Lottie라는 것은

 

애니메이션을 Android, iOS App에 넣고 싶을 때 사용하는 라이브러리다!

근데 이 Lottie를 사용하려면 애니메이션 파일 형식이 JSON 형식이어야 한다!

 

정도만 알면 됨

자, 그럼 Lottie를 어떻게 사용해야 하는지에 대해서 알아보겠움

 

 

 

 

2. Lottie를 import 하자

 

먼저, Swift에선 라이브러리를 관리하는 방법에 대해 3가지가 있다고 아마 전전? 포스팅에서 설명 했음

따라서 셋 중에 하나 이용해서 Lottie를 Swift 프로젝트에 import 해주셈

 

코코아팟

카르타고

Swift Package Manager

 

뭐 알아서 프젝에 맞춰서 해주시면 되지만,

갠적으로 토이프로젝트라면 SPM 추천하는 마음에서 SPM으로 추가하는 방법 투척

 

 

 

 

Swift Packages에서 + 버튼 눌러 주공

 

 

 

 

이러면 이제 Lottie를 import해서 쓸 수 이씀니다

 

 

   

import Lottie

 

 

쨔쟌

 

 

 

 

3. Lottie를 이용해 Animation 갖고 놀기

 

먼저, Lottie에서 사용하는 애니메이션의 확장 파일은 뭐다?? JSON이당

따라서 요기 페이지 가서 예시 파일 아무거나 다운받아봤셈

(실제 프로젝트면 디자이너에게 요구하셈)

 

 

 

 

 

나는 이렇게 귀여운 애니메이션을 담은 JSON 파일을 우리 앱에 넣어보겠음

Lottie를 사용하려면, 다시한번 말하지만 다음과 같이

 

 

 

 

애니메이션을 담은 JSON 파일이 먼저 준비되어 있어야 함

참고로 JSON?ㅋ 친숙한 녀석인데?ㅋ 하고 열어보면

 

 

 

 

더이상 친숙하지 않읍니다

이제 이 JSON 형식으로 된 귀여운 애니메이션을 우리 어플에 넣어보자 :)

 

위에서 Lottie는 우리 UIVIew로 변환된다고 했기 때문에,

다음과 같이 AnimationView라는 인스턴스를 생성해 실행할 JSON 파일 이름을 넣어주고,

 

   

import UIKit
import Lottie
 
class ViewController: UIViewController {
 
    override func viewDidLoad() {
        super.viewDidLoad()
        
        
        let animationView: AnimationView = .init(name: "icecream")
        self.view.addSubview(animationView)
        
        
        // animationView의 설정 작업은 알아서 하세요
        animationView.frame = self.view.bounds
        animationView.center = self.view.center
        animationView.contentMode = .scaleAspectFit
        
    }
}
 

 

 

이렇게 원하는 View에다가 이 AnimationView를 SubView로 붙여주기만 하면 사실 끝임!!!!

그럼 이제 어플을 실행하면 영상이 나올까!?!?!

 

 

 

 

응 민머리

사실 애니메이션을 보고 싶다면 직접 메서드로 실행을 시켜줘야함 XD

근데, 이제 Lottie의 여러가지 기능에 대해 봐보겠음!!!!

 

 

 

3-1. 재생하기

 

 

   

animationView.play()

 

 

play() 메서드를 이용하면 재생을 할 수 있음

 

 

 

 

근데, 이렇게 재생할 경우 딱 1번만 재생하고 애니메이션이 멈춤

(위 짤은 gif라 나중에 다시 반복이지만 사실상1번하고 멈춤)

따라서 loop를 이용해서 얼마큼 애니메이션을 실행할 것인지 제약을 줄 수 있음

 

 

 

3-2. 애니메이션 loop 설정하기

 

 

   

// 애니메이션을 1번만 실행함
animationView.loopMode = .playOnce
        
// 애니메이션을 3번만큼 실행하고 종료
animationView.loopMode = .repeat(3)
        
// 애니메이션을 무한으로 실행
animationView.loopMode = .loop
        
// 애니메이션을 실행한 뒤, 실행한 애니메이션을 거꾸로 다시 실행함 (3번만큼 실행)
animationView.loopMode = .repeatBackwards(1)
        
// 애니메이션을 실행한 뒤, 실행한 애니메이션을 거꾸로 다시 실행함 (무한 반복)
animationView.loopMode = .autoReverse

 

 

어렵지 않으니 일일이 실행결과를 보여주진 않겠지만,

실행한 애니메이션을 거꾸로 다시 실행한단 것은

 

 

 

 

이런 것을 말함 💩

 

 

 

3-3. 애니메이션 속도 조정하기

 

 

// 애니메이션 0.5배속 재생
animationView.animationSpeed = 0.5
    
// 애니메이션 2배속 재생
animationView.animationSpeed = 2

 

 

넘 쉬우니 패쓰

 

 

 

3-4. Frame을 이용해 Animation 실행하기

 

사실.. 위 내용은 너무너무 쉬웠다면...

이 내용은 조금?? 설명ㅇ ㅣ들어갈 것 같음..!!!

 

내가 나중에 영상 스트리밍에 대해 포스팅을 쓸 생각인데

(내 현업과 이전 회사 업무 모두가 영상 스트리밍과 관련이 있었기에!!)

여러분 우리가 화면으로 보는 영상(애니메이션)은 모두 어떻게 재생되는지 앎??

 

 

 

 

플립북을 생각하면 쉽게 이해할 수 있음!!!

실제론 모두 한장 한장의 그림이지만, 이 한장 한장의 그림을 빠르게 넘기면,

위처럼 하나의 애니메이션이 되는 것임!!!!

 

따라서 우리가 보는 모든 영상은 사실 저렇게 한장 한장의 그림(사진)으로 되어 있는것인데,

이를 이제 빠르게 넘기면서(재생하면서) 우리가 보기엔 영상처럼 보이게 되는 것임

 

이때, 이 각 한장 한장의 그림(사진)을 Frame이라고 표현 함!

물론 Frame의 종류엔 iFrame, PFrame 등등이 있는데, 이건 나중 포스팅에서 설명하기로 하고

 

만약 위에서 총 100장의 그림으로 애니메이션을 만들었다면, 이 영상의 Frame은 총 100개임! 

그리고 만약 1초당 Frame을 30개를 넘긴다면(재생한다면),

이땐 fps가 30이 되는 것임!!(1초당 30장의 프레임을 재생한겠따!!!)

 

아이 재밌는 영상의 세계~~~

는 여기까지만 알면 될 것 같고..

 

왜 Lottie를 하다가 뜬금없는 영상 공부? 할 수 있겠지만,

사실 Lottie는 내 애니메이션을 원하는 Frame 만큼만 재생할 수 있음 ㅎ_ㅎ

이제 Frame이 무엇인지 알았으니, 감이 오지 않음!!?!?

 

 

animationView.play(fromFrame: 10, toFrame: 30)

 

 

이렇게 play를 할 때 Frame의 숫자를 직접 지정 해주면
이말인 즉 10번째 Frame부터 30번째 Frame까지만 play를 하겠다! 라는 것이고,

 

 

 

 

이렇게 원하는 Frame 만큼만 animation이 재생되게끔 지정할 수도 있음 :)

 

엥 나는 내 Animation의 Frame 갯수를 모르겠는데염

하면 

 

 

animationView.animation?.endFrame      //102

 

 

endFrame이란 프로퍼티를 이용해서 알 수 있음!!

위 아이스크림 애니메이션은, 총 102장의 Frame으로 되어 있구나!

 

이를 이용해 다양한 애니메이션 실행이 가능하답니다 :D

 

 

 

3-5. Progress를 이용해 Animation 실행하기

 

위에선 Frame으로 Animation을 실행 했잖음!?!?

근데 Progress라는 것을 이용해서도 원하는 애니메이션을 실행할 수 있음

 

progress라는 것은 0.0 ~ 1.0 사이의 수치로 나타내는데,

0.0이 애니메이션 시작을 나타내고, 1.0이 애니메이션의 끝을 나타냄!

애니메션을 진행률을 0.0 ~ 1.0 사이의 숫자로 나타낸다고 생각하면 쉬울 거 같음!!

따라서

 

 

animationView.play(fromProgress: 0.4, toProgress: 0.6)

 

 

이렇게 Progress를 이용해서 실행 하면,

이말인 즉 애니메이션을 40~60% 만큼만 play를 하겠다! 라는 것이고,

 

 

 

 

이렇게 실행이 된담니다!!!!!!!!!!!

 

 

 

3-6. Animation을 Play가 아닌 원하는 Frame에서 멈춰 있게 해보자

 

애니메이션이라 함은 꼭 play 메서드를 사용해서 움직여야 한다고 생각할 수 있지만,

때에 따라서 애니메이션이 마치 사진처럼, 한 장의 프레임씩 사용해야 할 때도 있음!!

 

그때 사용할 수 있는 Lottie의 프로퍼티가

 

currentFrame

currentProgress

 

라는 것임 :)

위에서 Frame이 뭔지, Progress가 무엇인지 배웠져!?

따라서, 다음과 같이 currentFrame 프로퍼티를 지정하거나,

 

 

animationView.currentFrame = 20

 

 

혹은

 

 

animationView.currentProgress = 0.2

 

 

currentProgress 프로퍼티를 직접 지정 해주면,

애니메이션은 이렇게 해당 프레임에서 멈춰 있을 것임

 

 

 

 

이런 식으로 Lottie를 사용하면,

Frame을 내 마음대로 Play이 할 수도~ 혹은 그냥 사용할 수도 있다~!!

 

 

 

 

 

 

 

 

.

.

.

요즘 Lottie 작업을 하게 돼서 라이브러리를 살펴보는데..

와... 이런것도 된다고!?? 하면서 감동받은 것들이 많았어서..!

그래서 정리해봤슴니다 :-)

 

이제 그만 놀고 다시 공부에 매진하기 위해

나에게 힘내라고 전하며 20,000