Mask 動畫

時間 2019-11-20

標籤 mask 動畫简体版

原文原文鏈接

前言：不少動效都是多種動畫的組合，有時候你可能只是須要其中某個動畫，但面對龐雜的代碼庫或是教程，你可能比較困惑，本系列將複雜動效中不常見的動畫效果拆解出來便於學習，授人以魚不如授人以漁。git

第一講是來自 BubbleTransition 中最奪人眼球的形變更畫。這個效果在 StarWars.iOS轉場動效有兩次應用，很是地炫酷；Raywenderlich.com 也出過一個教程來實現這種效果。github

BubbleTransitionapp

通常而言，這種效果會使用 UIBezierPath + CAShapeLayer + maskLayer 搞定，可是我去看了看代碼，上面的效果實際上是下面這樣實現的。學習

BubbleTransition 慢放動畫

Are you kidding me? Are you kidding me? 不知道我爲什麼說兩遍的請去欣賞《拯救呆萌》三部曲最終篇《火星救援》。這個效果的開發者真是太有才了，僅僅經過組合視圖+縮放這麼簡單的方法就實現了這個效果，天才。ui

在上面提到的另外兩種效果則是使用提到的 UIBezierPath + CAShapeLayer + maskLayer 套路，關於 UIBezierPath + CAShapeLayer，簡書上有一篇寫得還不錯，就是標題太炫酷，這篇文章示範了使用 UIBezierPath + CAShapeLayer 實現不規則視圖，也可使用上面的簡單組合手法輕鬆實現，但若是面對更加複雜的圖形，仍是得靠 UIBezierPath + CAShapeLayer。spa

也許你據說過貝塞爾曲線，但在 iOS 裏，UIBezierPath 不單單用於生成一條曲線，常規的矩形、圓形、圓角矩形以及橢圓都不在話下，是個普適性的圖形對象。而 CAShapeLayer 則是 CALayer 的子類，正如類名描述同樣，經過其path屬性搭配 UIBezierPath 能夠實現多種用普通手段難以實現的外形，以及一些線條動畫(能夠去看看上面提到的標題很炫酷的文章)。3d

而 maskLayer，你可能據說過遮罩之類的概念，很像你玩遊戲探索地圖時的效果，這裏實際上指的是CALayer類的mask屬性，也是個CALayer對象，UIView類有個maskView的屬性，做用類似。其實 BubbleTransition 裏做者的實現手法自己就是對 mask 這一律唸的應用，真的是太天才了。code

使用 UIBezierPath + CAShapeLayer + maskLayer 套路實現上面的效果慢放後是下面這樣的，不知道原做者有沒有對這兩種效果進行過對比，老實說，我以爲原做者的手法實現的效果更好：對象

NewBubbleTransition

上面方法的核心代碼：

//利用 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

生成梅花形狀曲線的代碼：

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 的實現手段，如今就有兩種手段來實現這類效果：