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

2015-09-09 14:09:42 +08:00
 iamjjh

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

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

6838 次点击
所在节点    iDev
50 条回复
iamjjh
2015-09-09 14:29:03 +08:00
求指导啊
CDuXZMAPgHp1q9ew
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
楼上原著已出现 😁
lk920724
2015-09-09 17:19:56 +08:00
scrollView 的偏移 = =

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/219363

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX