Library] Lottie 로 json 애니메이션 넣기

Lottie 는 json 애니메이션 파일을 여러 플랫폼으로(iOS, Android, Web etc) 제공해 준다.

LottieFiles 에서 무료 json 파일을 검색해서 사용할 수 있다.

 

 

https://github.com/airbnb/lottie

airbnb/lottie

 

https://lottiefiles.com/

LottieFiles - Free animation files built for Lottie

 

 

import UIKit
import Lottie

class ViewController: UIViewController {
    
    let animationView = AnimationView()

    lazy var likeButton: UIButton = {
        let btn = UIButton()
        btn.setTitle("좋아요", for: .normal)
        btn.backgroundColor = .gray
        btn.addTarget(self, action: #selector(touchedLikeButton), for: .touchUpInside)
        btn.translatesAutoresizingMaskIntoConstraints = false

        return btn
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupView()
    }
    
    private func setupView(){
        view.addSubview(likeButton)
        likeButton.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
        likeButton.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
    }
    
    @objc func touchedLikeButton(){
        setupAnimation()
        animationView.play { finished in
            self.animationView.removeFromSuperview()
        }
    }
    
    private func setupAnimation(){
        animationView.animation = Animation.named("1835-like")
        animationView.frame =  CGRect(x: view.bounds.origin.x, y: view.bounds.origin.y, width: view.bounds.width/2, height: view.bounds.height/2) //view.bounds
        animationView.center = CGPoint(x: likeButton.center.x, y: likeButton.frame.origin.y - likeButton.frame.height)
        animationView.backgroundColor = .clear
        animationView.contentMode = .scaleAspectFit
        animationView.loopMode = .playOnce
        view.addSubview(animationView)
    }
}

 

Lottie 애니메이션 예제