Frosted Glass (iOS 7 Blur) Effect

Frosted Glass (iOS 7 Blur) Effect

A good tutorial about CoreImage is here, showing how to apply filters and more:

http://www.raywenderlich.com/5689/beginning-core-image-in-ios-5

UPDATE 1

So after a little bit of research, I ended up discovering that the Core Image for the iOS is still incomplete, when comparing to the OS X version of the library. So I googled a lot, and I find two solutions, one of them more simple, and the other much wider and complex library.

• The simple and short solution: https://github.com/esilverberg/ios-image-filters

• The amazing and this edit worth, library for processing images and videos with OpenGL, GPUImage by Brad Larson. It is much faster and efficient than Core Image. Introduction: http://www.sunsetlakesoftware.com/2012/02/12/introducing-gpuimage-framework. GitHub: GPUImage

So, for example, in a few lines I can get the result I want (where originalImage is the UIImage to apply the effect):

GPUImageGaussianBlurFilter *blurFilter = [[GPUImageGaussianBlurFilter alloc] init];
blurFilter.blurSize = 2;
UIImage *blurImage = [blurFilter imageByFilteringImage:resizedImage];

UPDATE 2

After Apple announced iOS 7, some developers found a workaround to do the same that Apple did in the default iOS apps, as Apple didn't provide an API for that. The simplest and better solution, in my opinion, is this one. Why I think it's the best? Because even if some view behind it moves, the blur still works great with the updated effect, as we expect it should work. However, bear in mind that it depends on the iOS 7 SDK in order to work, and it can be risky if Apple changes UIToolbar.

UPDATE 3

Apple mentioned, at WWDC 2013 (Session 226 - Implementing Engaging UI on iOS) they would provide a category class on UIImage, called UIImage+ImageEffects (I googled it, and found here, but it's available in Developer Portal - search for UIImageEffects in the search box). With this category, you can apply the blur in a static UIImage, using several methods (light, dark, with a specific color, etc.). Also, yesterday I saw this component and found it pretty interesting, as you can apply the effect (based on the above mentioned category) in a frame.

UPDATE 4

Finally, on iOS 8, Apple released new classes that can do live blur easily. With UIVisualEffect and UIVisualEffectView, you can quickly add live blur to your apps. Here is a good tutorial from Ryan Nystrom on how to use those classes (and in blur in general):

Animated Frosted Glass

If you want a dynamic blurred effect you can use the UIVisualEffectView with a UIBlurEffect.

Documentation:
https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIBlurEffect_Ref/index.html

Using GPUImage to Recreate iOS 7 Glass Effect

OK, I've been working on something here for a little while, and I finally have it functional. I just rolled a number of changes to GPUImage's blur filters into the framework, and as a result I believe I have a reasonable replica of Apple's blur effect that they use for things like the control center view.

Previously, the blurs that I had in the framework used a single precalculated radius, and the only way to affect their intensity was to tweak the spacing at which they sampled pixels from the input image. With a limited number of samples per pixel, changing the multiple for the spacing between sampled pixels much above 1.5 started introducing serious blocking artifacts as pixels were skipped.

The new Gaussian blur implementation that I've built combines the performance benefits of precalculated Gaussian weights with the ability to use an arbitrary radius (sigma) for the Gaussian blur. It does this by generating shaders on the fly as they are needed for various radii. It also reduces the number of texture samples required for a given blur radius by using hardware interpolation to read two texels at a time for each sample point.

The new GPUImageiOSBlurFilter combines this tuned arbitrary-radius Gaussian blur filter with a color-correction filter that appears to replicate the adjustment Apple performs to the colors after they've been blurred. I added the below comparison to my answer here, but it shows Apple's built-in blurring from the control center view on the left, and my new GPUImage blur filter on the right:

As a way of improving performance (Apple's blur appears to occur with a sigma of 48, which requires quite a large area to be sampled for each pixel), I use a 4X downsampling before the Gaussian blur, then a 4X upsampling afterward. This reduces the number of pixels that need to be blurred by 16X, and also reduces the blur sigma from 48 to 12. An iPhone 4S can blur the entire screen in roughly 30 ms using this filter.

Getting the blur right is one thing. Apple still does not provide a fast way of getting the image content behind your views, so that most likely will be your bottleneck here for rapidly changing content.

ios frosted glass logic

Check out the FXBlur library, it'll let you blur images/views.. I've used it successfully and sounds like it'll do what you want.

I think having two images for these assets maybe easier, but having the views blur may be better in the long run as you wouldn't have to worry about updating the images for different resolutions in the future or care about how big the button is/will be.. Also if you want to do this with more images it'll turn into a mess with all the different images to manage.. The library is simple to use, with one call you'll have a blurred image/view..

How to implement a real time iOS7 blur effect in the UITableViewCell's background

Just like you said, there is possibility to use UIToolbar to get real-time blur. Here is a little class to get desired modification of appearance:

https://github.com/ivoleko/ILTranslucentView

How do I do the frosted glass effect in Flutter?

You can use the BackdropFilter widget to achieve this effect.

import 'dart:ui';
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new FrostedDemo()));
}

class FrostedDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Stack(
        children: <Widget>[
          new ConstrainedBox(
            constraints: const BoxConstraints.expand(),
            child: new FlutterLogo()
          ),
          new Center(
            child: new ClipRect(
              child: new BackdropFilter(
                filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
                child: new Container(
                  width: 200.0,
                  height: 200.0,
                  decoration: new BoxDecoration(
                    color: Colors.grey.shade200.withOpacity(0.5)
                  ),
                  child: new Center(
                    child: new Text(
                      'Frosted',
                      style: Theme.of(context).textTheme.display3
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

---

Related Topics