时间：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.
    }
    */

}

效果如下：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!