《iOS动画》读书笔记·转场动画

《iOS动画》读书笔记·前序
《iOS动画》读书笔记·显示层动画
《iOS动画》读书笔记·内容层动画
《iOS动画》读书笔记·转场动画

转场动画

转场动画主要用于不同视图场景之间的切换。

CoreAnimation:CATransition转场动画

CATransition理论初识

CATransition同CoreAnimation核心动画中CABasicAnimation等相关类的使用方法类似。主要分为以下三个步骤：
(1) 实例化CATransition，并设置相应的转场动画key
(2) 设置合适的转场动画属性，如动画周期、过度方向、动画保持状态等
(3) 将动画效果添加到相应的视图的Layer图层中

在第一步设置动画效果时需注意，iOS提供了大量的酷炫动画效果。不过总体上来说可以分为公有API和私有API，私有APP制作的APP有被拒的风险，所以在使用时需要尤为注意。

公有API:

• fade 淡入淡出效果，可用 CATransitionType.fade 表示
• push 推送效果，可用 CATransitionType.push 表示
• reveal 揭开效果，可用 CATransitionType.reveal 表示
• movein 移动效果，可用 CATransitionType.movein 表示

私有API:

• pageCurl 向上翻一页
• pageUnCurl 向下翻一页
• rippleEffect 滴水效果
• suckEffect 收缩效果，如一块布被抽走
• cube 立方体效果
• oglFlip 上下翻转效果
• cameraIrisHollowOpen 相机打开
• cameraIrisHollowClose 相机关闭

动画效果简单示例

1、先来看一下示例的动画效果

转场动画示例.gif

2、代码实现部分
具体代码点击这里https://github.com/SPIREJ/AnimationTransitionSwift
注：相应的button是在storyboard里面画的

import UIKit

let kScreenW = UIScreen.main.bounds.size.width
let kScreenH = UIScreen.main.bounds.size.height

class ViewController: UIViewController {
    
    var imageView:UIImageView?
    
    var str:String = "aaa.jpg"

    override func viewDidLoad() {
        super.viewDidLoad()
        
        imageView = UIImageView(frame: CGRect(x: 20, y: 0, width: kScreenW-40, height: 200))
        imageView?.center = self.view.center
        imageView?.image = UIImage(named: "aaa.jpg")
        self.view.addSubview(imageView!)
    }

    // 淡入淡出效果，可用 CATransitionType.fade 表示
    @IBAction func animation_fade(_ sender: UIButton) {
        self.animationType("fade")
    }
    
    // 推送效果，可用 CATransitionType.push 表示
    @IBAction func animation_push(_ sender: UIButton) {
        self.animationType("push")
    }
    
    // 揭开效果，可用 CATransitionType.reveal 表示
    @IBAction func animation_reveal(_ sender: UIButton) {
        self.animationType("reveal")
    }
    
    // 移动效果，可用 CATransitionType.movein 表示
    @IBAction func animation_movein(_ sender: UIButton) {
        self.animationType("movein")
    }
    
    // 向上翻页效果
    @IBAction func animation_pageCurl(_ sender: UIButton) {
        self.animationType("pageCurl")
    }
    
    // 向下翻页效果
    @IBAction func animation_pageUnCurl(_ sender: UIButton) {
        self.animationType("pageUnCurl")
    }
    
    // 立方体翻转效果
    @IBAction func animation_cube(_ sender: UIButton) {
        self.animationType("cube")
    }
    
    // 翻转效果
    @IBAction func animation_oglFlip(_ sender: UIButton) {
        self.animationType("oglFlip")
    }
    
    // 收缩效果
    @IBAction func animation_suckEffect(_ sender: UIButton) {
        self.animationType("suckEffect")
    }
    
    // 水滴波纹效果
    @IBAction func animation_rippleEffect(_ sender: UIButton) {
        self.animationType("rippleEffect")
    }

    // 相机打开效果
    @IBAction func animation_cameraIrisHollowOpen(_ sender: UIButton) {
        self.animationType("cameraIrisHollowOpen")
    }

    // 相机关闭效果
    @IBAction func animation_cameraIrisHollowClose(_ sender: UIButton) {
        self.animationType("cameraIrisHollowClose")
    }
    
    func animationType(_ animationType:String) {
        
        if str == "aaa.jpg" {
            str = "bbb.jpg"
        }else {
            str = "aaa.jpg"
        }
        
        imageView?.image = UIImage(named: str)
        
        let animation:CATransition = CATransition.init()
        animation.duration = 1
        animation.type = CATransitionType(rawValue: animationType)
        imageView?.layer.add(animation, forKey: nil)
        
    }  
}

其他

可以把动画添加到不同的UIView上，将看到不一样的效果。比如这里把动画添加到控制器view上：

self.view.layer.add(animation, forKey: nil)

看到如下面的效果：

加载到不同视图上的效果.gif

视图过渡动画

在使用视图控制器的时候，除了Push和Pop两种操作外，iOS还提供了一套视图控制器过渡动画API，可以允许用户自定义视图过渡动画。

要想自定义视图控制器的过渡动画，首先需要了解以下两个协议：
（1）UINavigationControllerDelegate
（2）UIViewControllerAnimatedTransitioning

UINavigationControllerDelegate是视图控制器使用的委托代理协议，该协议可以代理视图的以下功能：
（1）拦截导航栏视图控制器
（2）拦截视图控制器目标viewController和源viewController

在过渡动画中使用第二个功能，即拦截视图控制器目标viewController和源viewController。该功能的回调方法如下：

func navigationController(_ navigationController: UINavigationController, animationControllerFor operation: UINavigationController.Operation, from fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning?

fromVC : 表明该视图控制器在跳转过程中来自哪个视图控制器
toVC : 表明该视图控制器在跳转过程中最终跳转到何处去

实际上以上的所有操作都借助于UIViewControllerAnimatedTransitioning协议，将所有动画效果最终封装成一个对象返回给试图控制，它有两个非常重要的回调方法：

// 返回动画执行周期
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval

// 构建转场动画内容，该方法可以通过transitionContext获取当前的fromVC和toVC，拿到这两个视图控制器后就可以设置当前视图控制器的各种动画效果
func animateTransition(using transitionContext: UIViewControllerContextTransitioning)

视图过渡动画pop.gif

具体可以看代码https://github.com/SPIREJ/AnimationTransitionSwift

视图过渡动画之侧滑

视图过渡动画侧滑.gif