动图

技术原理:

当你下拉scrollview的时候,会监听scrollview的contentOffset来调整头部背景图片的位置,通过CGAffineTransformMakeTranslation和CGAffineTransformScale实现头像的缩小。

具体代码实现:

-(void)willMoveToSuperview:(UIView *)newSuperview
{
[self.scrollView addObserver:self forKeyPath:@"contentOffset" options:(NSKeyValueObservingOptionNew) context:Nil];
self.scrollView.contentInset = UIEdgeInsetsMake(self.frame.size.height, ,, );
self.scrollView.scrollIndicatorInsets = self.scrollView.contentInset;
} -(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
CGPoint newOffset = [change[@"new"] CGPointValue];
[self updateSubViewsWithScrollOffset:newOffset];
} -(void)updateSubViewsWithScrollOffset:(CGPoint)newOffset
{ float destinaOffset = -;
float startChangeOffset = -self.scrollView.contentInset.top;
newOffset = CGPointMake(newOffset.x, newOffset.y<startChangeOffset?startChangeOffset:(newOffset.y>destinaOffset?destinaOffset:newOffset.y)); float subviewOffset = self.frame.size.height-;
float newY = -newOffset.y-self.scrollView.contentInset.top;
float d = destinaOffset-startChangeOffset;
float alpha = -(newOffset.y-startChangeOffset)/d;
float imageReduce = -(newOffset.y-startChangeOffset)/(d*);
self.subTitleLabel.alpha = alpha;
self.titleLabel.alpha = alpha;
self.frame = CGRectMake(, newY, self.frame.size.width, self.frame.size.height);
self.backImageView.frame = CGRectMake(, -0.5*self.frame.size.height+(1.5*self.frame.size.height-)*(-alpha), self.backImageView.frame.size.width, self.backImageView.frame.size.height); CGAffineTransform t = CGAffineTransformMakeTranslation(,(subviewOffset-0.35*self.frame.size.height)*(-alpha));
_headerImageView.transform = CGAffineTransformScale(t,
imageReduce, imageReduce); self.titleLabel.frame = CGRectMake(, 0.6*self.frame.size.height+(subviewOffset-0.45*self.frame.size.height)*(-alpha), self.frame.size.width, self.frame.size.height*0.2);
self.subTitleLabel.frame = CGRectMake(, 0.75*self.frame.size.height+(subviewOffset-0.45*self.frame.size.height)*(-alpha), self.frame.size.width, self.frame.size.height*0.1);
}

Demo分享:

GitHub:https://github.com/ianisme/CoolNavi

简单的代码实现的炫酷navigationbar的更多相关文章

  1. 【Android珍藏】推荐10个炫酷的开源库【转】

    感谢大佬:https://www.jianshu.com/p/d608f0228fd4 前言 技术群里面经常有人问到一些炫酷的UI效果实现方法,有时候我都是给一个相同或者相似效果的Github链接,有 ...

  2. 简单CSS3实现炫酷读者墙

    如题,给大家介绍和讲解几个常用的CSS3属性,并用到实处. 先看demo(请使用Chrome或者Firefox浏览,IE的靠边): 点此查看实例 觉得爽的可以继续阅读下面的知识点,感觉不爽的可绕行. ...

  3. 炫酷:一句代码实现标题栏、导航栏滑动隐藏。ByeBurger库的使用和实现

    本文已授权微信公众号:鸿洋(hongyangAndroid)原创首发. 其实上周五的时候已经发过一篇文章.基本实现了底部导航栏隐藏的效果.但是使用起来可能不是很实用.因为之前我实现的方式是继承了系统的 ...

  4. Android高级控件(四)——VideoView 实现引导页播放视频欢迎效果,超级简单却十分的炫酷

    Android高级控件(四)--VideoView 实现引导页播放视频欢迎效果,超级简单却十分的炫酷 是不是感觉QQ空间什么的每次新版本更新那炫炫的引导页就特别的激动,哈哈,其实他实现起来真的很简单很 ...

  5. 一款超级炫酷的编辑代码的插件 Power Mode

    今天偶尔发现了一款比较炫酷的插件,想让你们看看效果 打代码的时候会有非常炫酷的效果哟 因为我用的编辑器是VScode,所以我也只搞了搞VSCode中使用Power Mode的方法,如果你用的是别的编辑 ...

  6. iOS任何界面全屏炫酷倒计时,一句代码就够了

    概述 iOS全屏炫酷倒计时,任何界面只需要调用一句代码就能实现,支持定制倒计时数字.倒计时结束时显示的文本.支持倒计时播放图片.开始倒计时和结束倒计时的block和delegate回调.支持定制文本颜 ...

  7. WebGIS简单实现一个区域炫酷的3D立体地图效果

    1.别人的效果 作为一个GIS专业的,做一个高大上的GIS系统一直是我的梦想,虽然至今为止还没有做出一个理想中的系统,但是偶尔看看别人做的,学习下别人的技术还是很有必要的.眼睛是最容易误导我们的,有时 ...

  8. 炫酷实用的CSS3代码垂直手风琴菜单

    今天在微博上看到别人分享的代码,自己拿来自己保存着. 代码效果如下: 下面是源码: index.html <!DOCTYPE html> <html > <head> ...

  9. Sublime Text2 新建文件快速生成Html头部信息和炫酷的代码补全

    预备:安装emmet插件(previously known as Zen Coding) 方法一  package control法: 上一篇博客已经介绍了如何安装package control.打开 ...

随机推荐

  1. BZOJ 3563 DZY Loves Chinese

    Description 神校XJ之学霸兮,Dzy皇考曰JC. 摄提贞于孟陬兮,惟庚寅Dzy以降. 纷Dzy既有此内美兮,又重之以修能. 遂降临于OI界,欲以神力而凌♂辱众生. 今Dzy有一魞歄图,其上 ...

  2. HTTP 状态代码

    转自:https://support.google.com/webmasters/answer/40132 HTTP 状态代码 如果向您的服务器发出了某项请求要求显示您网站上的某个网页(例如,当用户通 ...

  3. 迅雷创始人程浩:创业公司5招做好内部创新(组建小型敢死队:一共3个人,一个产品经理,两个研发;腾讯做不做这个项目是一个伪命题;让用户来验证,而不是相反 good)

    欢迎关注“创事记”的微信订阅号:sinachuangshiji 文/程浩 编者按:本文首发于微信公众号“浩哥说”(ID:haogetalks),作者程浩,迅雷创始人.内容为作者在混沌AI成长营上的演讲 ...

  4. lc面试准备:Repeated DNA Sequences

    1 题目 All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: &quo ...

  5. wcf中的File-less Activation

    File-less Activation Although .svc files make it easy to expose WCF services, an even easier approac ...

  6. bzoj3083 3306

    又见bzoj的语言歧视,囧……bzoj3083过了本地的数据在上面出现各种奇葩的TLE835083 phile 3083 Time_Limit_Exceed 17092 kb 4872 ms Pasc ...

  7. 【异步编程】when.js

    异步编程:When.js快速上手 var api = 'http://qgy18.imququ.com/file/when/d.php?cb=?'; var getData = function() ...

  8. MongoDB 权限管理 用户名和密码的操作

    在刚安装完毕的时候MongoDB都默认有一个admin数据库,而admin.system.users中将会保存比在其它数据库中设置的用户权限更大的用户信息.  当admin.system.users中 ...

  9. 【转】patch命令

    原文网址:http://bbs.chinaunix.net/thread-1945698-1-1.html patch给文件1应用补丁文件变成另外一个文件2(需要先用"diff 文件1 文件 ...

  10. 出现 HTTP Error 503. The service is unavailable 错误

    今天修改一些配置后重启了IIS,兴高采烈的按下了回车.duang一下,HTTP Error 503. The service is unavailable,蹦出这行字,网站挂了. 没动别的竟然这样了. ...