動畫是通過一系列靜態(tài)圖片（幀）快速顯示來模擬動作和形狀的變化過程。
在iOS中，創(chuàng)建基礎動畫很簡單，只需要利用UIView的類型方法：animate(withDuration:animations:)。這個方法的原理就是，設置好開始狀體和結束狀態(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中添加背景圖片結構，并關聯(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。
實現(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 動畫
只要修改一下結束狀態(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改成greatgooddislike。
- 在
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 面向對象編程介紹
- 開始用Swift開發(fā)iOS 10 - 12 豐富Detail View和定制化Navigation Bar
