前言
即使是同一个App内,也会经常是几种TableViewheader的动画共存,场景如下:
下拉TableView
Header按照水平或者垂直方向放大。
Header跟随TableView滚动。
上划TableView
Header保持不动。
Header跟随TableView上划同步向上移动。
Header跟随TableView上划但位移与TableView不同步,有折叠效果。
如下图:
在优品财富、支付宝、陌陌等App中都使用了这种Header的动画效果。有兴趣的可以去github下载
觉得能帮助你的话,记得给我一颗✨✨星星;
其中有一个比较有意思的是折叠效果,下面简单说一下它的实现原理。
// 所有的可以执行动画的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) } },开题报告,开题报告