[SwiftUI] Lottie 로티 애니메이션 뷰 만들기

 Lottie Animation 

 

▼ 모바일 개발시 많이 사용되는 Lottie 애니메이션을 SwiftUI에서 구현하는 방법을 알아보겠습니다. 우선 새로운 패키지를 추가하기 위해서  로티를 사용하기 위해서 다음 주소를 복사합니다. (Swift Package를 사용하지 않고 CocoaPods을 사용해도 됩니다.)

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

 

 

 

▼ Xcode의 File -> Add Packages... 메뉴를 통해 새로운 패키지를 추가합니다.

Add Package

---

 

 

 

▼ 우측 상단에 검색창에 복사한 주소를 넣고 엔터를 치면 lottie-ios 패키지를 찾을 수 있습니다. 우측 하단에 Add Package 버튼을 눌러 패키지를 추가합니다.

lottie-ios

---

 

 

 

▼ 로티 애니메이션 이미지를 다운로드 받습니다. 해당 서비스는 로그인이 필요하며 다양한 애니매이션을 json 형태로 다운로드 할 수 있습니다.

https://accounts.lottiefiles.com/login?return_to=https://lottiefiles.com/getting-started 

https://accounts.lottiefiles.com/login?return_to=https%3A%2F%2Flottiefiles.com%2Fgetting-started

 

 

 

▼ 다음과 같은 UIViewRepresentable 을 상속 받은 LottieView.swift 를 생성합니다. 속성으로 filename을 가지고 있습니다. 이는 LottieView를 사용하는 화면에서 지정해줍니다.

 

 

	import UIKit
	import SwiftUI
	import Lottie
	struct LottieView: UIViewRepresentable {
	typealias UIViewType = UIView
	var filename: String
	func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
	//3.
	let view = UIView(frame: .zero)
	let animationView = LottieAnimationView()
	animationView.animation = Animation.named(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>) {
	}
	}

view raw blog1.swift hosted with ❤ by GitHub

 

 

 

 

▼ 이제 LottieView를 화면에 붙여보겠습니다. 사이즈는 가로 200 세로 200으로 VStack에 텍스트와 함께 보입니다.

 

 

 

 

	struct Main: View {
	var body: some View {
	VStack {
	Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
	LottieView(filename: "loading")
	.frame(width: 200, height: 200, alignment: .center)
	}
	}
	}

view raw blog2.swift hosted with ❤ by GitHub

 

 

 

 

Lottie