效果如图:
1、UI布局
1.1进入LaunchScreen.storyboard
中设置背景色为蓝色
1.2拖入一个ImageView,设置大小100 81,并且垂直水平居中
2、在AppDelegate.swift
中实现效果
思路解析:
从效果上看是有一张背景图片,还有一张前景图片(遮罩效果),然后前景图片不断扩大,然后在取消遮罩效果。
所以需要一个背景图,一个前景图,一个动画扩大的效果
OK代码实现
<br />
2.1创建背景图
//懒加载图片
private lazy var imageView : UIImageView = {
let iv = UIImageView(frame: UIScreen.mainScreen().bounds)
iv.image = UIImage(named: "7501334")
return iv
}()
<br />
2.2创建遮罩
//懒加载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
方法中,创建Window,并设置好属性,以及开始动画
func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
//创建window
window = UIWindow(frame: UIScreen.mainScreen().bounds)
//设置window根视图
window?.rootViewController = UIViewController()
//添加图片
window?.addSubview(imageView)
//设置遮罩
imageView.layer.mask = imageViewMask
//设置遮罩居中
imageViewMask.position = (window?.center)!
//开始动画
startAnimationMask()
//设置背景颜色
window?.backgroundColor = UIColor(red:0.117, green:0.631, blue:0.949, alpha:1)
//设置为可见
window?.makeKeyAndVisible()
return true
}
<br />
2.4实现动画代码,使用关键帧动画CAKeyframeAnimation
private func startAnimationMask(){
//关键帧动画
//1、创建keyFrameAnimation
let keyFrameAnimation = CAKeyframeAnimation(keyPath: "bounds")
//2、设置时长
keyFrameAnimation.duration = 0.6
//3、设置代理
keyFrameAnimation.delegate = self
//3.1设置开始时间
keyFrameAnimation.beginTime = CACurrentMediaTime() + 0.5
//3.2设置动画模式
keyFrameAnimation.timingFunctions = [CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut), CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)]
//4、设置帧
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、设置帧动画时长
keyFrameAnimation.keyTimes = [0,0.3,1]
//5、添加到mask上
imageViewMask.addAnimation(keyFrameAnimation, forKey: "bounds")
}
<br />
2.5在动画结束后,我们要把遮罩层移除
//动画结束后,把遮罩删除
override func animationDidStop(anim: CAAnimation, finished flag: Bool) {
imageView.layer.mask = nil
}
<br />
到这里就完成效果了,你们可以修改动画方式来完成更多的效果
<br />
<br />