TableView和CollectionView在開發產品中使用非常頻繁，不管是獨立使用還是組合使用，掌握它們都是所有iOS開發者必備的技能。
今天為大家來分享我使用它們時，如何實現動效的？內容分兩部分：
1.載入動效
2.點選動效
一、載入Cell的動效
當元件載入時，為了讓頁面顯得動感有趣，可以為TableView、CollectionView整體新增動效。
主要用到的方法是：UIView.animate
方案一，Cell逐個呈現，例如OneDay的首頁載入。
實現方法是在TableView載入後增加整體的動效，通過迴圈和延遲，讓每個Cell從不同的時間開始經歷相同的時間動效結束。
函式程式碼：
func animateTable() {
let cells = HomeTableView.visibleCells
let tableHeight: CGFloat = HomeTableView.bounds.size.height
for (index, cell) in cells.enumerated() {
cell.transform = CGAffineTransform(translationX: 0, y: tableHeight)
UIView.animate(withDuration: 1.0, delay: 0.05 * Double(index), usingSpringWithDamping: 0.8, initialSpringVelocity: 0, options: [], animations: {
cell.transform = CGAffineTransform(translationX: 0, y: 0);
}, completion: nil)
}
}
複製程式碼在ViewWillAppear中呼叫：
override func viewWillAppear(_ animated: Bool) {
super.viewDidAppear(animated)
self.animateTable()
}
複製程式碼方案二，Cell同時呈現，例如OneClock的選單載入。
實現方式是在Collectionview載入後，為整體增加動效，因為不需要做延遲處理，所以可以直接以CollectionView整體做動效。
函式程式碼：
func animateAll(){
let animateView = self.SettingCollection
let btnHeight:CGFloat = self.SettingCollection.bounds.size.height
print(btnHeight)
animateView?.transform = CGAffineTransform(translationX: 0, y: 80)
UIView.animate(withDuration: 1.0, delay: 0.0, usingSpringWithDamping: 0.8, initialSpringVelocity: 0, options: [], animations: {
animateView?.transform = CGAffineTransform(translationX: 0, y: 0);
}, completion: nil)
}
複製程式碼在ViewWillAppear中呼叫:
override func viewWillAppear(_ animated: Bool) {
self.SettingCollection.reloadData()
self.animateAll()
}
複製程式碼二、點選Cell的動效
TableView 和 CollectionView 在被點選時可以新增一定的動效，同時在點選完成後我們需要恢復最初始的狀態。
用到的方法是：didHighlightItemAt、didUnhighlightItemAt、CGAffineTransform
Tablview的點選效果，例如OneDay的列表點選。
實現程式碼：
func tableView(_ tableView: UITableView, didHighlightRowAt indexPath: IndexPath) {
let cell = tableView.cellForRow(at: indexPath) as! CustomTableViewCell
UIView.beginAnimations(nil, context: nil)
UIView.setAnimationDuration(0.2) //設定動畫時間
cell.transform = CGAffineTransform(scaleX: 0.9, y: 0.9)
UIView.commitAnimations()
}
複製程式碼func tableView(_ tableView: UITableView, didUnhighlightRowAt indexPath: IndexPath) {
let cell = tableView.cellForRow(at: indexPath) as! CustomTableViewCell
UIView.beginAnimations(nil, context: nil)
UIView.setAnimationDuration(0.2) //設定動畫時間
cell.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
UIView.commitAnimations()
}
複製程式碼Collection的點選效果，例如OneClock的選單點選。
實現程式碼：
func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) {
let cell = collectionView.cellForItem(at: indexPath) as! SettingCollectionViewCell
cell.WidthCons.constant = 10
cell.HeightCons.constant = 10
}
複製程式碼func collectionView(_ collectionView: UICollectionView, didUnhighlightItemAt indexPath: IndexPath) {
let cell = collectionView.cellForItem(at: indexPath) as! SettingCollectionViewCell
cell.WidthCons.constant = 0
cell.HeightCons.constant = 0
}
複製程式碼推薦大家使用比較平滑的方式實現，如果直接修改大小，點選效果顯得非常生硬。
Github：OneSwift - iOS Tips Based On Swift
微博：xDEHANG