本文例子: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
}
}
}
至此,一個簡單的啟動屏動畫就完成了。