原文連接:http://qilei.org/2014/sweet-designs-in-weixin-6/css
更新微信6.0已經有一週時間了
相信大部分人關心的是小視頻功能,以及底部tab配色等顯而易見的變化。git
不過既然是大版本,仍是有不少微小的變化回味無窮。github
細心的人會發現6.0的頂部新增了一些iOS7中的半透毛玻璃效果(不知道安桌用戶可否體會到 =,=)
這個效果讓人很是舒心,一點漸變效果疊加到毛玻璃效果上,相比以前的純色漸變
,科技感十足。xcode
固然讚揚之餘,對其實現方法也研究了一番,微信
首先是毛玻璃效果,這個github上比較多,(xcode6裏直接新增了一種Visual Effect View,簡單配置就有毛玻璃效果)。字體
第二個是,你會發現 中間部分的tableview(內容區)的frame實際上是在y:64點開始的,爲了緊貼頂部條。
日常狀況下,tableview中的內容滾到frame外後會被溢出隱藏掉(相似css中的overflow:hidden),
若是被隱藏掉的話,頂部條就不能獲取底下的內容實現毛玻璃效果。
這個時候只須要取消掉溢出隱藏屬性就能夠了。優化
方法很簡單:在tableview 的屬性面板上把一個叫Clip subviews 屬性勾選取消掉就能夠了。
使用代碼,也是一句話。code
//code tableview.clipsToBounds = NO;
這個屬性是當一個子視圖超出父容器邊界的時候就把溢出的部分隱藏掉的意思。(相似裁剪的概念)視頻
起初我也沒發現,就是以爲字體好像不太同樣。
知乎上也有人說,看人回覆,好像是說字號變大了,因此看起來細了一些。ip
不過應該依然是自帶的默認字體。
個人iPhone4s 感覺特別大,由於自己內存少的可憐,彷佛此次6.0在內存優化上下足了功夫。
可能有些人發現了,就是激活小視頻下拉的時候,那個背景是攝像頭獲取畫面後毛玻璃效果後的畫面。
這個東西通常人會以爲挺好看的。
但從開發者的角度講,這個不光好看,也優化了攝像頭的加載停頓時間。
由於通常打開攝像頭功能的時候會有必定時間的停頓(iPhone4s比較明顯)
當你下拉到必定距離的時候就開始觸發加載攝像頭,讓整個畫面過渡很平滑,體驗甚好。
印象中是4條,如今成3條了,在一個軟件愈來愈大的狀況下作減法,很贊。
可能日常的產品經理的固化思惟是以爲 新增東西都應該丟在加號裏,由於它們是同一類功能。
不得不佩服張小龍的統治力,
估計他的要求是加號裏的東西要控制在3條,其餘的大家本身看。
因而 經過下拉來新增小視頻的功能就誕生了。(從新定義了下拉只是刷新的這個動做。)
好了,其餘的慢慢品位。