UITableViewHeader常见的动画实现

前言

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)
        }
}