UIView 动画进阶

上一篇文章中介绍了 UIKit 中一些基础动画，这些动画足够应付普通的动画交互。可是做为开发者仅仅掌握基础用法显然是不够的，咱们须要更强大的武器来应对未来可能的复杂场景。接下来咱们来看看 UIView 的进阶动画：Transitions、Keyframe Animations。

Transitions

在上一篇文章中介绍了基于属性修改实现的动画，可是若是须要你实现视图的添加和移除的交互动画呢？固然你可使用基础动画实现，可是这里将介绍新的动画类型 - Transitions。不一样于基础动画经过在起始和结束状态之间的时间线上插值的实现过程，Transitions 会采用一种更为天然的方式来展示动画过程。

上面的效果图中：咱们翻转了头像视图，添加了红色视图而后又将其替换为蓝色视图。主要的代码实现以下：

// 头像翻转
UIView.transition(from: backView!, to: avatorView, duration: 1, options: [.transitionCrossDissolve], completion: nil)
    
// 添加红色视图
UIView.transition(with: animationContainserView!, duration: 1, options: [.transitionCrossDissolve], animations: {
    self.animationContainserView!.addSubview(redView)
}, completion: { finished in
    let blueView = UIView.init(frame: CGRect.init(x: 0, y: 0, width: 60, height: 60))
    blueView.backgroundColor = UIColor.blue
        
    // 替换红色视图
    UIView.transition(from: redView, to: blueView, duration: 1, options: [.transitionCrossDissolve], completion: nil)
        
})

其中第一个函数中，咱们将 backView 从其父视图中移除，并将 avatorview 添加进去。而第二个函数中咱们将红色视图 newView 添加到参数 animationContainserView 表明的视图中。其中控制动画过渡效果的是
options 中的参数，其可与以前基本动画中的选项进行组合，具体参数意思：

1. transitionFlipFromLeft 以垂直方向为轴从左到右翻转

2. transitionFlipFromRight 以垂直方向为轴从右到左翻转

3. transitionFlipFromTop 以水平方向为轴从上往下翻转

4. transitionFlipFromBottom 以水平方向为轴从下往上翻转

5. transitionCurlUp 右下角日后翻书效果

6. transitionCurlDown 右下角往前翻书效果

7. transitionCrossDissolve 交叉消失

Keyframe

前面那么介绍的那么多动画大多均可以看做是单一的线形动画，可是对于类型飞机起降这样的复杂动画来讲则远远不够。其实动画就是不少图片在时间线上组成的关键帧组合，若是能对其中某些关键帧进行提取并组合那么灵活性将大大提升。万幸的是 Apple 早就为咱们作好了一切，先看效果图：

这里咱们主要关注的是飞机起降过程的动画实现，其余动画后面又机会再讲。真实的起降过程远比效果图复杂，可是这里咱们进行了简化。起飞过程大体以下图所示：先平飞、而后调整角度、而后快速拉升。

知道了整个动画的几个关键帧咱们就能够进行以下代码实现了：

UIView.animateKeyframes(withDuration: 1.5, delay: 0.0, options: [], animations: {
    //add keyframes
  
    UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.25, animations: {
        self.planeImage.center.x += 80.0
        self.planeImage.center.y -= 10.0
    })
  
    UIView.addKeyframe(withRelativeStartTime: 0.1, relativeDuration: 0.4) {
        self.planeImage.transform = CGAffineTransform(rotationAngle: CGFloat(-M_PI_4/2))
    }
  
    UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.25) {
        self.planeImage.center.x += 100.0
        self.planeImage.center.y -= 50.0
        self.planeImage.alpha = 0.0
    }
  
    UIView.addKeyframe(withRelativeStartTime: 0.51, relativeDuration: 0.3) {
        self.planeImage.center = CGPoint(x: 0.0, y: originalCenter.y - 40)
        self.planeImage.transform = CGAffineTransform(rotationAngle: CGFloat(M_PI_4/2))

    }
  
    UIView.addKeyframe(withRelativeStartTime: 0.75, relativeDuration: 0.45) {
        self.planeImage.transform = CGAffineTransform.identity
        self.planeImage.alpha = 1.0
        self.planeImage.center = originalCenter
    }
  
}, completion: nil)

在函数 animateKeyframes 中咱们依次添加了滑跑、调整角度、快速拉升、调整降落位置和角度、降落这五个关键帧，而每个关键帧中的动画设计几乎与基础动画同样简单。因此只要咱们可以对相似起降这样复杂动画的关键帧进行很好的提取和组合，那么一切都不在话下了。

总结

UIKit 框架中的动画大部分都在这篇文章中介绍，还有一些新的动画特性后面再将。接下来文章中将会把目光投入到 Core Animations 中，内容将会在以前的基础上探索更多动画相关的特性。Let's Go!