kelele67的学习笔记-swift动画学习（一）

发表于 | 阅读次数

Swift3.0 动画编程(1)

学习自老镇swift课堂: 舞动Swift-Swift动画编程指南

在iOS的世界中，很多应用有着相似的颜色，相似的排版，可谓千篇一律。
即使Apple的UI设计与用户体验相当的出色，也难免产生审美疲劳。
为了寻求差异化，新颖的动画设计是一个很好的突破口。

最近突然对swift感兴趣，刚好一直用的mbp，想起上次用xcode想学习一下o-c还是几年前了，很惭愧没有坚持下去，不过现在学习swift也是个不错的选择。
不过有点坑的是视频教程用的swift是2.x，现在swift到了3.0，又更新了一大波坑，还得自己去填TAT估计等明年出了4.0才会稳定下来，据说到时候swift语法和API都会稳定并且向上兼容，估计会掀起一番swift热吧，所以趁现在先学为快。:-D

Core Animation(目前苹果的API Reference已更名为Core Graphics)

Core Animation是iOS与OS X平台上负责图形渲染与动画的基础设施。Core Animation可以动画视图和其他的可视元素，为你完成了动画所需的大部分绘帧工作。你只需配置少量的动画参数（如开始点位置和结束点的位置）即可施展Core Animation魔法。Core Animation将大部分实际的绘图任务交给了图形硬件来处理，图形硬件会加速图形渲染的速度。这种自动化的图形加速技术让动画拥有更高的帧率并且更加的平滑，而且不会加重CPU的负担而影响程序的运行速度。

Core Animation放大动画

运用CGAffineTransform结构实现了红色的圆放大动画

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
//
//  ViewController.swift
//  Core Animation 01
//
//  Created by 刘启 on 2016/10/6.
//  Copyright © 2016年 刘启. All rights reserved.
//
import UIKit
class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let redBall = UIView(frame: CGRect(x: 50, y: 50, width: 100, height: 100))
        redBall.backgroundColor = UIColor.red
        redBall.layer.cornerRadius = 50
        self.view.addSubview(redBall)
        
        UIView.animate(withDuration: 0.5, delay: 0, options: [.curveEaseInOut],
            animations: {() -> Void in redBall.transform = CGAffineTransform.init(scaleX: 2, y: 2)
            }, completion: nil)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

Core Animation组合动画

使用 concatenating(_:)实现了红色的圆向右放大后变绿的组合动画

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
//
//  ViewController.swift
//  Core Animation 01
//
//  Created by 刘启 on 2016/10/6.
//  Copyright © 2016年 刘启. All rights reserved.
//
import UIKit
class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let redBall = UIView(frame: CGRect(x: 50, y: 50, width: 100, height: 100))
        redBall.backgroundColor = UIColor.red
        redBall.layer.cornerRadius = 50
        self.view.addSubview(redBall)
        
        UIView.animate(withDuration: 0.5, delay: 0, options: [.curveEaseInOut],
                       animations: {() -> Void in redBall.transform =
                        CGAffineTransform.init(scaleX: 2, y: 2).concatenating(CGAffineTransform.init(translationX: 250, y: 50))
                        
                        redBall.backgroundColor = UIColor.green
            }, completion: nil)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

Core Animation弹性动画

增加阻尼和初速度来使动画弹跳起来

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
//
//  ViewController.swift
//  Core Animation 01
//
//  Created by 刘启 on 2016/10/6.
//  Copyright © 2016年 刘启. All rights reserved.
//
import UIKit
class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let redBall = UIView(frame: CGRect(x: 50, y: 50, width: 100, height: 100))
        redBall.backgroundColor = UIColor.red
        redBall.layer.cornerRadius = 50
        self.view.addSubview(redBall)
        
        UIView.animate(withDuration: 2, delay: 0, usingSpringWithDamping: 0.3, //阻尼（减速度）
                       initialSpringVelocity: 0, //初始速度
                       options: [.curveEaseInOut],
                       animations: {() -> Void in redBall.transform =
                        CGAffineTransform.init(scaleX: 2, y: 2).concatenating(CGAffineTransform.init(translationX: 150, y: 50))
                        
                        redBall.backgroundColor = UIColor.green
            }, completion: nil)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}