Swift) Lottie 애니메이션 사용해보기

📘 Lottie

JSon 기반 애니메이션 파일을 앱, 웹, React Native 등

다양한 플랫폼에서 실시간으로 재생할 수 있게 해주는 라이브러리

디자인 도구인 Adobe After Effects에서 만든 애니메이션을

Bodymovin 플러그인을 통해 JSON으로 내보내고 이를 Lottie로 앱에 넣어 재생하게 됨

 

Lottie = After Effects 애니메이션을 앱에서 부드럽게 실행하는 도구

---

🔹 Lottie의 특징

항목	설명
애니메이션	벡터 기반 애니메이션 (JSON) 재생 가능
퍼포먼스	가볍고 빠름 (GIF보다 효율적)
플랫폼 지원	iOS, Android, Web, React Native, Flutter 등
디자이너 친화	디자이너 -> AE로 만든 애니메이션을 그대로 사용 가능
JSON 파일	Bodymovin으로 내보낸 .json 파일을 재생

 

---

🔹 사용 방법

✅ 1. JSON 파일 다운로드 or 생성

 - https://lottiefiles.com 사이트 접속 후 원하는 파일 검색 후 다운로드

---

✅ 2. XCode에 JSON 파일 추가

-XCode에 JSON 파일 드래그 드롭 또는 파일 추가를 통해 파일 추가

---

✅ 3. Lottie 라이브러리 설치 (SPM 사용)

- XCode > File > Add Package Dependencies...

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

위에 해당되는 패키지를 설치

 

- Terminal을 통해 Podfile 생성 후 추가

pod 'lottie-ios'

---

✅ 4. 코드 작성

UIKit의 경우

import Lottie
import UIKit

class ViewController: UIViewController {
	private var animationView: LottieAnimationView!
    
    override func viewDidLoad() {
    	super.viewDidLoad()
        
        animationView = LottieAnimationView(name: "news")
        animationView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
        animationView.center = view.center
        animationView.loopView = .loop
        animationView.play()
        
        view.addSubView(animationView)
    }
}

 

SwiftUI의 경우

import SwiftUI
import Lottie

struct LottieView: UIViewRepresentable {
	var name: String
    
    func makeUIView(context: Context) -> LottieAnimationView {
    	let view = LottieAnimationView(name: name)
        view.loopMode = .loop
        view.play()
        return view
    }
    ...
}

struct ContentView: View {
	var body: some View {
    	LottieView(name: "news")
        	.frame(width: 200, height: 200)
    }
}

---

🔍 LottieAnimationView

Airbnb의 Lottie 라이브러리에서 제공하는 핵심 클래스JSON 형식의 애니메이션을 앱에서 재생하고 조작하는 UI 뷰

let animationView = LottieAnimationView(name: "news") // "news.json"

 

➡️  주요 속성 및 메서드

속성 / 메서드	설명
play()	애니메이션 재생
stop()	애니메이션 정지
pause()	애니메이션 일시 정지
loopMode	반복 모드 설정 (.loop, .playOnce, .repeat(Float))
animationSpeed	애니메이션 속도 조절 (기본 : 1.0)

currentProgress	애니메이션 현재 진행도 (0.0 ~ 1.0)
currentFrame	현재 프레임 설정
paly(fromProgress:toProgress:)	특정 범위만 재생
backgroundBehavior	앱이 백그라운드/포그라운드 전환될 때 동작 설정
contentMode	UIView와 동일한 콘텐츠 크기 조절 방식
animation	현재 재생 중인 LottieAnimation 객체

---

 

🔹 실행 화면

---