效果如圖:
實(shí)現(xiàn)效果如圖
1鸣驱、UI布局
1.1進(jìn)入LaunchScreen.storyboard
中設(shè)置背景色為藍(lán)色
1.2拖入一個(gè)ImageView昼牛,設(shè)置大小100 81,并且垂直水平居中
效果如圖
2康聂、在AppDelegate.swift
中實(shí)現(xiàn)效果
思路解析:
從效果上看是有一張背景圖片贰健,還有一張前景圖片(遮罩效果),然后前景圖片不斷擴(kuò)大恬汁,然后在取消遮罩效果伶椿。
所以需要一個(gè)背景圖,一個(gè)前景圖氓侧,一個(gè)動(dòng)畫擴(kuò)大的效果
OK代碼實(shí)現(xiàn)
<br />
2.1創(chuàng)建背景圖
//懶加載圖片
private lazy var imageView : UIImageView = {
let iv = UIImageView(frame: UIScreen.mainScreen().bounds)
iv.image = UIImage(named: "7501334")
return iv
}()
<br />
2.2創(chuàng)建遮罩
//懶加載Layer
private lazy var imageViewMask : CALayer = {
let layer = CALayer()
layer.contents = UIImage(named: "twitter logo mask")?.CGImage
layer.bounds = CGRect(x: 0, y: 0, width: 100, height: 81)
layer.anchorPoint = CGPoint(x: 0.5, y: 0.5)
layer.contentsGravity = kCAGravityResizeAspect
return layer
}()
<br />
2.3在didFinishLaunchingWithOptions
方法中脊另,創(chuàng)建Window,并設(shè)置好屬性约巷,以及開始動(dòng)畫
func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
//創(chuàng)建window
window = UIWindow(frame: UIScreen.mainScreen().bounds)
//設(shè)置window根視圖
window?.rootViewController = UIViewController()
//添加圖片
window?.addSubview(imageView)
//設(shè)置遮罩
imageView.layer.mask = imageViewMask
//設(shè)置遮罩居中
imageViewMask.position = (window?.center)!
//開始動(dòng)畫
startAnimationMask()
//設(shè)置背景顏色
window?.backgroundColor = UIColor(red:0.117, green:0.631, blue:0.949, alpha:1)
//設(shè)置為可見
window?.makeKeyAndVisible()
return true
}
<br />
2.4實(shí)現(xiàn)動(dòng)畫代碼偎痛,使用關(guān)鍵幀動(dòng)畫CAKeyframeAnimation
private func startAnimationMask(){
//關(guān)鍵幀動(dòng)畫
//1、創(chuàng)建keyFrameAnimation
let keyFrameAnimation = CAKeyframeAnimation(keyPath: "bounds")
//2独郎、設(shè)置時(shí)長
keyFrameAnimation.duration = 0.6
//3踩麦、設(shè)置代理
keyFrameAnimation.delegate = self
//3.1設(shè)置開始時(shí)間
keyFrameAnimation.beginTime = CACurrentMediaTime() + 0.5
//3.2設(shè)置動(dòng)畫模式
keyFrameAnimation.timingFunctions = [CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut), CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)]
//4、設(shè)置幀
let key1 = NSValue(CGRect: imageViewMask.bounds)
let key2 = NSValue(CGRect: CGRect(x: 0, y: 0, width: 80, height: 65))
let key3 = NSValue(CGRect: CGRect(x: 0, y: 0, width: 1600, height: 1300))
keyFrameAnimation.values = [key1,key2,key3]
//4.1氓癌、設(shè)置幀動(dòng)畫時(shí)長
keyFrameAnimation.keyTimes = [0,0.3,1]
//5谓谦、添加到mask上
imageViewMask.addAnimation(keyFrameAnimation, forKey: "bounds")
}
<br />
2.5在動(dòng)畫結(jié)束后,我們要把遮罩層移除
//動(dòng)畫結(jié)束后贪婉,把遮罩刪除
override func animationDidStop(anim: CAAnimation, finished flag: Bool) {
imageView.layer.mask = nil
}
<br />
到這里就完成效果了反粥,你們可以修改動(dòng)畫方式來完成更多的效果
<br />
<br />