로티가 뭐티 ( Lottie )

디자이너가 splash Image를 변경하고 싶다고 아주 두근거리는 gif를 가지고 오셔서 설렘 가득하게 앱에 반영하다가 고군분투한 이야기.. ❤️‍🔥

 

많은 분들이 사용하는 Lottie 에 대한 이야기..

Lottie는 에어비엔비에서 개발한 오픈소스 모바일 라이브러리로, JSON 기반 애니메이션 파일 형식실시간으로 애니메이션을 랜더링하고 벡터 기반의 애니메이션이기 때문에 깨지지 않는다는 특징이 있다. 벡터 기반인 적에 gif보다 용량이 작다.

무료 로티 애니메이션, 모션 그래픽을 위한 모든 플러그인과 도구를 한 곳에 - 로티파일즈/LottieFi

🌟 활용방법

나 같은 경우에는 우리 갓 디자이너가 애니메이션을 만들어줬지만, 디자이너가 없는 팀 같은 경우에는 lottie안에서도 무료 다운이 가능하다!

🌟 Lottie 라이브러리 import 

1️⃣ 공식문서 를 통해 각자 원하는 방법으로 import

나는 SPM을 사용해서 SPM으로 import를 했다. 

 

 👉🏻  Swift Package Manager(SPM) 소개 및 사용 방법

Swift Package Manager(SPM) 소개 및 사용 방법

2️⃣ 프로젝트에 반영하기

로티 홈페이지 안에 tutorial 영상들이 있어서 나는 여기서 참고해서 개발했다. 

SwiftUI라고 검색하니까 좋은 영상들이 많이 떴다.. 갓 에어비엔비,,,

👉🏻 참고용 SwiftUI 코드

import Lottie
import SwiftUI
import UIKit

struct LottieView: UIViewRepresentable {
    typealias UIViewType = UIView
    var filename: String
    
    func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
        let view = UIView(frame: .zero)
        let animationView = LottieAnimationView()
        animationView.animation = Animation.named(getGifName(name: filename))
        animationView.contentMode = .scaleAspectFit
        animationView.loopMode = .loop
        animationView.play()
        
        animationView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(animationView)
        
        NSLayoutConstraint.activate([
            animationView.widthAnchor.constraint(equalTo: view.widthAnchor),
            animationView.heightAnchor.constraint(equalTo: view.heightAnchor)
        ])
        
        
        return view
    }
    func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<LottieView>) {
        // do nothing
    }
    
}

 

🔧 문제 상황

ㅎ,,,, 공홈에 나와 있는데로 에펙에서 json 추출을 하려고 하는데 문제가 생겼다..

문제가 되었던 부분은 애팩 효과 중에 Simple Choker을 썼는데 이 기능 때문에 Json 추출이 안된다는 것이었다.

지인에게 물어보니 에펙에서 지원 안해주는 경우가 많아서 보통 작업 전에 이 효과를 써도 되는지 확인하고 사용한다고,,,,

 

하지만 우리 애니메이션... 포기 못해...

 

🌟 문제 해결

구글링을 하다가 못찾았는데,,, 갓 디자이너 분이 해결 방법을 찾아주셨다!!

베타 버전으로 GIF/ animated PNG/ PNG sequence (in zip)/ MP4 / WebM/ MOV을 Json으로 바꿔주더라구요?!

헤헤... 유용하게 쓰일 것 같다..