當(dāng)我第一次打開 twitter 的時(shí)候，就被它的啟動(dòng)動(dòng)畫驚艷到了。然而分析一下這個(gè)動(dòng)畫其實(shí)也不難實(shí)現(xiàn)，于是趕緊做一個(gè)出來(lái)看看。

整個(gè)動(dòng)畫效果能夠拆分為以下幾步:

• 布置一個(gè)與 LaunchScreen 相同的界面
• 讓視圖中間的 Logo 先縮小后放大直至蓋滿整個(gè)屏幕
• Logo 在放大過程中逐漸變透明
• Initial View Controller 的內(nèi)容稍微放大后恢復(fù)原狀

拆分完之后就好辦咯，一步步來(lái)實(shí)現(xiàn)吧~

先布個(gè)界面吧

由于后面需要讓 logo 變透明，我們選擇用 mask 來(lái)實(shí)現(xiàn)。

let logoLayer = CALayer()
logoLayer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
logoLayer.position = view.center
logoLayer.contents = UIImage(named: "logo")?.cgImage
view.layer.mask = logoLayer

好了，小鳥出來(lái)了。

但一開始這個(gè) logo 并不是透明的，于是先在其上蓋一層白色的 view，并改一下背景顏色吧。

let shelterView = UIView(frame: view.frame)
shelterView.backgroundColor = .white
view.addSubview(shelterView)

window!.backgroundColor = UIColor(red: 29 / 255.0, green: 161 / 255.0, blue: 242 / 255.0, alpha: 1)

棒，第一步完成。

那接著做 Logo 的縮小放大吧

這里我們用 CAKeyframeAnimation，讓這個(gè)縮放動(dòng)作一氣呵成。設(shè)置好開始時(shí)間、持續(xù)時(shí)間和各個(gè)關(guān)鍵幀，最后讓它保持動(dòng)畫最后的狀態(tài)。

let logoAnimation = CAKeyframeAnimation(keyPath: "bounds")
logoAnimation.beginTime = CACurrentMediaTime() + 1
logoAnimation.duration = 1
logoAnimation.keyTimes = [0, 0.4, 1]
logoAnimation.values = [NSValue(cgRect: CGRect(x: 0, y: 0, width: 100, height: 100)),
                    NSValue(cgRect: CGRect(x: 0, y: 0, width: 85, height: 85)),
                    NSValue(cgRect: CGRect(x: 0, y: 0, width: 4500, height: 4500))]
logoAnimation.timingFunctions = [CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut),
                             CAMediaTimingFunction(name: kCAMediaTimingFunctionDefault)]
logoAnimation.isRemovedOnCompletion = false
logoAnimation.fillMode = kCAFillModeForwards
logoLayer.add(logoAnimation, forKey: "zoomAnimation")

又好了。

順道把 Logo 透明也帶上

這個(gè)算好漸變透明的時(shí)間就好。

UIView.animate(withDuration: 0.3, delay: 1.4, options: .curveLinear, animations: {
    shelterView.alpha = 0
}) { (_) in
    shelterView.removeFromSuperview()
    view.layer.mask = nil
}

最后，讓初始界面顛一下

道理跟第二步相同，就不說了~

let mainViewAnimation = CAKeyframeAnimation(keyPath: "transform")
mainViewAnimation.beginTime = CACurrentMediaTime() + 1.1
mainViewAnimation.duration = 0.6
mainViewAnimation.keyTimes = [0, 0.5, 1]
mainViewAnimation.values = [NSValue(caTransform3D: CATransform3DIdentity),
                            NSValue(caTransform3D: CATransform3DScale(CATransform3DIdentity, 1.1, 1.1, 1)),
                            NSValue(caTransform3D: CATransform3DIdentity)]
view.layer.add(mainViewAnimation, forKey: "transformAnimation")
view.layer.transform = CATransform3DIdentity

Done.

需要完整代碼的可以來(lái)這里下~

Github: TwitterLauncher