iOS动画进阶 - 实现类似美颜相机的相机启动动画

如果移动端访问不佳，可以访问我的个人博客



先上效果图：（demo地址）

步骤分析

这个动效看起来很有特色但是实现起来是非常简单的，只需要用到

CALayer

和

CAShapeLayer

做为展示层，然后通过

CABasicAnimation

实现动画就行了~

用两个

CALayer

来呈现启动的image

通过

UIBezierPath

和

CAShapeLayer

来画出具有曲线的CAShapeLayer

然后将曲线的

CAShapeLayer

做为

CALayer

的mask

最后通过

CABasicAnimation

做一个简单的位移动画

先绘制上半部分的layer

/**
绘制上半部分的layer
*/
private func configTopShapeLayer() {
//绘制贝斯尔曲线
let topBezier:UIBezierPath = UIBezierPath()
topBezier.moveToPoint(CGPointMake(-1, -1))
topBezier.addLineToPoint(CGPointMake(bounds.width+1, -1))
topBezier.addCurveToPoint(CGPointMake(bounds.width/2.0+1, bounds.height/2.0+1), controlPoint1: CGPointMake(bounds.width+1, 0+1), controlPoint2: CGPointMake(343.5+1, 242.5+1))
topBezier.addCurveToPoint(CGPointMake(-1, bounds.height+2), controlPoint1: CGPointMake(31.5+2, 424.5+2), controlPoint2: CGPointMake(0+2, bounds.height+2))
topBezier.addLineToPoint(CGPointMake(-1, -1))
topBezier.closePath()
//创建一个CAShapeLayer，将绘制的贝斯尔曲线的path给CAShapeLayer
let topShape = CAShapeLayer()
topShape.path = topBezier.CGPath
//给topLayer设置contents为启动图
topLayer.contents = launchImage?.CGImage
topLayer.frame = bounds
layer.addSublayer(topLayer)
//将绘制后的CAShapeLayer做为topLayer的mask
topLayer.mask = topShape
}

绘制后的结果是这样的：

然后以同样的原理绘制下半部分的layer

/**
绘制下半部分的layer
*/
private func configBottomShapeLayer() {
//绘制贝斯尔曲线
let bottomBezier:UIBezierPath = UIBezierPath()
bottomBezier.moveToPoint(CGPointMake(bounds.width, 0))
bottomBezier.addCurveToPoint(CGPointMake(bounds.width/2.0, bounds.height/2.0), controlPoint1: CGPointMake(bounds.width, 0), controlPoint2: CGPointMake(343.5, 242.5))
bottomBezier.addCurveToPoint(CGPointMake(0, bounds.height), controlPoint1: CGPointMake(31.5, 424.5), controlPoint2: CGPointMake(0, bounds.height))
bottomBezier.addLineToPoint(CGPointMake(bounds.width, bounds.height))
bottomBezier.addLineToPoint(CGPointMake(bounds.width, 0))
bottomBezier.closePath()
//创建一个CAShapeLayer，将绘制的贝斯尔曲线的path给CAShapeLayer
let bottomShape = CAShapeLayer()
bottomShape.path = bottomBezier.CGPath
//给bottomLayer设置contents为启动图
bottomLayer.contents = launchImage?.CGImage
bottomLayer.frame = bounds
layer.addSublayer(bottomLayer)
//将绘制后的CAShapeLayer做为bottomLayer的mask
bottomLayer.mask = bottomShape
}

这里注意的是画的贝斯尔曲线上半部分的要整体向下平移1到2个像素，为了防止贝斯尔曲线画曲线导致的锯齿效果，下面是下半部分完成后的效果图：

最后给两个layer一个位移动画

/**
展开的动画
*/
func starAnimation() {
//创建一个CABasicAnimation作用于CALayer的anchorPoint
let topAnimation = CABasicAnimation.init(keyPath: "anchorPoint")
//设置移动路径
topAnimation.toValue = NSValue.init(CGPoint: CGPointMake(1, 1))
//动画时间
topAnimation.duration = 0.6
//设置代理，方便完成动画后移除当前view
topAnimation.delegate = self
//设置动画速度为匀速
topAnimation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionLinear)
//设置动画结束后不移除点，保持移动后的位置
topAnimation.removedOnCompletion = false
topAnimation.fillMode = kCAFillModeForwards
topLayer.addAnimation(topAnimation, forKey: "topAnimation")

//创建一个CABasicAnimation作用于CALayer的anchorPoint
let bottomAnimation = CABasicAnimation.init(keyPath: "anchorPoint")
//设置移动路径
bottomAnimation.toValue = NSValue.init(CGPoint: CGPointMake(0, 0))
//动画时间
bottomAnimation.duration = 0.6
//设置动画速度为匀速
bottomAnimation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionLinear)
//设置动画结束后不移除点，保持移动后的位置
bottomAnimation.removedOnCompletion = false
bottomAnimation.fillMode = kCAFillModeForwards
bottomLayer.addAnimation(bottomAnimation, forKey: "topAnimation")
}

/**
动画完成后移除当前view
*/
internal override func animationDidStop(anim: CAAnimation, finished flag: Bool)
{
if flag {
removeFromSuperview()
}
}

这里为了方便观察，我将动画时间变长了，下面是完成后的效果图：