Swift炫酷动效StarWars.iOS剖析

Yalantis团队简直就是我的偶像，用OC和Swift代码实现了诸多炫酷的动效。在这里，我将以Yalantis的StarWars.iOS作为分析对象，剖析其中几个炫酷动效的实现，就当学习了。

StarWars.iOS（https://github.com/Yalantis/StarWars.iOS）是超炫酷的一套动效，其Swift代码的实现在Github已经获得2400+赞，效果如下：

star_wars-concept.gif

我在这里想要剖析的主要是3块：

1. 星空背景；
2. 点击开关后的过渡动效；
3. 破裂散落效果；

建议clone一份代码，不然估计是看得一头雾水了。

1. 星空背景

gif0.gif

这个之前我用过，靠CAEmitterLayer和CAEmitterCell实现，这两个类可以实现大部分的粒子效果，包括火焰、烟雾等效果，这边是我之前写的一个很渣的例子FNFogEaseOut。利用CAEmitterLayer和CAEmitterCell，可以控制粒子的形状、图案、初始速度、加速度、生命时间、缩放速率等等。

在这里看一下核心的代码段（StarsOverlay.swift）：

emitter.emitterMode = kCAEmitterLayerOutline
emitter.emitterShape = kCAEmitterLayerCircle
emitter.renderMode = kCAEmitterLayerOldestFirst
emitter.preservesDepth = true

在这里指定了CAEmitterLayer的发送模式（kCAEmitterLayerOutline）、发送源形状（kCAEmitterLayerOutline）、渲染模式（kCAEmitterLayerOldestFirst）。

particle = CAEmitterCell() 
particle.contents = UIImage(named: "spark")!.CGImage
particle.birthRate = 10
particle.lifetime = 50
particle.lifetimeRange = 5
particle.velocity = 20
particle.velocityRange = 10
particle.scale = 0.02
particle.scaleRange = 0.1
particle.scaleSpeed = 0.02
emitter.emitterCells = [particle]

让CAEmitterCell以10个/s的生成速率生成，并指定了粒子的生命时间、速度、缩放比例和缩放速度。

最后实现的效果非常梦幻，非常关键的一段小代码：

emitterTimer = NSTimer.scheduledTimerWithTimeInterval(0.1, target: self, selector: #selector(randomizeEmitterPosition), userInfo: nil, repeats: true)
func randomizeEmitterPosition() {
    let sizeWidth = max(bounds.width, bounds.height)
    let radius = CGFloat(arc4random()) % sizeWidth
    emitter.emitterSize = CGSize(width: radius, height: radius)
    particle.birthRate = 10 + sqrt(Float(radius))
}

这一段代码使得粒子发射源的位置和生成速率具有一定的随机性，不然就会出现靠近中心的位置有很对星星，但是远一点的地方稀稀疏疏的情况。

总结：核心实现是CAEmitterLayer和CAEmitterCell。

2. 点击开关后的过渡动效

gif1.gif

这个虽然说看着像UIViewController的过渡动效，实际上只是UIView的过渡。

简单的说，就是获取当前的View的界面新建一个View，再通过CAShapeLayer设为layer.mask来抠一个洞，实时调整这个洞的大小，从而实现圆形区域放大的效果。

核心代码（UIView+CircularAnimation.swift）：

let snapshot = self.snapshotViewAfterScreenUpdates(false)
snapshot.frame = self.bounds
self.addSubview(snapshot)

获取当前的View的界面新建一个View，重点是snapshotViewAfterScreenUpdates这个方法，iOS7之后终于再也不用UIGraphics获取截图了。这个方法后面的bool若为false，取到的即是当前的页面状态；否则如果是下面这样的代码，你取到的是一片空白，因为该参数表示是否在所有效果应用在视图上了以后再获取快照：

[view snapshotViewAfterScreenUpdates:YES];
[view setAlpha:0.0];

核心代码（CircularRevealAnimator.swift）：

let startCirclePath = CGPathCreateWithEllipseInRect(SquareAroundCircle(center, radius: startRadius), UnsafePointer())
let endCirclePath = CGPathCreateWithEllipseInRect(SquareAroundCircle(center, radius: endRadius), UnsafePointer())
var startPath = startCirclePath, endPath = endCirclePath
var path = CGPathCreateMutable()
CGPathAddRect(path, nil, layer.bounds)
CGPathAddPath(path, nil, startCirclePath)
startPath = path
path = CGPathCreateMutable()
CGPathAddRect(path, nil, layer.bounds)
CGPathAddPath(path, nil, endCirclePath)
endPath = path

startPath和endPath分别为初始状态的小圆和最终状态的大圆；

animation = CABasicAnimation(keyPath: "path")
animation.fromValue = startPath
animation.toValue = endPath

mask.addAnimation(animation, forKey: "reveal")

实现被抠区域从小变大的动效。

总结：核心实现是snapshotViewAfterScreenUpdates获取截图、CAShapeLayer指定UIView的layer.mask。

3. 破裂散落效果

gif2.gif

其实这个效果是整套动效的关键，也是我最喜欢的部分。
前面讲到了CAEmitterCell粒子，估计会有很多人会和我一样，想用矩形或正方形的粒子来实现这个效果。不过我没能继续做下去，并且StarWars.iOS中也不是这样实现的。

另外，这是一个UIViewController的过渡动画。

实现的关键和上面讲到的过渡动画有一点类似：

1. 截图；
2. 分割成小块；
3. 散落；

自定义UIViewController过渡动画，需要用到protocol UIViewControllerAnimatedTransitioning，实现下面2个方法：

public func transitionDuration(transitionContext: UIViewControllerContextTransitioning?) -> NSTimeInterval
public func animateTransition(transitionContext: UIViewControllerContextTransitioning)

前者制定过渡动画的时长，后者可以拿到过渡前后的页面View，从而自定义过渡过程。

自定义过渡核心代码（StarWarsUIDynamicAnimator.swift）：

public func transitionDuration(transitionContext: UIViewControllerContextTransitioning?) -> NSTimeInterval {
    return self.duration
}

public func animateTransition(transitionContext: UIViewControllerContextTransitioning) {
    ...
}

破裂散落效果核心代码：

let fromViewSnapshot = fromView.snapshotViewAfterScreenUpdates(false)
for ... {
    for ... {
        let snapshotRegion = CGRect(x: x, y: y, width: width, height: height)
        let snapshot = fromViewSnapshot.resizableSnapshotViewFromRect(snapshotRegion, afterScreenUpdates: false, withCapInsets: UIEdgeInsetsZero)
         containerView.addSubview(snapshot)

获取当前View的截图View，并用resizableSnapshotViewFromRect得到各个方块所在位置的截图View。

func randomFloatBetween(smallNumber: CGFloat, and bigNumber: CGFloat) -> CGFloat {
    let diff = bigNumber - smallNumber
    return CGFloat(arc4random()) / 100.0 % diff + smallNumber
}

let push = UIPushBehavior(items: [snapshot], mode: .Instantaneous)
push.pushDirection = CGVector(dx: randomFloatBetween(-0.15 , and: 0.15), dy: randomFloatBetween(-0.15 , and: 0))
push.active = true
animator.addBehavior(push)
                
let gravity = UIGravityBehavior(items: snapshots)
animator.addBehavior(gravity)

给每个小块加上瞬间（Instantaneous）的推力（UIPushBehavior），randomFloatBetween的随机部分，使得每个小块在竖直和水平上都有些错开，达到裂开的效果。

给snapshots加上重力，实现下落的效果。

总结

其实我早就想仔细研究这个动效的实现了，但是看着这么炫酷，总感觉是超复杂的实现。潜下心来看代码，虽然代码也不短，但是从实现思路和核心知识点来看，都不复杂。

这3个动效学到的新知识：CAEmitterLayer和CAEmitterCell、snapshotViewAfterScreenUpdates截图、UIPushBehavior和UIGravityBehavior。