[마맛텔] Splash 화면 Lottie 적용기

 

참고

Lottie Document

Lottie Design

Lottie Resource

iOS Lottie github

 

 

안녕하세요. 자비스입니다.

Airbnb에서 만든 Lottie 라이브러리를 사용하여 splash페이지 애니메이션을 구현한 부분을 정리한 내용입니다.

 

Lottie란?

Lottie는 Bodymovin 이라는 플러그인으로 After Effects 파일에서 JSON 파일로 내보낸 애니메이션 데이터를 사용합니다.

iOS, Android, React Native, Windows 지원하며, 각 플랫폼의 다양한 애니메이션 구현방법 중 쉽고 간편하게 적용 시킬수 있습니다.

 

 

적용한 애니메이션 샘플

gif로 변환해서 실제 동작하는 애니메이션보다 다소 느리게 재생됩니다.

 

 

준비하기

리소스를 준비합니다. Lottie Resource 에서 무료로 다운로드 가능합니다.

 

무료 애니메이션도 있고, 유료로 구매도 가능합니다.

혹은 애프터이펙트로 직접 만들어서 사용도 가능합니다. 

Lottie JSON 파일을 다운로드 받습니다.

애니메이션이 준비가 되셨으면 프로젝트에 Lottie를 설치합니다.

 

pod 설치 

pod 'lottie-ios'

Swift Package Manage 설치

import PackageDescription

let package = Package(
  name: "YourTestProject",
  platforms: [
       .iOS(.v12),
  ],
  dependencies: [
    .package(url: "https://github.com/airbnb/lottie-ios.git", from: "3.1.2")
  ],
  targets: [
    .target(name: "YourTestProject", dependencies: ["Lottie"])
  ]
)

 

기본적인 애니메이션 실행은 간단합니다.

이외에 Lottie 를 사용하여 버튼에 토글처리, 기타 뷰 애니메이션으로 활용이 가능합니다. 사용 케이스 보러가기

통상적으로는 Splash 페이지에서 많이 사용되고 개발영역 보다는 애프터이펙트 영역이 비중을 많이 차지합니다.

 

 

 

 

Loop Modes

애니메이션 반복 모드를 설정 

public enum LottieLoopMode {
  /// Animation is played once then stops.
  case playOnce
  /// Animation will loop from beginning to end until stopped.
  case loop
  /// Animation will play forward, then backwards and loop until stopped.
  case autoReverse
  /// Animation will loop from beginning to end up to defined amount of times.
  case `repeat`(Float)
  /// Animation will play forward, then backwards a defined amount of times.
  case repeatBackwards(Float)
}

 

 

궁금한점이 있으면 언제든지 댓글이나 메일로 문의 바랍니다.