[iOS] Launch Screen Animation(런치스크린 애니메이션)

오늘은 런치스크린에 간단한 애니메이션을 넣어보도록 하겠다.

 

 

런치스크린의 공식 문서를 보면 다양한 제약들이 적혀있는데, 간단히 말해서 런치스크린에서는 애니메이션을 만들 수 없다는 얘기이다.

 

 

그래서 런치스크린으로 애니메이션 또는 동영상의 첫 화면을 띄운 뒤, 다른 뷰에서 영상을 보여주는 방법으로 구현해보겠다.

 

 

애니메이션을 이용하기위해 Lottie를 이용할 것이다.

-> airbnb에서 제공하는 애니메이션 라이브러리

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

 

 

우선, 코코아팟이나 SPM을 이용하여 Lottie를 인스톨해야하는데 나는 SPM을 이용하였다.

Package Depencies에서 +버튼을 누른 뒤, Lottie 깃허브에 있는 Package URL을 입력하고 Add Package를 눌러 인스톨해준다.

 

 

정상적으로 인스톨이 됐다면 Lottie를 임포트할 수 있을 것이다.

 

 

이제 아래의 링크에서 원하는 무료 애니메이션을 받아준다. 나는 "Happy pencil"이라는 애니메이션으로 정했다.

https://lottiefiles.com/featured

 

 

오른쪽 위에 Download버튼을 눌러 Lottie JSON을 눌러 다운받는다.

 

 

다운받은 파일을 그대로 드래그해서 프로젝트에 넣어주면 아래와 같은 창이 뜨는데, 나는 Create groups를 선택했다.

folder referencees를 선택해봤었는데 차이를 모르겠어서 그냥 groups로 넣는다.

 

파일을 넣어주게되면 가장 아래에 보일 것이다.

 

자 이제 준비가 끝났으니 본격적으로 화면을 구성해보자.(별거없었음)

 

 

일단, 애니메이션이 제대로 나오는지부터 확인하기 위해 인스턴스를 생성하고 viewDidLoad에서 subView로 추가해주었다.

주석에도 적혀있지만 AnimationView(name: )의 name에는 아까 받아준 파일의 이름을 적어줘야한다.

import UIKit
import Lottie

class ViewController: UIViewController {

    let animationView: AnimationView = {
    
    	// 아래의 name에 다운받은 애니메이션의 파일 이름을 적어야함.
        let aniView = AnimationView(name: "111592-happy-pencil")

        return aniView
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(animationView)
        
        animationView.center = view.center

    }
}

사이즈를 잡아주지 않고 center만 맞춰주어 이상하지만, 애니메이션이 제대로 동작하는 것은 확인할 수 있다.

 

 

 

위치와 사이즈를 정해주자.

아래의 코드는 frame의 x좌표와 y좌표에 100을 주고(왼쪽 위가 원점), 가로와 세로의 크기가 모두 100이라는 의미이다.

즉, x 100 y 100의 좌표에서부터 100 * 100짜리 애니메이션 뷰를 그리는 것이다.

 

근데 animationView.center = view.center 코드의 우선순위가 더 높은지 아래의 코드에서 x, y의 값이 영향이 없었음.

그래서 100 * 100의 애니메이션뷰를 view의 center에 그렸다고 생각하면됨.

let animationView: AnimationView = {
    let aniView = AnimationView(name: "111592-happy-pencil")
    aniView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)

    return aniView
}()

 

 

위의 영상들을 자세히 보면 어플이 실행되면 민트 색의 런치스크린이 보인 후 애니메이션으로 넘어가는 것을 볼 수 있다.

 

 

이제 민트 색이었던 런치스크린을 위에 적용한 애니메이션의 첫 화면(이미지)으로 설정해보겠다.

 

 

이미지 asset이 있으면 좋겠지만 구할 수가 없어 캡쳐해서 사용했다. 그래서 위치와 크기를 맞추기 위해 constraint 값을 계속 바꿔주는 작업을 자연스러워질때까지 반복하였다..

 

 

런치스크린을 설정 후 다시 실행해보면, 이전의 민트색은 보이지 않고 바로 애니메이션이 실행되는 것처럼 보인다.

 

 

이제 애니메이션이 끝난 뒤, 뷰를 없애고 이미지뷰를 띄워줌으로써 더욱 런치스크린이 애니메이션인 것처럼 보여지게 만들어보자.

import UIKit
import Lottie

class ViewController: UIViewController {

    let myImg: UIImageView = {
        
        let imgView = UIImageView()
        imgView.image = UIImage(systemName: "pencil")
        
        return imgView
    }()
    
    let animationView: AnimationView = {
        let aniView = AnimationView(name: "111592-happy-pencil")
        aniView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)

        return aniView
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(animationView)
        animationView.center = view.center
        
        animationView.play { _ in
            self.view.addSubview(self.myImg)
            self.animationView.removeFromSuperview()
            self.myImg.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
            self.myImg.center = self.view.center
        }
    }
}

 

마지막에 급하게 영상을 끝낸 감이 있지만 애니메이션이 끝나고 연필모양이 나오는 것을 볼 수 있다.

 

 

연필 이미지대신 메인화면을 띄워준다면 자연스럽게 애니메이션이 런치스크린처럼 보일 것이다.