iOS/Xcode 14X - 3. Lottie Animation 추가

 

 

Lottie 란?

IOS/Android에서 모두 지원 가능한 모바일용 라이브러로서 앱에 쉽게 통합할 수 있는 애니메이션 제작을 위한 인기있는 오픈소스 도구입니다.

Lottie를 사용하면 무거운 동영상이나 이미지 파일에 의존하지 않고도 앱에 고품질 애니메이션을 추가할 수 있습니다. 이렇게 하면 애니메이션이 더 가볍고 효율적일 뿐만 아니라 앱 내에서 직접 편집하고 사용자 지정할 수 있습니다.

 

lottie-ios 라이브러리 추가

https://dchkang83.tistory.com/104 를 참조하여 코코아팟으로 설치한다.

IOS/Xcode 14X - 2. CocoaPods 추가

 

json 파일 가져오기

https://lottiefiles.com/ -> 원하는 애니메니션 선택 -> Download

 

json 파일 추가

드래그 앤 드롭

 

 

간단 테스트

import Lottie

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        
        let animation = LottieAnimation.named("131859-karlitron")
        let animationView = LottieAnimationView(animation: animation)
        animationView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
        animationView.center = view.center
        view.addSubview(animationView)
        
        animationView.play()
    }
}

 

참조 URL에서 임시 소스 퍼오기!

import Lottie

class ViewController: UIViewController {
    let titlelabel : UILabel = {
        let label = UILabel()
        label.textColor = .black
        label.textAlignment = .center
        label.text = "메인화면"
        label.font = UIFont.boldSystemFont(ofSize: 70)
        return label
    }()
    
    let animationView : LottieAnimationView = {
        let animView = LottieAnimationView(name:"131859-karlitron")
        // 사각형을 만들기
        animView.frame = CGRect(x:0, y:0, width: 400, height: 400)
        
        // contentMode -> 이미지를 확대할건가 축소를 한건가?
        animView.contentMode = .scaleAspectFill
        return animView
    }()
    
    // 뷰가 생성이되었을 때를 뜻한다!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        view.backgroundColor = .black
        view.addSubview(animationView)
        animationView.center = view.center
        
        // 애니메이션 실행--> closure를 이용하기에 self를 다 붙혀줘야된다
        animationView.play{(finish) in
            
            print("애니메이션이 끝났다")
            self.view.backgroundColor = .white
            
            // 애니메이션이 끝나면 superview에서 animainview를 제거한다.
            self.animationView.removeFromSuperview()
            
            self.view.addSubview(self.titlelabel)
            self.titlelabel.translatesAutoresizingMaskIntoConstraints = false
            self.titlelabel.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
            self.titlelabel.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
        }
        
    }
}

 

 

 

참조

https://lottiefiles.com/

LottieFiles: Download Free lightweight animations for website & apps.

 

https://blog.devgenius.io/boost-your-apps-user-experience-with-lottie-animations-and-swift-1f2b9572a74

Boost Your App’s User Experience with Lottie Animations and Swift

https://green1229.tistory.com/235

Lottie

https://lottiefiles.com/kr/blog/tutorials/kr-how-to-edit-lottie-animations-with-lottie-editor

Lottie 애니메이션을 편집하는 방법이 궁금하다면? - LottieFiles

https://green1229.tistory.com/235

Lottie

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

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

https://velog.io/@longlivedrgn/iOS-App-%EB%A7%8C%EB%93%A4%EA%B8%B0-1

iOS App 만들기 #1 🐥