时间:2017年05月22日星期一
说明:本文部分内容均来自慕课网。@慕课网:http://www.imooc.com
教学示例源码:https://github.com/zccodere/s...
个人学习源码:https://github.com/zccodere/s...
第一章:动画进阶
1-1 Timing
学习课程前,请先学习慕课网_《iOS-动画入门》学习总结。
UIView动画的Timing
1-2 Repeat
UIView动画的重复执行:Repeat
代码演示:
- //
- // RepeatViewController.swift
- // iOSAnimationDemo
- //
- // Created by zc on 2017/5/22.
- // Copyright © 2017年 com.zccoder. All rights reserved.
- //
- import UIKit
- class RepeatViewController: 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: 1,animations: {
- // 蓝色方块从左边移动到右边
- self.blueSquare.center.x = self.view.bounds.width - self.blueSquare.center.x
- })
- UIView.animateKeyframes(withDuration: 1,delay: 0,options: .repeat,animations: {
- // 红色方块重复执行从左边移动到右边
- self.redSquare.center.x = self.view.bounds.width - self.redSquare.center.x
- },completion: nil)
- UIView.animateKeyframes(withDuration: 1,options: [.repeat,.autoreverse],animations: {
- // 绿色方块重复执行从左边移动到右边然后从右边移动到左边
- self.greenSquare.center.x = self.view.bounds.width - self.greenSquare.center.x
- },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.
- }
- */
- }
效果如下:
1-3 Easing上
UIView Easing动画
1-4 Easing下
代码演示:
- //
- // EasingViewController.swift
- // iOSAnimationDemo
- //
- // Created by zc on 2017/5/22.
- // Copyright © 2017年 com.zccoder. All rights reserved.
- //
- import UIKit
- class EasingViewController: UIViewController {
- @IBOutlet weak var blueSquare: UIView!
- @IBOutlet weak var redSquare: UIView!
- @IBOutlet weak var greenSquare: UIView!
- @IBOutlet weak var yellowSquare: 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.center.x = self.view.bounds.width - self.blueSquare.center.x
- })
- UIView.animate(withDuration: 1,options: UIViewAnimationOptions.curveEaseIn,animations: {
- // 红色方块从左边移动到右边-先慢后快
- self.redSquare.center.x = self.view.bounds.width - self.redSquare.center.x
- },completion: nil)
- UIView.animate(withDuration: 1,options: UIViewAnimationOptions.curveEaSEOut,animations: {
- // 绿色方块从左边移动到右边-先快后慢
- self.greenSquare.center.x = self.view.bounds.width - self.greenSquare.center.x
- },options: UIViewAnimationOptions.curveEaseInOut,animations: {
- // 黄色方块从左边移动到右边-两边快中间慢
- self.yellowSquare.center.x = self.view.bounds.width - self.yellowSquare.center.x
- },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.
- }
- */
- }
效果如下:
1-5 Spring上
UIView Spring动画:Spring:类似弹簧
1-6 Spring下
代码演示:
- //
- // SpringViewController.swift
- // iOSAnimationDemo
- //
- // Created by zc on 2017/5/22.
- // Copyright © 2017年 com.zccoder. All rights reserved.
- //
- import UIKit
- class SpringViewController: 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: 1,animations: {
- self.blueSquare.center.x = self.view.bounds.width - self.blueSquare.center.x
- })
- // 红色方块从左边移动到右边-弹簧效果
- UIView.animate(withDuration: 5,usingSpringWithDamping: 0.3,initialSpringVelocity: 0,options: [],animations: {
- self.redSquare.center.x = self.view.bounds.width - self.redSquare.center.x
- },completion: nil)
- // 绿色方块从左边移动到右边-先快后慢
- UIView.animate(withDuration: 5,initialSpringVelocity: 1,animations: {
- self.greenSquare.center.x = self.view.bounds.width - self.greenSquare.center.x
- },sender: Any?) {
- // Get the new view controller using segue.destinationViewController.
- // Pass the selected object to the new view controller.
- }
- */
- }
效果如下: