动画之基础转场动画——CATransition

阅读量

之前介绍了关键帧动画，主要是通过属性动画，在两个值（或者多个值）之间做动画。而转场动画，则是影响到整个图层的变化，转场动画首先展示之前的图层外观，然后通过一个交换过渡到新的外观。

在转场动画中，我们引入了一个新的类，CATransition，该类同样是CAAnimation的子类，和别的子类不同，CATransition有一个type和subtype来标识变换效果。

type

type属性是一个NSString类型，默认可以被设置成如下类型：

1
2
3
4
kCATransitionFade 淡入淡出效果(默认效果)
kCATransitionMoveIn 移入效果
kCATransitionPush 推入效果
kCATransitionReveal 截开效果

除了上面四种系统提供的type，下面这里列了一些私有的API，据说是安全的(可以过审核的)，不过还是慎用。

1
2
3
4
5
6
7
8
9
cube 立方体翻转效果
suckEffect 抽布效果，类似系统最小化窗口时的神奇效果(不支持过渡方向)
rippleEffect 水波抖动效果(不支持过度方向)
pageCurl 向上翻一页
pageUnCurl 向下翻一页
oglFlip 上下左右翻转效果
cameraIrisHollowOpen 相机镜头打开效果(不支持过渡方向)
cameraIrisHollowClose 相机镜头关上效果(不支持过渡方向)
rotate 旋转效果

subType

subType表示各种动画的方向，可以算是次要的动画属性，包含下面四个属性

1
2
3
4
kCATransitionFromRight
kCATransitionFromLeft
kCATransitionFromTop
kCATransitionFromBottom

此外，当type为@”rotate”(旋转)的时候,它也有几个对应的subType,分别为:

1
2
3
4
5
6
7
90cw   逆时针旋转90°

90ccw  顺时针旋转90°

180cw  逆时针旋转180°

180ccw 顺时针旋转180°

用法

用法如下，先看一下效果图，代码编写很简单，和之前的关键帧动画的写法基本差不多：

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import UIKit

class CATransitionViewController: UIViewController {
    var myLayer: CALayer?
    var photoView: UIImageView?
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .white
        
        photoView = UIImageView.init(frame: CGRect(x: 50, y: 200, width: 250, height: 140))
        photoView?.image = UIImage.init(named: "car.jpg")
        photoView?.backgroundColor = .red
        self.view.addSubview(photoView!)
        
        myLayer = photoView?.layer
        
        let toplabel = UILabel.init(frame: CGRect(x: 25, y: 420, width: 360, height: 20))
        toplabel.text = "可安全使用的效果，其他的很多已经被淡入淡出替代而无效了"
        self.view.addSubview(toplabel)
        
        for i in 0..<13 {
            let btn = UIButton.init(type: .system)
            self.view.addSubview(btn)
            if i > 11 {
                btn.frame = CGRect(x: 25*(i-12) + 80*(i-12), y: 450+30*3, width: 100, height: 30)
            } else if i > 7 {
                btn.frame = CGRect(x: 25*(i-8) + 80*(i-8), y: 450+30*2, width: 100, height: 30)
            } else if i > 3 {
                btn.frame = CGRect(x: 25*(i-4) + 80*(i-4), y: 450+30, width: 100, height: 30)
            } else {
                btn.frame = CGRect(x: 25*i + 80*i, y: 450, width: 100, height: 30)
            }
            btn.addTarget(self, action: #selector(clickBtn(btn:)), for: .touchUpInside)
            btn.setTitle(["pusht推出","fade渐变","moveIn移进去","reveal显示","rippleEffect水波抖动","cube立方体翻转效果","suckEffect三角","pageCurl上翻页","pageUnCurl下翻页","oglFlip翻转","cameraIrisHollowOpen镜头快门开","cameraIrisHollowClose镜头快门关","rotate旋转"][i], for: .normal)
            btn.tag = 100+i
        }
        
        let pushBtn = UIButton(type: .system)
        pushBtn.frame = CGRect(x: 80, y: 570, width: 120, height: 20)
        pushBtn.setTitle("点击跳转VC", for: .normal)
        self.view.addSubview(pushBtn)
        pushBtn.tag = 200
        pushBtn.addTarget(self, action: #selector(clickBtn(btn:)), for: .touchUpInside)
        
    }
    
    @objc func clickBtn(btn: UIButton) {
        switch btn.tag {
        case 100,101,102,103,104,105,106,107,108,109,110,111,112:
            let transitionAnimation = CATransition()
            transitionAnimation.type = [CATransitionType.push, CATransitionType.fade, CATransitionType.moveIn, CATransitionType.reveal, .init(rawValue: "rippleEffect"),.init(rawValue: "cube"),.init(rawValue: "suckEffect"),.init(rawValue: "pageCurl"),.init(rawValue: "pageUnCurl"),.init(rawValue: "oglFlip"),.init(rawValue: "cameraIrisHollowOpen"),.init(rawValue: "cameraIrisHollowClose"), .init(rawValue: "rotate")][btn.tag - 100]
            transitionAnimation.subtype = .fromTop
//            transitionAnimation.subtype = .init(rawValue: "180ccw")//90cw,90ccw,180cw,180ccw:  逆时针/顺时针 -- 90度/180度
            transitionAnimation.duration = 1.5
//            transitionAnimation.repeatCount = 3
//            transitionAnimation.autoreverses = true
//            transitionAnimation.fillMode = .forwards
//            transitionAnimation.isRemovedOnCompletion = false
            myLayer?.add(transitionAnimation, forKey: "transition")
//            photoView?.backgroundColor = photoView?.backgroundColor == .red ? .yellow : .red
            photoView?.image = photoView?.image == UIImage.init(named: "car.jpg") ? UIImage.init(named: "town.jpg") : UIImage.init(named: "car.jpg")
        case 200:
            let transitionAnimation = CATransition()
            transitionAnimation.type = .init(rawValue: "oglFlip")
            transitionAnimation.duration = 0.5
            transitionAnimation.subtype = .fromRight
            self.navigationController?.view.layer.add(transitionAnimation, forKey: "navigationVC")
            self.navigationController?.pushViewController(NextViewController(), animated: false)
        default:
            break
        }
    }

}

//NextViewController
class NextViewController: UIViewController, CAAnimationDelegate {
    var button: UIButton?
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .white
        let label = UILabel()
        label.frame = CGRect(x: 0, y: 120, width: UIScreen.main.bounds.size.width, height: 20)
        label.textAlignment = .center
        label.text = "这是跳转的 nextVC 界面"
        self.view.addSubview(label)
        
        button = UIButton(type: .system)
        self.view.addSubview(button!)
        button?.setTitle("pop返回", for: .normal)
        button?.frame = CGRect(x: 100, y: 200, width: 120, height: 30)
        button?.addTarget(self, action: #selector(clickTap(btn:)), for: .touchUpInside)
    }
    
    @objc func clickTap(btn: UIButton) {
        let transtionAnimation = CATransition()
        transtionAnimation.duration = 1.2
        transtionAnimation.type = .init(rawValue: "oglFlip")
        transtionAnimation.delegate = self
//        transtionAnimation.type = .fade
        transtionAnimation.subtype = .fromLeft
//        self.navigationController?.view.layer.add(transtionAnimation, forKey: "navigationVC")
//        self.navigationController?.popViewController(animated: false)
        button?.layer.add(transtionAnimation, forKey: "button")
        button?.setTitle("动画变化后的文字", for: .normal)
    }
    
    //CAAnimationDelegate
    func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
        print("finish")
    }

}
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码
本站总访问量次

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

<br><br>目前就职于比心陪练<br>iOS开发<br><br>能力一般，水平有限<br>待秋实果茂，与君共勉。