时间: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
2-3 寻找灵感-Capptivate
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,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,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,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,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,sender: Any?) {
- // Get the new view controller using segue.destinationViewController.
- // Pass the selected object to the new view controller.
- }
- */
- }
效果如下: