为UITableView和UICollectionView添加简单的点击动画

2018-03-30

前言

最近使用字幕侠的网页资源写了个小应用,并为应用中的UITableView和UICollectionView实现了两个简单的动画效果,如图

GIF

实现

UITableView

override func tableView(_ tableView: UITableView, didHighlightRowAt indexPath: IndexPath) {
        let cell = tableView.cellForRow(at: indexPath)
        UIView.animate(withDuration: 0.2) {
            cell?.transform = CGAffineTransform(scaleX: 0.9, y: 0.9)
        }
    }
    
    override func tableView(_ tableView: UITableView, didUnhighlightRowAt indexPath: IndexPath) {
        let cell = tableView.cellForRow(at: indexPath)
        UIView.animate(withDuration: 0.2) {
            cell?.transform = CGAffineTransform(scaleX: 1, y: 1)
        }
    }

在适当的时机调用这个方法,让当前可见的cell以动画的形式出现.
private func animateTableView() {
        let cells = tableView.visibleCells
        let tableHeight: CGFloat = tableView.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)
        }

}

UICollectionView


func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) {
        let cell = collectionView.cellForItem(at: indexPath) 
        UIView.animate(withDuration: 0.2) {
            cell.transform = CGAffineTransform(scaleX: 0.9, y: 0.9)
        }
}
    
func collectionView(_ collectionView: UICollectionView, didUnhighlightItemAt indexPath: IndexPath) {
        let cell = collectionView.cellForItem(at: indexPath)         		UIView.animate(withDuration: 0.2) {
            cell.transform = CGAffineTransform(scaleX: 1, y: 1)
        }
}

注意

UITableView的处理中,在这两个didHighlight 和 didUnHightlight 方法中, 获取对应的cell应该使用cellForRow(at: indexPath),而不是使用dequeueReusableCell(withIdentifier: , for: indexPath),否则会出现错误,原因如下.

UICollectionView同理.

Attempted to dequeue multiple cells for the same index path, which is not allowed. If you really need to dequeue more cells than the table view is requesting, use the -dequeueReusableCellWithIdentifier: method (without an index path).

这会尝试从相同的indexPath中寻找多个cell,因而报错.

拓展

当点击tableView或者collectionView的cell时,往往伴随着跳转页面等其他操作,这时候点击cell产生的高亮状态动画或许还没有执行完成页面就已经发生了跳转,导致动画展示不完全.这是因为延迟导致,我们可以设置tableView 或者 collectionView的delaysContentTouches属性为false,关闭content对触摸行为的响应延迟,这时候点击cell会立即执行动画而不会出现延迟.

只要将动画执行相关代码写入以上两个代理方法中,我们可以去实现很多其他的诸如透明度/模糊渐变等简单的动画效果.

参考

如何给TableView、CollectionView添加动效