动图

技术原理:

当你下拉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. .Net Remoting浅释

    面试的时候,被问到.Net Remoting 工作方式及它和Web Service的区别,在此做个整理,顺便回顾一下. .Net Remoteing: 我们可以认为.Net Remoting是一种分布 ...

  2. iOS:等待控件

    定义: @interface ViewController () { UIActivityIndicatorView *testActivityIndicator; } 实例化,开始旋转: -(voi ...

  3. theano中的concolutional_mlp.py学习

    (1) evaluate _lenet5中的导入数据部分 # 导入数据集,该函数定义在logistic_sgd中,返回的是一个list datasets = load_data(dataset) # ...

  4. python相关的工具

    在使用python的时候,发现Adaconda工具包真的很不错,里面集合了很多的工具,并且,自带了很多的python常用模块 另外,PyCharm编辑器也是不错的,界面清晰,可以实现数据的可视化

  5. 双缓冲技术(Double Buffering)(1、简介和源代码部分)

    这一节实在是有些长,翻译完后统计了一下,快到2w字了.考虑到阅读的方便和网络的速度,打算把这节分为5个部分,第一部分为双缓冲技术的一个 简介和所有的代码,如果能够看懂代码,不用看译文也就可以了.第二部 ...

  6. Android开源项目发现--- 工具类网络相关篇(持续更新)

    1. Asynchronous Http Client for Android Android异步Http请求 项目地址:https://github.com/loopj/android-async- ...

  7. java中执行js代码

    要在java中执行js代码,首先明白,java不支持浏览器本身的方法.支持自定义的js方法,否则会报错 先新建一个js文件:jsss.js 内容如下: function aa(a,b){ return ...

  8. shell 执行jar 的命令

    #!/bin/sh ############## #判断是否程序已启动 jappname='Test' mainclasspath="com.company.commontest.test& ...

  9. Linux学习笔记6——映射虚拟内存

    使用到两个函数mmap:用于分配内存:munmap:用于释放内存. mmap的原型如下: void *mmap(    void *start,   //指定映射的虚拟地址 0由系统指定开始位置    ...

  10. bzoj 2819 Nim(BIT,dfs序,LCA)

    2819: Nim Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 1596  Solved: 597[Submit][Status][Discuss] ...