Mask 动画

前言：不少动效都是多种动画的组合，有时候你可能只是须要其中某个动画，但面对庞杂的代码库或是教程，你可能比较困惑，本系列将复杂动效中不常见的动画效果拆解出来便于学习，授人以鱼不如授人以渔。

第一讲是来自 BubbleTransition 中最夺人眼球的形变更画。这个效果在 StarWars.iOS转场动效有两次应用，很是地炫酷；Raywenderlich.com 也出过一个教程来实现这种效果。

BubbleTransition

通常而言，这种效果会使用 UIBezierPath + CAShapeLayer + maskLayer 搞定，可是我去看了看代码，上面的效果实际上是下面这样实现的。

BubbleTransition 慢放

Are you kidding me? Are you kidding me? 不知道我为什么说两遍的请去欣赏《拯救呆萌》三部曲最终篇《火星救援》。这个效果的开发者真是太有才了，仅仅经过组合视图+缩放这么简单的方法就实现了这个效果，天才。

在上面提到的另外两种效果则是使用提到的 UIBezierPath + CAShapeLayer + maskLayer 套路，关于 UIBezierPath + CAShapeLayer，简书上有一篇写得还不错，就是标题太炫酷，这篇文章示范了使用 UIBezierPath + CAShapeLayer 实现不规则视图，也可使用上面的简单组合手法轻松实现，但若是面对更加复杂的图形，仍是得靠 UIBezierPath + CAShapeLayer。

也许你据说过贝塞尔曲线，但在 iOS 里，UIBezierPath 不单单用于生成一条曲线，常规的矩形、圆形、圆角矩形以及椭圆都不在话下，是个普适性的图形对象。而 CAShapeLayer 则是 CALayer 的子类，正如类名描述同样，经过其path属性搭配 UIBezierPath 能够实现多种用普通手段难以实现的外形，以及一些线条动画(能够去看看上面提到的标题很炫酷的文章)。

而 maskLayer，你可能据说过遮罩之类的概念，很像你玩游戏探索地图时的效果，这里实际上指的是CALayer类的mask属性，也是个CALayer对象，UIView类有个maskView的属性，做用类似。其实 BubbleTransition 里做者的实现手法自己就是对 mask 这一律念的应用，真的是太天才了。

使用 UIBezierPath + CAShapeLayer + maskLayer 套路实现上面的效果慢放后是下面这样的，不知道原做者有没有对这两种效果进行过对比，老实说，我以为原做者的手法实现的效果更好：

NewBubbleTransition

上面方法的核心代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

//利用 UIBezierPath 生成一大一小两条椭形路径，ovalInRect 意思是生成紧贴矩形内部的椭圆，bubble 是 BubbleTransition 中的添加的背景视图， let circleMaskPathInitial = UIBezierPath(ovalInRect: bubble.frame) let finalRect = CGRectInset(bubble.frame, -1000, -1000) let circleMaskPathFinal = UIBezierPath(ovalInRect: finalRect) //用 CAShapeLayer 做为 mask let maskLayer = CAShapeLayer() maskLayer.path = circleMaskPathFinal.CGPath presentedControllerView.layer.mask = maskLayer //对 CAShapeLayer 的 path 属性进行动画 let maskLayerAnimation = CABasicAnimation(keyPath: "path") maskLayerAnimation.fromValue = circleMaskPathInitial.CGPath maskLayerAnimation.toValue = circleMaskPathFinal.CGPath maskLayerAnimation.duration = self.transitionDuration(transitionContext) maskLayer.addAnimation(maskLayerAnimation, forKey: "path")

来点不同的形状，固然从效果上来说这个形状放在这里很差看。该例子仅做示范。

quincunx.gif

生成梅花形状曲线的代码：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

let width = presentedControllerView.frame.width let height = presentedControllerView.frame.height   let circleMaskPathInitial = UIBezierPath() circleMaskPathInitial.moveToPoint(CGPoint(x: 0, y: height)) circleMaskPathInitial.addArcWithCenter(CGPoint(x: width / 4, y: height), radius: width / 4, startAngle: CGFloat(M_PI), endAngle: CGFloat(M_PI * 3 / 2), clockwise: true) circleMaskPathInitial.addArcWithCenter(CGPoint(x: width / 2, y: height - width / 4), radius: width / 4, startAngle: CGFloat(M_PI), endAngle: CGFloat(M_PI * 2), clockwise: true) circleMaskPathInitial.addArcWithCenter(CGPoint(x: width * 3 / 4, y: height), radius: width / 4, startAngle: CGFloat(M_PI * 3 / 2), endAngle:CGFloat(M_PI * 2), clockwise: true) circleMaskPathInitial.moveToPoint(CGPoint(x: 0, y: height)) circleMaskPathInitial.closePath()   let circleMaskPathFinal = UIBezierPath() circleMaskPathFinal.moveToPoint(CGPoint(x: -width, y: height)) circleMaskPathFinal.addArcWithCenter(CGPoint(x: 0, y: height), radius: height, startAngle: CGFloat(M_PI), endAngle: CGFloat(M_PI * 3 / 2), clockwise: true) circleMaskPathFinal.addArcWithCenter(CGPoint(x: width / 2, y: 0), radius: width / 2, startAngle: CGFloat(M_PI), endAngle: CGFloat(M_PI * 2), clockwise: true) circleMaskPathFinal.addArcWithCenter(CGPoint(x: width, y: height), radius: height, startAngle: CGFloat(M_PI * 3 / 2), endAngle: CGFloat(M_PI * 2), clockwise: true) circleMaskPathFinal.moveToPoint(CGPoint(x: -width, y: height)) circleMaskPathFinal.closePath()

示意图

类方法bezierPathWithArcCenter:radius:startAngle:endAngle:clockwise:用于添加圆弧，clockwise参数指示绘制的方向，true时沿顺时针方向绘制，false时沿逆时针方向绘制。下图是该方法文档中的坐标示意图：

Angles in the default coordinate system

在绘制上面的梅花形状的曲线时，注意起始和终点的曲线保持总体的绘制方向一致，否则动画会很奇怪。

总结

差点搞了个大乌龙，不过见识到 BubbleTransition 的实现手段，如今就有两种手段来实现这类效果：

• 尺寸更大的圆角矩形视图充当背景

• UIBezierPath + CAShapeLayer + maskLayer

我对 BubbleTransition 的手法真是佩服得五体投地，就这么简单地搞定了，UIBezierPath + CAShapeLayer + maskLayer 的不少场景均可以使用这个手法替代，代价也不高。固然面对更复杂的曲线视图，仍是用后者比较省心。

UIBezierPath + CAShapeLayer + maskLayer 的组合拳很是适合实现一些不规则的视图，像曲线菜单或任务栏，波纹视图，灌水视图等等，发挥下你的想象力吧。