登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

UITableViewHeader animation

[复制链接]
来自: xuelin2048 分类: iOS精品源码 上传时间: 2017-5-13 14:18:43
Tag:

项目介绍:

前言

即使是同一个App内,也会经常是几种TableViewheader的动画共存,场景如下:

  • 下拉TableView

    • Header按照水平或者垂直方向放大。

    • Header跟随TableView滚动。

  • 上划TableView

    • Header保持不动。

    • Header跟随TableView上划同步向上移动。

    • Header跟随TableView上划但位移与TableView不同步,有折叠效果。

如下图:

hello.gif

在优品财富、支付宝、陌陌等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)
        }
}

相关源码推荐:

    我来说两句
    *滑动验证:
    所有评论(5)
    code4app热心网友 2017-5-20 15:58:25
    正需要啊,感谢楼主无私分享!
    回复
    code4app热心网友 2017-5-20 17:26:29
    精华内容,楼主V5!
    回复
    code4app热心网友 2017-5-22 11:25:32
    淡定,淡定,淡定……
    回复
    lirui50300 2017-5-22 13:38:13
    很给力,Code4App有你更精彩!
    回复
    lirui50300 2017-5-22 13:40:38
    很给力,Code4App有你更精彩!
    回复
    code4app热心网友 2017-5-22 13:59:01
    楼主用心了,内容非常精彩。
    回复
    bhjhua 2017-5-22 14:49:08
    强烈支持楼主ing……
    回复
    code4app热心网友 2017-5-22 15:03:05
    精华内容,楼主V5!
    回复
    yejj 2017-5-22 22:40:00
    强烈支持楼主ing……
    回复
    提取码:  下载次数:66 状态:已购或VIP 售价:0(原价:10)金钱 下载权限:初级码农 
    538 0 66
    相关代码
      联系我们
      首页/微信公众账号投稿

      帖子代码编辑/版权问题

      QQ:435399051,742864542

      如何获得代码达人称号?

      代码贡献英雄榜
      用户名 下载数
      代码分类
      通过邮件订阅最新 Code4App 信息
      上一条 /4 下一条
      联系我们
      关闭
      合作电话:
      13802416937
      Email:
      435399051@qq.com
      商务市场合作/投稿
      问题反馈及帮助
      联系我们

      广告投放| Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

      快速回复 返回顶部 返回列表