[swift] 앱 런치 이미지에서 앱 아이콘으로 전환되는 애니메이션 구현하기

01 Dec 2023

swift

iOS 앱을 실행할 때, 앱 런치 이미지가 표시되고 앱이 로드될 때까지 기다리는 동안, 사용자에게 앱이 시작되는 느낌을 주기 위해 런치 이미지가 표시됩니다. 이 런치 이미지에서 앱 아이콘으로 전환하는 애니메이션을 구현해보겠습니다.

Step 1: Launch Screen 스토리보드 작성하기

먼저, 런치 이미지의 전환 애니메이션을 구현하기 위해 Launch Screen 스토리보드를 작성해야 합니다. 다음은 스토리보드 작성을 위한 단계입니다.

Xcode에서 새로운 파일을 만듭니다.
iOS 템플릿을 선택하고 “Launch Screen”을 선택합니다.
LaunchScreen.storyboard 파일이 생성되면 스토리보드 편집기가 열립니다.
필요한 경우 이미지 및 UI 요소를 추가하고 배치합니다.
애니메이션 효과를 위해 시작지점과 종료지점의 이미지를 준비합니다.

Step 2: 애니메이션 구현하기

앱의 AppDelegate.swift 파일에서 애니메이션을 구현할 수 있습니다. 다음은 애니메이션 구현을 위한 함수입니다.

func animateAppIconTransition() {
    guard let window = UIApplication.shared.windows.first else { return }
    
    let iconImage = UIImage(named: "app_icon")!.withRenderingMode(.alwaysOriginal)
    let iconView = UIImageView(image: iconImage)
    iconView.contentMode = .scaleAspectFit
    iconView.frame = CGRect(x: 0, y: 0, width: 100, height: 100) // 아이콘의 초기 위치
    
    window.addSubview(iconView)
    
    UIView.animate(withDuration: 0.5, delay: 0.3, options: .curveEaseInOut, animations: {
        iconView.frame = CGRect(x: window.frame.size.width / 2 - 50, y: window.frame.size.height / 2 - 50, width: 100, height: 100) // 아이콘의 최종 위치
    }) { _ in
        iconView.removeFromSuperview()
    }
}

위 코드에서 animateAppIconTransition() 함수는 앱 아이콘으로의 전환 애니메이션을 구현합니다. 애니메이션은 다음과 같은 단계로 구성됩니다.

앱의 첫 번째 윈도우를 가져옵니다.
아이콘 이미지를 생성하고 이미지 뷰를 생성하여 윈도우에 추가합니다.
UIView.animate 메소드를 사용하여 아이콘의 초기 위치에서 최종 위치까지 이동하는 애니메이션을 생성합니다.
애니메이션이 완료된 후, 아이콘 이미지 뷰를 제거합니다.

Step 3: 앱 실행 시 애니메이션 호출하기

앱이 실행될 때 런치 이미지에서 앱 아이콘으로의 전환 애니메이션을 호출하려면, AppDelegate.swift 파일의 application(_:didFinishLaunchingWithOptions:) 메소드 내에 animateAppIconTransition() 함수를 호출합니다.

다음은 앱 실행 시 애니메이션을 호출하는 예입니다.

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // 앱 실행 로직
    
    animateAppIconTransition()
    
    return true
}

마무리

위의 단계를 따라 앱 런치 이미지에서 앱 아이콘으로 전환되는 애니메이션을 구현할 수 있습니다. 이를 통해 사용자에게 앱이 시작되는 시각적 효과를 제공하여 앱의 사용자 경험을 향상시킬 수 있습니다.

참고 자료: