2013-07-20 74 views
6

我真的很喜歡創建類似於雅虎天氣應用程序的UIScrollView。下面是關於視頻的例子:如何獲得雅虎天氣滾動視圖效果?

http://www.youtube.com/watch?v=a-q_yetkpik

我發現這個混帳這將alow我做漸變背景件事:

https://github.com/justinmfischer/core-background

但我會怎樣實現的模糊效果頂部,以便隨着內容的滾動,它幾乎淡出UINavigationBar

任何幫助將不勝感激!

+2

雅虎效應,我稱之爲,其實很酷。我也想學習。我覺得這個效果會來自透明的UINavigationBar和UIImage的自動模糊,一旦滾動已經過了某個點。也許有一些if else語句。 –

回答

3

我沒有親自嘗試過,但,這可能是一個良好的開端:https://github.com/kronik/DKLiveBlur

DKLiveBlur

DKLiveBlur和演示應用程序的來源顯示出類似的雅虎天氣iOS應用實時模糊效果。

28

我在Yahoo!中編寫了UI效果的代碼。天氣應用程序,將很樂意回答你的問題。

聽起來像你已經弄清楚如何做模糊(基於像素偏移量的模糊圖像之間的淡出,最大限度地出現在一定的數量......爲了更好的效果,你可以在模糊中有多個步驟 - 即在非模糊到半模糊之間褪色,然後半模糊到完全模糊等)。

對於下那種效果衰落,你可以設置你的內容視圖的層上的mask屬性:

https://developer.apple.com/library/mac/documentation/graphicsimaging/reference/CALayer_class/Introduction/Introduction.html#//apple_ref/occ/instp/CALayer/mask

掩碼是淡入從透明到不透明的圖像。

- Iain。

+1

令人敬畏的應用程序,順便說一句。同時出現簡單和酷。我只喜歡開始並盯着它。讓我感到輕鬆:)我對風車動畫有一個疑問。我們如何討論這個問題? – Schultz9999

+0

@Lain,偉大的應用程序!順便說一句,爲什麼頂部的紫色線?任何特定的原因。只是好奇:) – doNotCheckMyBlog

+0

@Lain,你使用了什麼模糊的方法?我非常喜歡你所獲得的外觀。 – nibeck

0

感謝Iain指出CALayer面具。

Evan Davis博客下載模糊示例代碼。

5

我可能晚了一點,但我有一個示例項目,完全是這樣。我確實試圖通過Yahoo! Iain正在談論的這個形象面具的應用程序。我還沒有能夠按照他所描述的方式使用它。所以我創建了一個CALayer來實現這個效果。

(@Iain,真棒工作大風扇!)

Here is the GitHub link