Swift 實現(xiàn)啟動屏動畫

本文例子:Github: SplashAnimate

準備工作:

首先我們需要確定作為宣傳的圖片的寬高比,這個一般是與 UI 確定的。一般啟動屏展示會有上下兩部分,上面是宣傳圖片,下面是 App 的 Logo。

實現(xiàn)基本思路:

在 LaunchScreen 結(jié)束后,在 AppDelegate 中將 rootViewController 指向展示廣告用的 AdViewController,在AdViewController 中設(shè)置一段時間后自己銷毀,并提供回調(diào)方法在 AppDelegate 中將 rootViewController 指向 App 真正的首頁。

實現(xiàn)細節(jié):

新建一個 AdViewController 用于放置廣告宣傳等展示.注意有一個回調(diào)方法。

class AdViewController: UIViewController {
    // 用于 AdViewController 銷毀后的回調(diào)
    var completion: (() -> Void)?

    var adImage: UIImage?
    var adView: UIImageView?

    override func viewDidLoad() {
        // ....
    }
}

在 ViewDidLoad 方法中配置廣告圖,同時判斷 iPhoneX的特殊情況

override func viewDidLoad() {
    super.viewDidLoad()

    var adViewHeight = (1040 / 720) * screenWidth
    var imageName = "start_page"
    if UIDevice.isiPhoneX() {
        adViewHeight = (1920 / 1124) * screenWidth
        imageName = "start_page_x"
    }

    adView = UIImageView(frame: CGRect(x: 0, y: 0, width: screenWidth, height: adViewHeight))
    adView?.image = UIImage(named: imageName)
    adView?.contentMode = .scaleAspectFill
    self.view.addSubview(adView!)

    let bottomHolderView = UIView(frame: CGRect(x: 0, y: screenHeight-120, width: screenWidth, height: 120))
    self.view.addSubview(bottomHolderView)

    let logo = UIImageView(frame: CGRect(x: (screenWidth-120)/2, y: (120-50)/2, width: 120, height: 50))
    logo.image = UIImage(named: "start_logo")
    bottomHolderView.addSubview(logo)

    let time: TimeInterval = 1.0
    DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + time) {
        self.dismissAdView()
    }
}

上面代碼中有幾個注意的:

因為圖片要撐滿屏幕的寬度,所以寬度是固定的,根據(jù)圖片的高寬比,算出圖片實際應(yīng)有的高度,這樣圖片可以在各個尺寸的 iPhone 中才不會因為拉伸而變形。但是因為 iPhoneX 特殊的寬高比,所以還是要為它特定一張圖片,不然即使圖片在 iPhoneX 上不變形,圖片所占的高度會太小,或者頂部被劉海遮擋內(nèi)容而不美觀。

var adViewHeight = (1040 / 720) * screenWidth
var imageName = "start_page"
if UIDevice.isiPhoneX() {
    adViewHeight = (1920 / 1124) * screenWidth
    imageName = "start_page_x"
}

上面判斷是否為 iPhoneX 我是在 UIDevice 里擴展了一個方法:

extension UIDevice {
    public static func isiPhoneX() -> Bool {
        if UIScreen.main.bounds.height == 812 {
            return true
        }
        return false
    }
}

還有注意在執(zhí)行銷毀時調(diào)用回調(diào)方法

let time: TimeInterval = 1.0
DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + time) {
    self.dismissAdView()
}

在 AppDelegate 中 didFinishLaunchingWithOptions 方法中調(diào)用下面的 setUpWindowAndRootView() 來管理頁面展示

extension AppDelegate {
    func setUpWindowAndRootView() {
        window = UIWindow(frame: UIScreen.main.bounds)
        window!.backgroundColor = UIColor.white
        window!.makeKeyAndVisible()

        let adVC = AdViewController()
        adVC.completion = {
            let vc = ViewController()
            vc.adView = adVC.view
            self.window!.rootViewController = vc
        }
        window!.rootViewController = adVC
    }
}

注意在 AdViewController 銷毀的回調(diào)方法中,將 AdViewController 的 view 傳給真正的首頁,讓首頁來執(zhí)行動畫

adVC.completion = {
    let vc = ViewController()
    // 將 AdViewController 的 view 傳給真正的首頁,讓首頁來執(zhí)行動畫
    vc.adView = adVC.view
    self.window!.rootViewController = vc
}

在首頁 ViewController 里我們有如下方法來執(zhí)行 AdViewController 的銷毀動畫,這里配置的動畫是常見的擴大漸變消失

private var advertiseView: UIView?
var adView: UIView? {
    didSet {
        advertiseView = adView!
        advertiseView?.frame = self.view.bounds
        self.view.addSubview(advertiseView!)
        UIView.animate(withDuration: 1.5, animations: { [weak self] in
            self?.advertiseView?.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
            self?.advertiseView?.alpha = 0
        }) { [weak self] (isFinish) in
            self?.advertiseView?.removeFromSuperview()
            self?.advertiseView = nil
        }
    }
}

至此,一個簡單的啟動屏動畫就完成了。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,893評論 25 709
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,161評論 4 61
  • 關(guān)于ico,我想說的是:雖然相比較于股市及其他投資渠道來講,數(shù)字貨幣ICO的投資渠道仍然好太多,但要再象以前那樣只...
    開心大雄閱讀 434評論 0 2
  • 知道今天要考試,昨晚睡得依然不早,早上還是被各種夢驚醒,看時間才5點多,離鬧鐘還有半個多小時,睡吧,怕過頭,不睡,...
    君君之閱讀 221評論 0 0
  • 最近真是炎炎烈日,大門不敢出。 周末,索性繼續(xù)宅家練習彩鉛好了。 這次,畫的是位小姐姐。照著課程練的,只是彩鉛色號...
    三日之城閱讀 370評論 3 5

友情鏈接更多精彩內(nèi)容