[iOS] Lottie

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

Lottie

• lottie는 vector 기반의 animation효과들을 최소한의 코드로 구현할 수 있게 해주는 , Android, iOS에서 쓰일 수 있는 모바일 라이브러리다.
• JSON 포맷으로 만들어진 animation 리소스파일을 load하고 rendering해준다.
  • 해당 파일들을 여러 사이트에서 직접 만들어 낼 수 있다.
  • 혹은 상단에 첨부한 곳과 같은 사이트에서 파일을 구할 수 있다.
• iOS의 경우, SDWebImage와 같은 라이브러리에서도 gif 파일을 재생시켜 애니메이션 효과를 낼 수도 있지만, 재생, 정지, 재생 구간, 반복 횟수 같은 자세한 컨트롤은 불가능하다.

 

Lottie 사용해보기

 우선 다음과 같이 코코아팟에 lottie-ios를 추가해준 뒤, pod install을 실행하여 라이브러리를 다운로드 한다.

 물론 Carthage나 Swift Package Manager로도 의존성을 추가할 수 있다.

 

 라이브러리를 사용하고자 하는 곳에 Lottie를 import한다.

 

그리고 animation효과를 낼 json 리소스파일을 구한다. (상단의 사이트에서 편하게 구할 수 있다.)

 json파일을 프로젝트 폴더에 넣어준다.

 

 

import UIKit
import Lottie

class ViewController: TSViewController {
    
    @IBOutlet weak var speedSlider: UISlider!
    @IBOutlet weak var animationView: AnimationView!
    override func viewDidLoad() {
        super.viewDidLoad()
        animationView.animation = .named("confetti")
        animationView.loopMode = .loop //계속 반복 재생
        animationView.isUserInteractionEnabled = false //animationView 하위의 버튼을 클릭하기 위해서 false로 세팅
    }
    
    @IBAction func play(_ sender: Any) {
        animationView.play()
    }
    @IBAction func stop(_ sender: Any) {
        animationView.stop()
    }
    @IBAction func pause(_ sender: Any) {
        animationView.pause()
    }
    
    @IBAction func speed(_ sender: Any) {
        animationView.animationSpeed = CGFloat(speedSlider.value)
    }
}

 AnimationView를 animation을 쓰고자 하는 화면에 추가하고 animation을 지정해주고 그 외에 설정을 해준다. (animation이름은 xib에서도 설정 가능하다.)

 stop을 누르면 재생 전 원상태로 돌아가고, pause는 누른 시점의 상태를 유지하고 있는다.

 재생 중에도 속도 조절이 가능하다. (단, 0으로 줄이면 아예 멈추는 것 같다.)