时间：2017年05月15日星期一
说明：本文部分内容均来自慕课网。@慕课网：教学示例源码：个人学习源码：第一章：动画概述
1-1 iOS动画课程概述
iOS动画课程概述
为什么使用动画制作动画的原理制作动画的基础一些动画特效的实现
第二章：创建动画的灵感
2-1 iOS动画的原理
动画技术较规范的定义是采用逐帧拍摄对象并连续播放而形成运动的影像技术。
2-2 寻找灵感-Dribbble
网址：
2-3 寻找灵感-Capptivate
网址：
2-4 寻找灵感-Google Material 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 UIKitclass 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 UIKitclass 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 UIKitclass 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 UIKitclass 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 UIKitclass 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 UIKitclass 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. } */} 效果如下：
