In the Music app of the new iOS, we can see an album cover behind a view that blurs it.
How can something like that be accomplished? I've read the documentation, but did not find anything there.
In the Music app of the new iOS, we can see an album cover behind a view that blurs it.
How can something like that be accomplished? I've read the documentation, but did not find anything there.
Simple answer is Add a subview and change it's alpha.
Found this by accident, gives me really great (near duplicate with Apple's) results and uses the Acceleration framework. -- http://pastebin.com/6cs6hsyQ *Not written by me
Here's a fast implementation in Swift using CIGaussianBlur:
From Xcode you can do it easily. Follow the steps from xcode. Drage visual effect view on your uiview or imageview.
Happy Coding :)
Swift 3 Version of Kev's answer to return blurred image -
Core Image
Since that image in the screenshot is static, you could use
CIGaussianBlur
from Core Image (requires iOS 6). Here is sample: https://github.com/evanwdavis/Fun-with-Masks/blob/master/Fun%20with%20Masks/EWDBlurExampleVC.mMind you, this is slower than the other options on this page.
Stack blur (Box + Gaussian)
Accelerate Framework
In the session “Implementing Engaging UI on iOS” from WWDC 2013 Apple explains how to create a blurred background (at 14:30), and mentions a method
applyLightEffect
implemented in the sample code using Accelerate.framework.GPUImage uses OpenGL shaders to create dynamic blurs. It has several types of blur: GPUImageBoxBlurFilter, GPUImageFastBlurFilter, GaussianSelectiveBlur, GPUImageGaussianBlurFilter. There is even a GPUImageiOSBlurFilter that “should fully replicate the blur effect provided by iOS 7's control panel” (tweet, article). The article is detailed and informative.
From indieambitions.com: Perform a blur using vImage. The algorithm is also used in iOS-RealTimeBlur.
From Nick Lockwood: https://github.com/nicklockwood/FXBlurView The example shows the blur over a scroll view. It blurs with dispatch_async, then syncs to call updates with UITrackingRunLoopMode so the blur is not lagged when UIKit gives more priority to the scroll of the UIScrollView. This is explained in Nick's book iOS Core Animation, which btw it's great.
iOS-blur This takes the blurring layer of the UIToolbar and puts it elsewhere. Apple will reject your app if you use this method. See https://github.com/mochidev/MDBlurView/issues/4
From Evadne blog: LiveFrost: Fast, Synchronous UIView Snapshot Convolving. Great code and a great read. Some ideas from this post:
Other stuff
Andy Matuschak said on Twitter: “you know, a lot of the places where it looks like we're doing it in real time, it's static with clever tricks.”
At doubleencore.com they say “we’ve found that a 10 pt blur radius plus a 10 pt increase in saturation best mimics iOS 7’s blur effect under most circumstances”.
A peek at the private headers of Apple's SBFProceduralWallpaperView.
Finally, this isn't a real blur, but remember you can set rasterizationScale to get a pixelated image: http://www.dimzzy.com/blog/2010/11/blur-effect-for-uiview/