Lottie

안녕하세요. 그린입니다🟢

이번 포스팅에서는 Lottie라는 라이브러리를 알아보려합니다🧐

 

애니메이션은 항상 어려운데... 정말 어려운데🙃
기본적으로 애플에서 제공해주는 API들로만 하기에는 제 머리가 안따라가고 감각도 없고😭
그럴때 많이 사용하는게 Lottie라는 라이브러리더라구요!
그래서 오늘 한번 요 Lottie를 간단히 해보려합니다ㅎㅎ

Lottie?

Lottie는 airbnb에서 만든것 같아요!

우선 해당 라이브러리의 리드미 설명을 보겠습니다.

기본적으로 벡터 기반 애니메이션과 아트를 최소한의 코드로 실시간 렌더링해주는 iOS/Android에서 모두 지원 가능한 모바일용 라이브러리입니다.

Bodymovin JSON 형식으로 내보내진 애니메이션과 벡터를 로드해 렌더링해준다고 해요🤔

Bodymovin JSON은 bodymovin을 사용하는 After Effects와 Lottie Sketch Export를 사용하는 Sketch, Haiku에서 생성하고 내보낼 수 있답니다.

즉, 제가 원하던 대목이 나오는데 개발자가 힘들게 애니메이션을 고민하면서 구현해주지 않아도 예쁜 애니메이션을 만들어줄 수 있습니다👍

여기서 애니메이션은 JSON 형식으로 지원됨으로 사이즈는 작지만 내부는 복잡할 수 있습니다.

애니메이션의 반복 재생, 사이즈 조정, 속도 조정 등 다양한것을 해줄 수 있습니다. (일부 재생만 할 수도 있고 아주아주 커스텀하게 해줄 수 있습니다!)

런타임 시에 다양한 방식의 애니메이션으로 변경될 수도 있습니다.

 

후... 이렇게 간단명료한? 소개를 봤으니 한번 구현해보죠!
라이브러리니까 쓰기 생각보다 쉽지 않을까 하는 바램으로🙌

 

Lottie 설치하기

코코아팟, 카르타고, SPM 모두 지원하니 원하는걸로 해주시면 되겠습니다.

저는 SPM으로 해볼께요! (간단하니까ㅎ..)

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

해당 로티의 깃 주소로 Package Dependency에 추가해주면 됩니다!

요친구입니다.

Add Package 해주면 설치작업 끝!

 

이제 사용해볼까요?
저는 SwiftUI에서 UIViewRepresentable 프로토콜을 이용해 UIView 방식으로 가져와 구현하고 이를 올려줘서 확인해보겠습니다!

 

Lottie 사용하기

1. LottieView 구현

import SwiftUI
import Lottie

struct LottieView: UIViewRepresentable {
  private let animation: String
  
  init(
    animation: String
  ) {
    self.animation = animation
  }
  
  func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
    let view = UIView(frame: .zero)
    let animationView = AnimationView()
    
    animationView.animation = Animation.named(animation)
    animationView.frame = view.bounds
    
    animationView.contentMode = .scaleAspectFit
    animationView.loopMode = .loop
    animationView.animationSpeed = 0.5
    view.addSubview(animationView)
    
    animationView.play()
    
    NSLayoutConstraint.activate([
      animationView.widthAnchor.constraint(equalTo: view.widthAnchor),
      animationView.heightAnchor.constraint(equalTo: view.heightAnchor)
    ])
    animationView.translatesAutoresizingMaskIntoConstraints = false
    
    return view
  }
  
  func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<LottieView>) {
  }
}

로티에서 구현된 AnimationView 객체를 활용해 인스턴스를 만듭니다.

여기에서 애니메이션의 설정들을 집어넣어줍니다.

먼저 애니메이션뷰를 올릴 뷰를 만들어주고 어떤 애니메이션이 들어올지 String으로 받아 애니메이션의 이름을 지정해줍니다.

이는 나중에 LottieView를 호출 시 원하는 애니메이션 String값만 보내 쉽게 설정될 수 있도록 함입니다.

 

contentMode는 해당 애니메이션뷰의 스케일을 지정해줍니다.

loopMode는 한번 실행, 반복, 거꾸로 등 런루프 모드를 설정해줄 수 있습니다.

animationSpeed는 애니메이션 재생속도를 의미합니다.

 

요렇게 설정을 끝낸 후 view에다 subView로 올려줍니다.

play메서드를 통해 실행합니다.

 

그다음 view의 앵커와 맞게 오토레이아웃 제약조건을 줍니다.

translatesAutoresizingMaskIntoConstraints로 높/넓이를 자동 설정해줍니다.

 

2. 원하는 애니메이션 JSON 파일 가져오기

https://lottiefiles.com

Free Lottie Animation Files, Tools & Plugins - LottieFiles

해당 사이트로 가서 Free로 된 애니메이션을 가져올꺼에요.

요기서 Free Animations로 갑니다.

원하는 애니메이션을 선택합니다.

여기서 Download를 눌러 Lottie JSON을 눌러 JSON 파일을 다운받습니다.

 

3. 해당 JSON 파일을 프로젝트에 넣습니다.

 

4. LottieView를 호출해 사용하기

이제 사용하고자 하는 뷰에서 LottieView를 호출해 사용할 수 있습니다.

import SwiftUI

struct ContentView: View {
  var body: some View {
    LottieView(animation: "book")
      .frame(width: 500, height: 500)
  }
}

여기서 LottieView를 호출해줄때 해당 애니메이션의 JSON 파일명을 String을 전달해줍니다.

이러면 항상 어디서든 LottieView를 커스텀하게 자유자재로 쓸 수 있습니다🙌

 

5. 구동 영상

 

마무리

와우.. 애니메이션 해보고 싶어지네요 정말!

로티 너무 좋다 ㅠ

다만 JSON 파일이여서 사이즈가 좀 커서... 처음에 플젝 열때 시간이 걸리네요🥲

빡세게 쓸 수 있는지는 해봐야겠습니다!

위 구현한 내용은 아래 제 깃헙 레포에 올려놨습니다🙌

https://github.com/GREENOVER/playground/tree/main/lottie

GitHub - GREENOVER/playground: 학습을 하며 간단한 예제들을 만들어 보는 작고 소중한 놀이터

 

[참고자료]

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

GitHub - airbnb/lottie-ios: An iOS library to natively render After Effects vector animations

https://lottiefiles.com/?gclid=CjwKCAjwo8-SBhAlEiwAopc9W1AJ2SwIKXrmq1ak4e_4qTDrrs4aflyQF23ohdGhTnCYuyGT6P6UqBoCxXIQAvD_BwE 

Free Lottie Animation Files, Tools & Plugins - LottieFiles