本文是Intermediate iOS 11 Programming with Swift 4系列?的 第 三 篇.
當(dāng)您閱讀本章時(shí)腾降，我假設(shè)您已經(jīng)知道如何使用UITableView來顯示數(shù)據(jù)。如果沒有的話碍论，回去看看《Swift book》的iOS 11編程入門
UITableView類提供了一種以表形式顯示信息的強(qiáng)大方式寒砖，它是iOS應(yīng)用程序中最常用的組件之一赐劣。無論你是在構(gòu)建一個(gè)“應(yīng)用程序”、“待辦事項(xiàng)應(yīng)用程序”還是“社交應(yīng)用程序”哩都，你都可以用一種或另一種形式來使用表格視圖魁兼。UITableView的默認(rèn)實(shí)現(xiàn)是初步的，只適用于基本的應(yīng)用茅逮。為了將應(yīng)用程序與其他應(yīng)用程序區(qū)分開來璃赡，您通常為表視圖和表單元格提供定制，以便使應(yīng)用程序脫穎而出献雅。
在本章中碉考，我將向您展示一種強(qiáng)大的技術(shù)，通過添加微妙的動(dòng)畫來活躍您的應(yīng)用程序挺身。多虧了內(nèi)置的api侯谁。對(duì)表視圖單元格進(jìn)行動(dòng)畫處理非常簡單。同樣章钾，為了演示動(dòng)畫是如何完成的墙贱，我們將調(diào)整一個(gè)現(xiàn)有的基于表格的應(yīng)用程序并添加一個(gè)微妙的動(dòng)畫。
首先贱傀，從這里下載項(xiàng)目模板惨撇。下載后，編譯應(yīng)用程序府寒，確保你能正確運(yùn)行它魁衙。它只是一個(gè)顯示文章列表的非常簡單的應(yīng)用程序报腔。
為表視圖單元格創(chuàng)建一個(gè)簡單的漸隱動(dòng)畫
讓我們首先對(duì)基于表的應(yīng)用程序進(jìn)行調(diào)整，使其具有簡單的漸隱效果剖淀。那么纯蛾，當(dāng)表行出現(xiàn)時(shí)，我們?nèi)绾翁砑舆@個(gè)微妙的動(dòng)畫呢? ?如果您查看UITableViewDelegate協(xié)議的文檔纵隔，您應(yīng)該找到一個(gè)名為tableView(_:willDisplay:forRowAt:)的方法:
optional func tableView(_ tableView: UITableView,
? ? ? ? ? willDisplay cell: UITableViewCell,
? ? ? ? ? ? forRowAt indexPath: IndexPath)
方法將在繪制行之前被調(diào)用翻诉。通過實(shí)現(xiàn)該方法，您可以自定義單元格對(duì)象捌刮，并在顯示單元格之前添加您自己的動(dòng)畫碰煌。以下是創(chuàng)建漸隱效果所需的內(nèi)容。在ArticleTableViewController.swift中插入代碼片段:
override func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
? ? // Define the initial state (Before the animation)
? ? cell.alpha = 0
? ? // Define the final state (After the animation)
? ? UIView.animate(withDuration: 1.0, animations: { cell.alpha = 1 })
}
Core Animation為iOS開發(fā)人員提供了一種創(chuàng)建動(dòng)畫的簡單方式绅作。您需要做的就是定義可視化元素的初始和最終狀態(tài)拄查。Core Animation隨后將找出這兩種狀態(tài)之間所需的動(dòng)畫。
在上面的代碼中棚蓄，我們首先將單元格的初始alpha值設(shè)置為0，這表示完全透明碍脏。然后我們開始動(dòng)畫;將持續(xù)時(shí)間設(shè)置為1秒梭依，并定義單元格的最終狀態(tài)，完全不透明典尾。這將在表單元格出現(xiàn)時(shí)自動(dòng)創(chuàng)建漸隱效果役拴。
現(xiàn)在可以編譯和運(yùn)行應(yīng)用程序了。
使用CATransform3D創(chuàng)建旋轉(zhuǎn)效果
容易,對(duì)吧?只需幾行代碼钾埂，您的應(yīng)用程序看起來就與基于表格的標(biāo)準(zhǔn)應(yīng)用程序有點(diǎn)不同河闰。tableView(_:willDisplay:forRowAt:)方法是實(shí)現(xiàn)表格視圖單元格動(dòng)畫的關(guān)鍵。您可以在方法中實(shí)現(xiàn)任何類型的動(dòng)畫褥紫。
漸隱動(dòng)畫就是一個(gè)例子〗裕現(xiàn)在讓我們嘗試使用CATransform3D實(shí)現(xiàn)另一個(gè)動(dòng)畫。別擔(dān)心髓考，你只需要幾行代碼部念。
若要將旋轉(zhuǎn)效果添加到表單元格，請(qǐng)更新如下方法:
override func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
? ? // Define the initial state (Before the animation)
? ? let rotationAngleInRadians = 90.0 * CGFloat(Double.pi/180.0)
? ? let rotationTransform = CATransform3DMakeRotation(rotationAngleInRadians, 0, 0, 1)
? ? cell.layer.transform = rotationTransform
? ? // Define the final state (After the animation)
? ? UIView.animate(withDuration: 1.0, animations: { cell.layer.transform = CATransform3DIdentity })
}
與前面一樣氨菇，我們定義轉(zhuǎn)換的初始和最終狀態(tài)儡炼。一般的想法是我們先順時(shí)針旋轉(zhuǎn)90度，然后把它恢復(fù)到正常的方向查蓉，也就是最終的狀態(tài)乌询。
好的，但是我們?cè)趺茨茼槙r(shí)針旋轉(zhuǎn)90度的表格單元呢?
關(guān)鍵是使用CATransform3DMakeRotation函數(shù)來創(chuàng)建旋轉(zhuǎn)變換豌研。函數(shù)有四個(gè)參數(shù):
弧度的角度——這是旋轉(zhuǎn)的角度妹田。由于角度是弧度唬党，我們首先需要把角度轉(zhuǎn)換成弧度。
? ? ? ? x軸-這是從屏幕左邊到屏幕右邊的軸秆麸。
? ? ? ? y軸——這是從屏幕頂部到屏幕底部的軸初嘹。
? ? ? ? z軸-這是指向屏幕外的軸"
由于旋轉(zhuǎn)是圍繞Z軸的，我們將這個(gè)參數(shù)的值設(shè)為1沮趣，而將X軸和Y軸的值設(shè)為0屯烦。一旦我們創(chuàng)建轉(zhuǎn)換，它就被分配給單元格的層房铭。
接下來驻龟，我們開始動(dòng)畫的持續(xù)時(shí)間為1秒。單元格的最終狀態(tài)被設(shè)置為CATransform3DIdentity缸匪，它將把單元格重置為原始位置翁狐。
好了，點(diǎn)擊運(yùn)行來測試這個(gè)應(yīng)用程序!
提示:你可能想知道CATransform3D是什么凌蔬。它實(shí)際上是一個(gè)表示矩陣的結(jié)構(gòu)露懒。在三維空間中進(jìn)行旋轉(zhuǎn)等變換涉及到一些矩陣的計(jì)算。我不會(huì)講矩陣計(jì)算的細(xì)節(jié)砂心。如果你想了解更多懈词，你可以查看這里.
用CATransform3DTranslate創(chuàng)建一個(gè)飛行的效果。
旋轉(zhuǎn)效果看起來很酷嗎?您可以進(jìn)一步調(diào)整動(dòng)畫以使其更好辩诞。嘗試更改tableView(_:willDisplay:forRowAt:)方法坎弯，并使用以下代碼行替換rotationTransform的初始化:
let rotationTransform = CATransform3DTranslate(CATransform3DIdentity, -500, 100, 0)
代碼行只是轉(zhuǎn)換或移動(dòng)單元格的位置。它表示單元格向左移動(dòng)了500點(diǎn)(負(fù)值)译暂，向下移動(dòng)了100點(diǎn)(正值)抠忘。Z軸沒有變化。
現(xiàn)在你可以再次測試這個(gè)應(yīng)用了外永。點(diǎn)擊“運(yùn)行”按鈕崎脉，就可以玩“飛行”了
現(xiàn)在，每當(dāng)您在表格中滾動(dòng)時(shí)象迎，單元格動(dòng)畫都會(huì)顯示出來荧嵌，無論您是向下滾動(dòng)還是向上滾動(dòng)表格視圖±剩”雖然動(dòng)畫很不錯(cuò)啦撮，但是如果動(dòng)畫顯示得太頻繁，用戶會(huì)覺得很煩人汪厨。您可能只希望在單元格第一次出現(xiàn)時(shí)顯示動(dòng)畫赃春。嘗試修改現(xiàn)有的項(xiàng)目并添加該限制。
總結(jié)
在本章中劫乱，我向您展示了表格單元?jiǎng)赢嫷幕A(chǔ)知識(shí)织中。嘗試更改轉(zhuǎn)換的值锥涕，看看會(huì)得到什么效果。
可以在這里查看原作者的項(xiàng)目.
