前言
SWIFT.png
demo由Swift编写。
即使是同一个App内，也会经常是几种TableViewheader的动画共存，场景如下：
- 下拉TableView
- Header按照水平或者垂直方向放大。
- Header跟随TableView滚动。
- 上划TableView
- Header保持不动。
- Header跟随TableView上划同步向上移动。
- Header跟随TableView上划但位移与TableView不同步，有折叠效果。
如下图:
WeChat.gif
在优品财富、支付宝、陌陌等App中都使用了这种Header的动画效果。有兴趣的可以点击下载
其中有一个比较有意思的是折叠效果，下面简单说一下它的实现原理。
// 所有的可以执行动画的Header其实都不是self.tableView.tableHeaderView 具体如下
// 创建一个View
let view = UIView.init(frame: CGRect.init(x:0, y:0, width:self.frame.width, height:settingInfo.headerViewActualHeight))
view.backgroundColor = UIColor.clear
self.tableHeaderView = view
// 再创建一个用于执行动画的header
topView?.frame = CGRect.init(x:0, y:-settingInfo.headerViewHiddenHeight, width:originWidth, height:settingInfo.headerViewHiddenHeight * 2 + settingInfo.headerViewActualHeight)
// 将topView添加到tableView上作为第一个视图
self.insertSubview(topView!, at: 0)
// 监听到UITableView的滚动 然后改变header的frame的y 等于TableView的contentOffset.y的值一半即可
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let contentOffSetY = scrollView.contentOffset.y
if contentOffSetY < settingInfo.headerViewActualHeight && contentOffSetY > 0 {
topView?.frame = CGRect.init(x:0, y:-settingInfo.headerViewHiddenHeight + contentOffSetY * 0.5, width:topView!.frame.width, height:(topView?.frame.height)!)
} else if contentOffSetY <= 0 && contentOffSetY >= -settingInfo.headerViewHiddenHeight * 2.0 {
topView?.frame = CGRect.init(x:0, y:-settingInfo.headerViewHiddenHeight + contentOffSetY / 2.0, width:self.originWidth, height:self.originHeight)
}
}
