前言
最近使用字幕侠的网页资源写了个小应用,并为应用中的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会立即执行动画而不会出现延迟.
只要将动画执行相关代码写入以上两个代理方法中,我们可以去实现很多其他的诸如透明度/模糊渐变等简单的动画效果.
