慕课网_《iOS-动画入门》学习总结

时间：2017年05月15日星期一
说明：本文部分内容均来自慕课网。@慕课网：http://www.imooc.com
教学示例源码：https://github.com/zccodere/s...
个人学习源码：https://github.com/zccodere/s...

第一章：动画概述

1-1 iOS动画课程概述

iOS动画课程概述

为什么使用动画
制作动画的原理
制作动画的基础
一些动画特效的实现

第二章：创建动画的灵感

2-1 iOS动画的原理

动画技术较规范的定义是采用逐帧拍摄对象并连续播放而形成运动的影像技术。

2-2 寻找灵感-Dribbble

网址：https://dribbble.com/

2-3 寻找灵感-Capptivate

网址：http://capptivate.co/

2-4 寻找灵感-Google Material Design

网址：http://www.google.com/design/...

第三章：UIView动画详解

3-1 UIView动画概述

相关类图

UIView动画

位置：Position
透明度：Opacity
缩放：Scale
颜色：Color
翻转：Rotation

项目整体概览

3-2 Position动画上

代码演示：

//
//  PositionViewController.swift
//  iOSAnimationDemo
//
//  Created by zc on 2017/5/22.
//  Copyright © 2017年 com.zccoder. All rights reserved.
//

import UIKit

class PositionViewController: UIViewController {
    
    // 蓝色正方形
    @IBOutlet weak var blueSquare: UIView!
    // 红色正方形
    @IBOutlet weak var redSquare: UIView!
    // 绿色正方形
    @IBOutlet weak var greenSquare: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        // 动画效果一
        UIView.animate(withDuration: 2, animations: {
            // 从左边移动到右边
            self.blueSquare.center.x = self.view.bounds.width - self.blueSquare.center.x
            
            // 从顶部移动到底部
            self.redSquare.center.y = self.view.bounds.height - self.redSquare.center.y
            
            // 同时从左边到右边和从顶部到底部
            self.greenSquare.center.x = self.view.bounds.width - self.greenSquare.center.x
            self.greenSquare.center.y = self.view.bounds.height - self.greenSquare.center.y
            
            
        })

    }
    
    
    /*
    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destinationViewController.
        // Pass the selected object to the new view controller.
    }
    */

}

效果如下：

3-3 Position动画下

代码演示：

//
//  PositionViewController.swift
//  iOSAnimationDemo
//
//  Created by zc on 2017/5/22.
//  Copyright © 2017年 com.zccoder. All rights reserved.
//

import UIKit

class PositionViewController: UIViewController {
    
    // 蓝色正方形
    @IBOutlet weak var blueSquare: UIView!
    // 红色正方形
    @IBOutlet weak var redSquare: UIView!
    // 绿色正方形
    @IBOutlet weak var greenSquare: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        // 动画效果一
        UIView.animate(withDuration: 2, animations: {
            // 从左边移动到右边
            self.blueSquare.center.x = self.view.bounds.width - self.blueSquare.center.x
            
        })
        
        // 动画效果二
        UIView.animate(withDuration: 1, delay: 0.5, animations: {
            super.viewDidAppear(animated)
            
            // 从顶部移动到底部
            self.redSquare.center.y = self.view.bounds.height - self.redSquare.center.y
            
        }, completion: nil)
        
        // 动画效果三
        UIView.animate(withDuration: 1, delay: 1, animations: {
            super.viewDidAppear(animated)
            
            // 同时从左边到右边和从顶部到底部
            self.greenSquare.center.x = self.view.bounds.width - self.greenSquare.center.x
            self.greenSquare.center.y = self.view.bounds.height - self.greenSquare.center.y
            
        }, completion: nil)

    }
    
    
    /*
    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destinationViewController.
        // Pass the selected object to the new view controller.
    }
    */

}

效果如下：

3-4 Opacity动画

代码演示：

//
//  OpacityViewController.swift
//  iOSAnimationDemo
//
//  Created by zc on 2017/5/22.
//  Copyright © 2017年 com.zccoder. All rights reserved.
//

import UIKit

class OpacityViewController: UIViewController {

    // 蓝色正方形
    @IBOutlet weak var blueSquare: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        // 动画效果一
        UIView.animate(withDuration: 1, animations: {
            // 淡化效果
            self.blueSquare.alpha = 0.2
        })
    }
    /*
    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destinationViewController.
        // Pass the selected object to the new view controller.
    }
    */

}

效果如下：

3-5 Scale动画

代码演示：

//
//  ScaleViewController.swift
//  iOSAnimationDemo
//
//  Created by zc on 2017/5/22.
//  Copyright © 2017年 com.zccoder. All rights reserved.
//

import UIKit

class ScaleViewController: UIViewController {
    
    // 蓝色正方形
    @IBOutlet weak var blueSquare: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        UIView.animate(withDuration: 1, animations: {
            // 放大2.0倍
            self.blueSquare.transform = CGAffineTransform(scaleX: 2.0,y: 2.0)
            
            // 缩小0.3倍
            //self.blueSquare.transform = CGAffineTransform(scaleX: 2.0,y: 2.0)
        })
    }

    /*
    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destinationViewController.
        // Pass the selected object to the new view controller.
    }
    */

}

效果如下：

3-6 Color动画

代码演示：

//
//  ColorViewController.swift
//  iOSAnimationDemo
//
//  Created by zc on 2017/5/22.
//  Copyright © 2017年 com.zccoder. All rights reserved.
//

import UIKit

class ColorViewController: UIViewController {

    // 蓝色正方形
    @IBOutlet weak var blueSquare: UIView!
    
    // label
    @IBOutlet weak var name: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        UIView.animate(withDuration: 1, animations:{
            self.blueSquare.backgroundColor = UIColor.red
            self.name.textColor = UIColor.white
            
        })
    }
    
    /*
    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destinationViewController.
        // Pass the selected object to the new view controller.
    }
    */

}

效果如下：

3-7 Rotation动画

代码演示：

//
//  RotationViewController.swift
//  iOSAnimationDemo
//
//  Created by zc on 2017/5/22.
//  Copyright © 2017年 com.zccoder. All rights reserved.
//

import UIKit

class RotationViewController: UIViewController {
    
    // 轮转图
    @IBOutlet weak var wheel: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    func spin() {
        UIView.animate(withDuration: 1, delay: 0, options: UIViewAnimationOptions.curveLinear, animations: {
            // 旋转半圈
            //(translationX: self.wheel.transform, y: CGFloat(Double.pi))
            self.wheel.transform = self.wheel.transform.rotated(by: CGFloat(Double.pi))
        }, completion: {(finished) -> Void in
                self.spin()
        })
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        self.spin()
    }
    
    
    /*
    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destinationViewController.
        // Pass the selected object to the new view controller.
    }
    */

}

效果如下：