iOS/Swift: Animate your Launch screen

982

Lời mở đầu

Chào mọi người, thông thường mành hình Launch screen là nơi để hiển thị logo của ứng dụng khi mà nó được khởi động, và mọi người thường để nó là một ảnh tĩnh để đảm bảo ứng dụng khởi động nhanh nhất có thể. Nhưng gần đây, mình có nhận được một yêu cầu của khách hàng về việc làm cho màn hình này trở nên sinh động hơn. Mình thấy nó cũng khá hay nên mình muốn chia sẻ với mọi người.

Chia sẻ cách tạo Launch screen một cách sinh động

Cách làm của chúng ta sẽ là tạo một LaunchScreen mới thay thế cho cái cũ. Trên màn hình LaunchScreen mới chúng ta sẽ thêm vào một số đối tượng và chúng ta sẽ làm cho nó chuyển động để tạo hiệu ứng. Ở phần hướng dẫn này mình sẽ dùng 2 UIImageView và 1 UILabel.
Cụ thể mục đích của chúng ta sẽ làm chuyển động như hình này:

Mình sẽ phải tách logo GST ra làm 2 phần và cho nó chuyển động từ 2 bên vào chính giữa và ghép thành một logo hoàn chỉnh.

Đây là assets mình dùng trong project này:

Bắt đầu

Bước 1: Mở XCode và tạo mới Project (Single View App)

Bước 2: Chúng ta cần file LaunchScreen.storyboard và tạo mới file LaunchScreen bằng cách:
New File -> View -> đặt tên là LaunchScreen.xib.

Bước 3: Mở tab General của Target Chọn lại Launch Screen File là LaunchScreen như hình dưới:

Bước 4: Chỉnh sửa lại file LaunchSceen.xib để chuẩn bị cho việc sử dụng animtion

Mở file LaunchScreen.xib chúng ta kéo vào 2 UIImageView và set image và tag cho từng lần lượt cho các view theo thứ tự từ trên xuống là 1, 2, 3 sao cho nó như hình dưới:

Tiếp đến để đảm bảo nó chạy đúng với các kích thước màn hình khác nhau chúng ta cần set constraint cho các item trên màn hình.

Ta cho imgeview với tag = 1 ẩn khỏi màn hình để sau chúng ta sẽ animate nó ra giữa màn hình vậy ta sẽ set constraint như hình dưới đây.

Tương tự ta cũng set constraint imageview còn lại như hình dưới:

Vậy là chúng ta đã chuẩn bị xong UI, giờ chúng ta cần đi vào code để thưc hiện animation.

Bước 5. Tạo file LaunchScreenManager.swift để thực hiện animation bằng cách:
Chọn new file -> Swift file -> đặt tên là LaunchScreenManager.swift

Thêm code vào như dưới đây:

import Foundation
import UIKit

class LaunchScreenManager {
    // dòng này dùng để tạo singleton: Nó đảm bảo sẽ chỉ tạo ra 1 instance duy nhất.
    static let instance = LaunchScreenManager()

    var view: UIView?// Đây sẽ là LaunchScreen của chúng ta
    var parentView: UIView?

    init() {}

    func loadView() -> UIView {
        let launchScreen = UINib(nibName: "LaunchScreen", bundle: nil).instantiate(withOwner: nil, options: nil)[0] as! UIView
        return launchScreen
    }

    // Phương thức này thực hiện việc thêm view(launch screen) vào màn hình
    // Và set lại frame và vị trí cho LaunchScreen view
    func fillParentViewWithView() {
        guard let view = view, let parentView = parentView else { return }
        parentView.addSubview(view)
        view.frame = parentView.bounds
        view.center = parentView.center
    }
    
    // MARK: - Animation

    // Phương thức này để setup launch screen view và gọi hàm thực hiện animation
    func animateAfterLaunch(_ parentViewPassedIn: UIView) {
        parentView = parentViewPassedIn
        view = loadView()
        fillParentViewWithView()
        // start animation
        startAnimation()
    }

    func startAnimation() {

        // Lúc này chúng ta cần lấy các view đã add vào file LaunchScreen.xib để thực hiện animation
        // Để tránh sai sót trong việc đánh tag cho các view -> crash app
        //Chúng ta cần kiểm tra các item này có bị nil hay không
        guard let logo1 = view?.viewWithTag(1),
            let logo2 = view?.viewWithTag(2),
            let label = view?.viewWithTag(3) else { return }

        let screen = UIScreen.main.bounds.size

        UIView.animateKeyframes(withDuration: 2, delay: 0, options: [], animations: {
            //0
            UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.1) {
                logo1.transform = CGAffineTransform.identity.translatedBy(x: screen.width / 2 + logo1.frame.size.width / 2, y: 0)
                logo2.transform = CGAffineTransform.identity.translatedBy(x: -(screen.width / 2 + logo2.frame.size.width / 2), y: 0)
            }
            UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.1) {
                label.center.x = screen.width / 2
            }
            UIView.addKeyframe(withRelativeStartTime: 0.75, relativeDuration: 0.25) {
                self.view?.alpha = 0
            }
        }) { (_) in
            self.view?.removeFromSuperview()
        }
    }
}

Bước cuối cùng:
Mở file SceneDelegate.swift thêm đoạn code thực thi animation để khi app được khởi động sẽ chạy animation 😀

Done, giờ chúng ta sẽ build app lên và tận hưởng 😀

Kết quả

Đối với việc tạo animation nếu mọi người quan tâm có thể tham khảo các bài viết của
Vũ Đức Cương nhé!
Part1
Part2
Part3

Tổng kết

Mình hi vọng bài viết của mình có thể giúp ích cho mọi người, để góp phần tạo ra các ứng dụng ngon hơn 😀

Dưới đây là code project demo: