如何給TableView、CollectionView添加動效

OneSwift - iOS Tips Based On Swift

TableView和CollectionView在開發產品中使用很是頻繁，無論是獨立使用仍是組合使用，掌握它們都是全部iOS開發者必備的技能。

今天爲你們來分享我使用它們時，如何實現動效的？內容分兩部分：

1.加載動效

2.點擊動效

1、加載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()

}
複製代碼

2、點擊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