動畫是通過一系列靜態(tài)圖片（幀）快速顯示來模擬動作和形狀的變化過程。

在iOS中，創(chuàng)建基礎動畫很簡單，只需要利用UIView的類型方法：animate(withDuration:animations:)。這個方法的原理就是，設置好開始狀體和結(jié)束狀態(tài)，然后* UIView animation* 創(chuàng)建中間的過程效果。繼續(xù)上一篇開始用Swift開發(fā)iOS 10 - 13 Self Sizing Cells and Dynamic Type。

添加評級Button

• 下載圖片包，添加到xcassets里。

• 在detail view右上角添加一個Button，設置其內(nèi)容為空，image為更添加的圖片check（一個對勾圖標），type為system，tint為white。
  

• 為Button添加四個約束，右、上兩個spacing約束，寬度和高度約束。

創(chuàng)建Restaurant Review視圖控制器

• 在storyboard中新建一個View Controller。
• 在新建視圖控制器中添加Image View，并改變其大小為整個view，先設置image屬性為一個隨機圖片，比如cafeloisl。 并設置一些約束。

按照下圖設置之后是UI：

• 在Review的圖片上添加一個UIView，x、y、寬度、高度分別是53、40、269、420。
• 添加Image View，寬度和高度分別為269，200，隨機設置image
• 添加一個內(nèi)容為You've dined here. What do you think?的Label。字體風格為Light，大小為27，居中退器，行數(shù)為2。
• 添加三個按鈕內(nèi)容分別為Absolutely love it!，Good，I don't like it。背景為紅色，tint為white，字體是Light和16。
• 設置三個按鈕為一個stack view，改變distribution為Fill Equally，spaing為5。
• 為上面添加的UIView添加四個約束。上左右的spacing約束分別為20，37，37。高度約束為420。

• 為label添加左右下三個spacing約束，值都是15。
• 為stack view天機左右下三個spacing約束，分別為8，8，10。

創(chuàng)建Present modally類型的Segue

在開始用Swift開發(fā)iOS 10 - 10 Navigation Controller的介紹和Segue中介紹過Segue類型。Present modally是新頁面將以動畫形式從底部出現(xiàn)到覆蓋整個手機屏幕。

• contrl-drag從對勾button到Review視圖控制，選擇Present modally。并設置新生成segue的identifier為showReview。

定義如何退出Review View Controller

在Navigation Controller中自帶了返回按鈕，這邊需要自己設置unwind segue。

• 在Review View Controller中的UIView的右上角添加一個關閉按鈕，類似于對勾按鈕，添加右上和寬度高度約束。

• 為了實現(xiàn)unwind segue，需要做兩件事：
  首先，在返回的的視圖控制器（RestaurantDetailViewController）中定義一個方法，定義這個方法是為了告訴xcode這個segue是可以返回的。

    @IBAction func close(segue:UIStoryboardSegue) {
    }

其次在IB中關聯(lián)返回。control+drag關閉按鈕到Exit，選擇closeWithSegue:。

為背景圖片添加模糊效果

UIVisualEffectView

• 新建ReviewViewController繼承至UIViewController，關聯(lián)上面新建視圖控制器。
• 在ReviewViewController中添加背景圖片結(jié)構(gòu)，并關聯(lián)圖片。
  @IBOutlet var backgroundImageView: UIImageView!
• 在ReviewViewController的viewDidLoad中添加：

        let blurEffect = UIBlurEffect(style: .dark)
        let blurEffectView = UIVisualEffectView(effect: blurEffect)
        blurEffectView.frame = view.bounds
        backgroundImageView.addSubview(blurEffectView)

模糊效果有點像在要添加的視圖上面添加一個視圖(UIVisualEffectView)，這圖有模糊效果(UIBlurEffect)，模糊樣式通過UIBlurEffectStyle控制，有三種extraLight, light, dark。

模糊樣式：左為Light，右為Dark

實現(xiàn) UIView Animation

• 為準備實現(xiàn)動畫效果的UIView添加接口，并關聯(lián)。
  @IBOutlet var containerView: UIView!
  
• 定義初始狀態(tài)：在ReviewViewController的viewDidLoad中添加:
  containerView.transform = CGAffineTransform.init(scaleX: 0, y: 0)
• 定義介紹狀態(tài)：在ReviewViewController的viewDidAppear中添加：

    override func viewDidAppear(_ animated: Bool) {
        UIView.animate(withDuration: 0.3, animations: {
            self.containerView.transform = CGAffineTransform.identity
        })
    }

CGAffineTransform.identity表示原本設置的大小和位置狀態(tài)。

動畫的變化過程

Spring 動畫

只要修改一下結(jié)束狀態(tài)就可以了：

        UIView.animate(withDuration: 0.4, delay: 0.0, usingSpringWithDamping: 0.3, initialSpringVelocity: 0.2, options: .curveEaseInOut, animations: {
            self.containerView.transform = CGAffineTransform.identity
        }, completion: nil)

從上向下的動畫

只要修改一下初始狀態(tài)，把初始位置設置在上面即可：

        containerView.transform = CGAffineTransform.init(translationX: 0, y: -1000)

組合兩種變化

把containerView.transform = CGAffineTransform.init(translationX: 0, y: -1000)修改成：

let scaleTransform = CGAffineTransform.init(scaleX: 0, y: 0)
let translateTransform = CGAffineTransform.init(translationX: 0, y: -1000)
let combineTransform = scaleTransform.concatenating(translateTransform)
containerView.transform = combineTransform

Unwind Segues 和數(shù)據(jù)傳輸

在Review View中點擊三個不同評價按鈕也通過Unwind Segues返回并傳輸數(shù)據(jù)。

• 在RestaurantDetailViewController在添加另外一個unwind action方法。

@IBAction func ratingButtonTapped(segue: UIStoryboardSegue) {
}

• 分別對三個按鈕control+drag到Exit，選擇ratingButtonTappedWithSegue:，并分別把三個unwind segue的identifier改成 great good dislike。

• 在Restaurant中添加rating屬性： var rating = ""
• 更新 ratingButtonTapped(segue:)：

    @IBAction func ratingButtonTapped(segue: UIStoryboardSegue) {
        if let rating = segue.identifier {
            restaurant.isVisited = true
            
            switch rating {
            case "greate":
                restaurant.rating = "Absolutely love it! Must try."
            case "good":
                restaurant.rating = "Pretty good."
            case "dislike":
                restaurant.rating = "I don't like it."
            default:
                break
            }
        }
        tableView.reloadData()
    }

• 更新RestaurantDetailViewController的tableView(_:cellForRowAt:)中當fieldLabel為“Been here”的valueLabel的值：
  cell.valueLabel.text = (restaurant.isVisited) ? "Yes, I've been herebefore. (restaurant.rating)" : "No"

修改ReviewViewController中的圖片為相應的圖片

• 在ReviewViewController中添加一個屬性：
  var restaurant: Restaurant!

• 在RestaurantDetailViewController中添加prepare(for:sender:)方法，作為RestaurantDetailViewController到ReviewViewController的segue時調(diào)用，用于傳輸數(shù)據(jù)。

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "showReview" {
            let destinationController = segue.destination as! ReviewViewController
            destinationController.restaurant = self.restaurant
        }
    }

• 在ReviewViewController 中添加圖片接口。
  @IBOutlet var topImageView: UIImageView!
• 在ReviewViewController的viewDidLoad中顯示圖片：

        let image = UIImage(named: self.restaurant.image)
        backgroundImageView.image = image
        topImageView.image = image

為closeButton添加動畫效果

• 添加接口
  @IBOutlet var closeButton: UIButton!
• 在viewDieLoad中添加：
  closeButton.transform = CGAffineTransform.init(scaleX: 1000, y: 0)
• 在 viewDidAppear:添加：

        UIView.animate(withDuration: 0.5, delay: 0.5, usingSpringWithDamping: 0.7, initialSpringVelocity: 0.3, options: .curveEaseInOut, animations: {
            
            self.closeButton.transform = CGAffineTransform.identity
            
        }, completion: nil)

代碼

Beginning-iOS-Programming-with-Swift

說明

此文是學習appcode網(wǎng)站出的一本書 《Beginning iOS 10 Programming with Swift》 的一篇記錄

系列文章目錄

• 開始用Swift開發(fā)iOS 10 - 1 前言
• 開始用Swift開發(fā)iOS 10 - 2 Hello World！第一個Swift APP
• 開始用Swift開發(fā)iOS 10 - 3 介紹Auto Layout
• 開始用Swift開發(fā)iOS 10 - 4 用Stack View設計UI
• [開始用Swift開發(fā)iOS 10 - 5 原型的介紹]
• 開始用Swift開發(fā)iOS 10 - 6 創(chuàng)建簡單的Table Based App
• 開始用Swift開發(fā)iOS 10 - 7 定制Table Views
• 開始用Swift開發(fā)iOS 10 - 8 Table View和UIAlertController的交互
• 開始用Swift開發(fā)iOS 10 - 9 Table Row的刪除, UITableViewRowAction和UIActivityViewController的使用
• 開始用Swift開發(fā)iOS 10 - 10 Navigation Controller的介紹和Segue
• 開始用Swift開發(fā)iOS 10 - 11 面向?qū)ο缶幊探榻B
• 開始用Swift開發(fā)iOS 10 - 12 豐富Detail View和定制化Navigation Bar