今天看了一个 IOS 的应用，发现有些效果挺炫的，想模仿下，求指导啊

登录后第一个界面，首页导航栏是透明的，随着 view 上滑， View 中的一个按钮也移动到导航栏上，导航栏也变得不透明了，请问这个是如何实现的，主要是按钮也随着移动而缩小，最后到导航栏上。
http://ww3.sinaimg.cn/large/721c0e13jw1evw6516sccg20hs0vkb29.gif

第二个就是向下滑动的时候，出现的图片依次缩小再放大，如果滑动快有这个效果，慢慢划动无此效果，请问这个又是如何实现的，求指导啊
http://ww1.sinaimg.cn/large/721c0e13jw1evw65iaog4g20hs0vk4nc.gif

导航

view

滑动

请问

50 条回复 • 2015-09-12 16:13:02 +08:00

iamjjh

2015-09-09 14:29:03 +08:00

求指导啊

wujichao

2015-09-09 15:29:32 +08:00

那个导航栏估计不是系统自带的
要是系统自带的话那个按钮在层级上就要在导航栏之上

iOSSer

2015-09-09 15:43:05 +08:00

应该不是系统的 nav,是 view

iamjjh

2015-09-09 16:00:57 +08:00

@iOSSer 但是滚动上去有导航条啊

NovemberEleven

2015-09-09 16:08:15 +08:00

第一个我想到的是，移动的时候改变 navigationbar 的透明度，再再 navigationcontroller.view 里面加一个大的加号， scrollview 滚动的时候，移动缩放加号，当位置去到 navigationbar 中间的时候，把 navigationbar 的加号显示，再把移动的加号隐藏。

NovemberEleven

2015-09-09 16:09:28 +08:00

另外楼主用什么录屏工具？

ahu

2015-09-09 16:14:03 +08:00

豌豆荚 android 版我记得就是这样的

yellowV2ex

2015-09-09 16:19:45 +08:00

1. 应该是看上去像导航条的 uiview 而已，目测这样实现最简单了，保持在上方不动可以写在 `scrollViewDidScroll` 里
2. tableview 有个叫 `willDisplayCell` 的，可以在这里面写 cell 出来时的动画

其实你看到的这些效果，有一万种实现方法，不一定完全按照教科书的方式去做，按照自己的编码习惯，熟悉的 API 和自己的水平去自己感受，慢慢写出来。其实就算别人实现了，你把代码复制过去，自己不理解的话，这样虽然东西是做出来了，但自己完全没有进步，下次叫你做个一样的效果，你只能找回之前的代码复制过去，那么你做过的东西真的就会了吗？

没关系的，自己慢慢摸索，慢慢进步，不要虚不要燥，争取在初学阶段，打下一些真正的基础。

iamjjh

2015-09-09 16:26:23 +08:00

@NovemberEleven 用的 itools 录的视频，然后转的 gif

iamjjh

2015-09-09 16:27:16 +08:00

@yellowV2ex 多谢指导

holy_sin

2015-09-09 16:29:15 +08:00

太炫酷了

iamjjh

2015-09-09 16:32:06 +08:00

@yellowV2ex 这个控制器的结构是一个 scrollView ，最上方一个 View （导航条），按钮那部分整个是个 View ，然后下面的是 tableView 吗？用 tableview 的 headerView 和 SectionHeader 代替上部和中键的 View 实现起来是否回简单点？

CareiOS

2015-09-09 16:35:17 +08:00

App 叫什么名字？我也下来研究一下。

joying

2015-09-09 16:36:41 +08:00

用 ScrollView 的委托事件，监测 ScrollView 的 contentOffset ，随着 contentOffset.y 的变化，改变 Button 的 transform ， NavigationBar 应该是自定义的，层级 index 小于 Button 的。

yellowV2ex

2015-09-09 16:42:10 +08:00

@iamjjh tableview 其实也是个 scrollView ，这种列表的东西还是 tableview 比较好，因为帮你写了很多 cell 重用的东西，最上面那部分可以用 headerView ，但那个加号肯定是所有东西的最上层的，如果要平滑过渡到那个顶部区域的话，还是独立浮着比较好，当然你要说包括加号和上面的所有东西都放到一个很高的 SectionHeader 里也不是不行，完全按照这个范例的话也是可以实现的。
但以后如果下面的 tableview 要加些分类啊什么的就比较麻烦了，按照这个 UI 的设计逻辑，顶部应该是一个独立 view 做独立的控制，而不应该跟下面的 tableview 混在一起。

//

你可以在 UITableViewController 里写一个 [self.view bringSubviewToFront:topView];
然后在 - (void )scrollViewDidScroll:(UIScrollView *)scrollView 里写 topView.top = scrollView.contentOffset.y;
这样 topView 就会保持在上面了，然后根据滑动的 contentOffset.y 再来变这个 view 里的东西

yellowV2ex

2015-09-09 16:44:19 +08:00

纠正一下，[self.view bringSubviewToFront:topView]; 换 [self.view addSubview:topView];

finab

2015-09-09 16:46:30 +08:00

用 Reveal 看下他的页面结构。。
我经常用这个看国内大的 APP 的结构偷师。。

ianisme

2015-09-09 17:07:32 +08:00

https://github.com/ianisme/CoolNavi
我的开源项目不谢

hinate

2015-09-09 17:16:55 +08:00 via Android

楼上原著已出现 😁

lk920724

2015-09-09 17:19:56 +08:00

scrollView 的偏移 = =

SourceMan

2015-09-09 17:28:13 +08:00

@ianisme 以前帖子说的抄袭的，建议加上个 license 哦

ianisme

2015-09-09 17:29:28 +08:00

@SourceMan 我抄袭？

ianisme

2015-09-09 17:31:13 +08:00

@SourceMan 哦哦，明白了多谢提醒我的所有项目都没加 license 。。。

Madeline

2015-09-09 17:34:13 +08:00

之前实现过，根据 scrollview 的 offset 换算成 nav bar 背景图的 alpha 。

skxs067

2015-09-09 17:34:19 +08:00

@ianisme 是说, 如果你原创的话可以加个声明

ieliwb

2015-09-09 17:34:46 +08:00

华而不实的效果

ianisme

2015-09-09 17:34:56 +08:00

@skxs067 谢谢提醒

Elethom

2015-09-09 18:06:53 +08:00

@ianisme
寫得好爛。

codecrash

2015-09-09 20:23:01 +08:00

世界真小

qq2511296

2015-09-09 22:40:02 +08:00

另外简书的 app 里面个人中心跟这个页面差不多

qq2511296

2015-09-09 22:43:17 +08:00

@Elethom
别这样打击别人嘛
来你写个优雅的

iamjjh

2015-09-10 08:28:35 +08:00

@yellowV2ex 感谢指导

iamjjh

2015-09-10 08:28:53 +08:00

@ianisme 多谢，学习了

Mysdes

2015-09-10 09:51:22 +08:00

@Elethom 哈哈哈哈哈哈，闹

zichen0422

2015-09-10 10:33:43 +08:00

学习了.

Elethom

2015-09-10 11:01:04 +08:00

@qq2511296
@Mysdes
怎麼了？寫得確實挺爛的。

ianisme

2015-09-10 11:20:42 +08:00

@Elethom 有哪些烂的点，希望您能指出，我可以多学习，多谢！

kobe1941

2015-09-10 13:25:34 +08:00

https://itunes.apple.com/us/app/wei-cai-kan-gu-piao-shi-shi/id590228830?mt=8

这个 app 有这个效果，目测都是仿推特的

iOSSer

2015-09-10 14:59:34 +08:00

把头像加在 window 上，然后通过 scrollview 的偏移量去控制头像位置和导航栏透明度~

iamjjh

2015-09-11 09:31:48 +08:00

@CareiOS 搜布

iamjjh

2015-09-11 09:33:02 +08:00

@iOSSer 导航栏的透明度变化不会导致导航栏上面按钮的透明度也变化吗

CareiOS

2015-09-11 13:03:21 +08:00

@iamjjh 他的思路是，将头像那个 UIImageView 放到 UIWindow 上，而 UINavigationController 的 view 与 UIImageView 是兄弟关系。所以不会相互影响。

iamjjh

2015-09-11 13:05:21 +08:00

@CareiOS 我给的 gif 图导航栏上还有两个图标啊

CareiOS

2015-09-11 13:22:26 +08:00

@iamjjh 这儿有一个开源的两个图标不会影响。你可以看看 https://github.com/ondev/LTNavigationBar

iamjjh

2015-09-11 13:35:05 +08:00

@CareiOS 十分感谢~~

Elethom

2015-09-11 17:50:32 +08:00 via iPhone

@ianisme
整個思路就是錯的，更別提語言層面上還犯了很多非常低級的錯誤。

ianisme

2015-09-11 22:47:48 +08:00

@Elethom 关于语言层面的错误，希望您多多指教，我想知道是哪里有问题？
谢谢！

Elethom

2015-09-12 11:53:46 +08:00

@ianisme

比如說 scroll view 用了 strong 而不是 weak 之類的，具體沒怎麼看。

思路上的主要問題有兩個。第一是 navigation bar 不應該隱藏，而是應該設置成透明並且自己做一個全局的 background 來代替，這樣就不會影響到和 navigation bar 相關的 transitions ；第二是 header 本身的參數，你這個樣子遇到一個特殊一點的 frame 就不行了，包括收到電話、後台導航等情況 status bar 的 frame 變化，以及屏幕旋轉，或者是在一個 container 內 frame 發生改變的時候，都會跪。另外我很喜歡做類似設計，但自己很不樂意寫的另一個原因，就是 iOS 7 和 iOS 8 對多個 affine transform 疊加的處理有時是不同的，要判斷版本，很煩。

說直接了可能不太好聽，不過你的代碼值得參考的地方都基本沒有。就這樣。

Elethom

2015-09-12 11:54:10 +08:00

@ianisme
喔對，還有版本控制，你真的應該回去補一下基礎。

ianisme

2015-09-12 16:13:02 +08:00

@Elethom 受教了， 3Q