Como posso produzir um efeito semelhante à exibição de desfoque do iOS 7?

Estou tentando replicar esse fundo desfocado da tela de exemplo do iOS 7, publicamente lançada pela Apple:

Esta pergunta sugere a aplicação de um filtro de IC ao conteúdo abaixo, mas essa é uma abordagem totalmente diferente. É óbvio que o iOS 7 não captura o conteúdo das visualizações abaixo, por vários motivos:

1. Fazer alguns testes, capturar uma captura de tela das visualizações abaixo e aplicar um filtro CIGaussianBlur com um raio grande o suficiente para imitar o estilo de desfoque do iOS 7 leva 1-2 segundos, mesmo em um simulador.
2. A exibição de desfoque do iOS 7 pode desfocar as visualizações dinâmicas, como um vídeo ou animações, sem atraso perceptível.

Alguém pode sugerir quais estruturas eles poderiam estar usando para criar esse efeito e se é possível criar um efeito semelhante com as APIs públicas atuais?

Edit: (from comment) Não sabemos exatamente como a Apple está fazendo isso, mas existem suposições básicas que podemos fazer? Podemos assumir que eles estão usando hardware, certo?

O efeito é independente em cada visualização, de modo que o efeito não saiba realmente o que está por trás dele? Ou deve, com base em como os borrões funcionam, o conteúdo por trás do borrão deve ser levado em consideração?

Se o conteúdo por trás do efeito for relevante, podemos supor que a Apple esteja recebendo um "feed" do conteúdo abaixo e processando-o continuamente com um borrão?

Por que se preocupar em replicar o efeito? Basta desenhar uma barra UITool atrás da sua visualização.

myView.backgroundColor = [UIColor clearColor];
UIToolbar* bgToolbar = [[UIToolbar alloc] initWithFrame:myView.frame];
bgToolbar.barStyle = UIBarStyleDefault;
[myView.superview insertSubview:bgToolbar belowSubview:myView];

A Apple lançou o código na WWDC como uma categoria na UIImage que inclui essa funcionalidade. Se você possui uma conta de desenvolvedor, pode pegar a categoria UIImage (e o restante do código de exemplo) acessando este link: https://developer.apple. com / wwdc / schedule / e navegando para a seção 226 e clicando em detalhes. Ainda não brinquei com ele, mas acho que o efeito será muito mais lento no iOS 6, há algumas melhorias no iOS 7 que tornam mais rápida a captura da captura de tela inicial usada como entrada para o desfoque.

Link direto: https://developer.apple.com/downloads/download.action?path=wwdc_2013/wwdc_2013_sample_code/ios_uiimageeffects.zip

Na verdade, eu aposto que isso seria bastante simples de conseguir. Provavelmente não funcionaria ou se pareceria exatamente com o que a Apple está acontecendo, mas poderia estar muito próximo.

Primeiro de tudo, você precisa determinar o CGRect do UIView que você apresentará. Depois de determinar que você precisaria apenas pegar uma imagem da parte da interface do usuário para que ela fique embaçada. Algo assim...

- (UIImage*)getBlurredImage {
    // You will want to calculate this in code based on the view you will be presenting.
    CGSize size = CGSizeMake(200,200);

    UIGraphicsBeginImageContext(size);
    [view drawViewHierarchyInRect:(CGRect){CGPointZero, w, h} afterScreenUpdates:YES]; // view is the view you are grabbing the screen shot of. The view that is to be blurred.
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    // Gaussian Blur
    image = [image applyLightEffect];

    // Box Blur
    // image = [image boxblurImageWithBlur:0.2f];

    return image;
}

Gaussian Blur - Recomendado

Usando a UIImage+ImageEffectscategoria Apple fornecida aqui , você obterá um desfoque gaussiano que se parece muito com o desfoque no iOS 7.

Borrão de caixa

Você também pode usar um desfoque de caixa usando a seguinte boxBlurImageWithBlur:categoria UIImage. Isso é baseado em um algoritmo que você pode encontrar aqui .

@implementation UIImage (Blur)

-(UIImage *)boxblurImageWithBlur:(CGFloat)blur {
    if (blur < 0.f || blur > 1.f) {
        blur = 0.5f;
    }
    int boxSize = (int)(blur * 50);
    boxSize = boxSize - (boxSize % 2) + 1;

    CGImageRef img = self.CGImage;

    vImage_Buffer inBuffer, outBuffer;

    vImage_Error error;

    void *pixelBuffer;

    CGDataProviderRef inProvider = CGImageGetDataProvider(img);
    CFDataRef inBitmapData = CGDataProviderCopyData(inProvider);

    inBuffer.width = CGImageGetWidth(img);
    inBuffer.height = CGImageGetHeight(img);
    inBuffer.rowBytes = CGImageGetBytesPerRow(img);

    inBuffer.data = (void*)CFDataGetBytePtr(inBitmapData);

    pixelBuffer = malloc(CGImageGetBytesPerRow(img) * CGImageGetHeight(img));

    if(pixelBuffer == NULL)
        NSLog(@"No pixelbuffer");

    outBuffer.data = pixelBuffer;
    outBuffer.width = CGImageGetWidth(img);
    outBuffer.height = CGImageGetHeight(img);
    outBuffer.rowBytes = CGImageGetBytesPerRow(img);

    error = vImageBoxConvolve_ARGB8888(&inBuffer, &outBuffer, NULL, 0, 0, boxSize, boxSize, NULL, kvImageEdgeExtend);

    if (error) {
        NSLog(@"JFDepthView: error from convolution %ld", error);
    }

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef ctx = CGBitmapContextCreate(outBuffer.data,
                                         outBuffer.width,
                                         outBuffer.height,
                                         8,
                                         outBuffer.rowBytes,
                                         colorSpace,
                                         kCGImageAlphaNoneSkipLast);
    CGImageRef imageRef = CGBitmapContextCreateImage (ctx);
    UIImage *returnImage = [UIImage imageWithCGImage:imageRef];

    //clean up
    CGContextRelease(ctx);
    CGColorSpaceRelease(colorSpace);

    free(pixelBuffer);
    CFRelease(inBitmapData);

    CGImageRelease(imageRef);

    return returnImage;
}

@end

Agora que você está calculando a área da tela para desfocar, passando-a para a categoria de desfoque e recebendo uma UIImage de volta que ficou desfocada, agora resta apenas definir essa imagem desfocada como o fundo da exibição que você apresentará. Como eu disse, isso não será uma combinação perfeita para o que a Apple está fazendo, mas ainda deve parecer bem legal.

Espero que ajude.

O iOS8 respondeu a estas perguntas.

- (instancetype)initWithEffect:(UIVisualEffect *)effect

ou Swift:

init(effect effect: UIVisualEffect)

Acabei de escrever minha pequena subclasse de UIView que tem capacidade de produzir o iOS 7 nativo blur em qualquer visualização personalizada. Ele usa o UIToolbar, mas de maneira segura para alterar seu quadro, limites, cores e alfa com animação em tempo real.

Entre em contato se notar algum problema.

https://github.com/ivoleko/ILTranslucentView

Há um boato de que os engenheiros da Apple alegaram que, para obter esse desempenho, eles estão lendo diretamente do buffer gpu, o que levanta problemas de segurança e é por isso que ainda não há uma API pública para fazer isso.

Esta é uma solução que você pode ver nos vídeos da WWDC. Você precisa fazer um Gaussian Blur; portanto, a primeira coisa a fazer é adicionar um novo arquivo .m e .h com o código que estou escrevendo aqui; depois, é necessário fazer uma captura de tela, usar o efeito desejado e adicione-o à sua visualização e, em seguida, com o UITable UIView ou o que for transparente, você pode brincar com applyBlurWithRadius. Para arquivar o efeito desejado, essa chamada funciona com qualquer UIImage.

No final, a imagem manchada será o plano de fundo e o restante dos controles acima deverá ser transparente.

Para que isso funcione, você deve adicionar as próximas bibliotecas:

Acelerate.framework, UIKit.framework, CoreGraphics.framework

Espero que você goste.

Feliz codificação.

    //Screen capture.
    UIGraphicsBeginImageContext(self.view.bounds.size);

    CGContextRef c = UIGraphicsGetCurrentContext();
    CGContextTranslateCTM(c, 0, 0);
    [self.view.layer renderInContext:c];

    UIImage* viewImage = UIGraphicsGetImageFromCurrentImageContext();
    viewImage = [viewImage applyLightEffect];

    UIGraphicsEndImageContext();

    //.h FILE
    #import <UIKit/UIKit.h>

    @interface UIImage (ImageEffects)

   - (UIImage *)applyLightEffect;
   - (UIImage *)applyExtraLightEffect;
   - (UIImage *)applyDarkEffect;
   - (UIImage *)applyTintEffectWithColor:(UIColor *)tintColor;

   - (UIImage *)applyBlurWithRadius:(CGFloat)blurRadius tintColor:(UIColor *)tintColor saturationDeltaFactor:(CGFloat)saturationDeltaFactor maskImage:(UIImage *)maskImage;

   @end

    //.m FILE
    #import "cGaussianEffect.h"
    #import <Accelerate/Accelerate.h>
    #import <float.h>


     @implementation UIImage (ImageEffects)


    - (UIImage *)applyLightEffect
    {
        UIColor *tintColor = [UIColor colorWithWhite:1.0 alpha:0.3];
        return [self applyBlurWithRadius:1 tintColor:tintColor saturationDeltaFactor:1.8 maskImage:nil];
    }


    - (UIImage *)applyExtraLightEffect
    {
        UIColor *tintColor = [UIColor colorWithWhite:0.97 alpha:0.82];
        return [self applyBlurWithRadius:1 tintColor:tintColor saturationDeltaFactor:1.8 maskImage:nil];
    }


    - (UIImage *)applyDarkEffect
    {
        UIColor *tintColor = [UIColor colorWithWhite:0.11 alpha:0.73];
        return [self applyBlurWithRadius:1 tintColor:tintColor saturationDeltaFactor:1.8 maskImage:nil];
    }


    - (UIImage *)applyTintEffectWithColor:(UIColor *)tintColor
    {
        const CGFloat EffectColorAlpha = 0.6;
        UIColor *effectColor = tintColor;
        int componentCount = CGColorGetNumberOfComponents(tintColor.CGColor);
        if (componentCount == 2) {
            CGFloat b;
            if ([tintColor getWhite:&b alpha:NULL]) {
                effectColor = [UIColor colorWithWhite:b alpha:EffectColorAlpha];
            }
        }
        else {
            CGFloat r, g, b;
            if ([tintColor getRed:&r green:&g blue:&b alpha:NULL]) {
                effectColor = [UIColor colorWithRed:r green:g blue:b alpha:EffectColorAlpha];
            }
        }
        return [self applyBlurWithRadius:10 tintColor:effectColor saturationDeltaFactor:-1.0 maskImage:nil];
    }


    - (UIImage *)applyBlurWithRadius:(CGFloat)blurRadius tintColor:(UIColor *)tintColor saturationDeltaFactor:(CGFloat)saturationDeltaFactor maskImage:(UIImage *)maskImage
    {
        if (self.size.width < 1 || self.size.height < 1) {
            NSLog (@"*** error: invalid size: (%.2f x %.2f). Both dimensions must be >= 1: %@", self.size.width, self.size.height, self);
            return nil;
        }
        if (!self.CGImage) {
            NSLog (@"*** error: image must be backed by a CGImage: %@", self);
            return nil;
        }
        if (maskImage && !maskImage.CGImage) {
            NSLog (@"*** error: maskImage must be backed by a CGImage: %@", maskImage);
            return nil;
        }

        CGRect imageRect = { CGPointZero, self.size };
        UIImage *effectImage = self;

        BOOL hasBlur = blurRadius > __FLT_EPSILON__;
        BOOL hasSaturationChange = fabs(saturationDeltaFactor - 1.) > __FLT_EPSILON__;
        if (hasBlur || hasSaturationChange) {
            UIGraphicsBeginImageContextWithOptions(self.size, NO, [[UIScreen mainScreen] scale]);
            CGContextRef effectInContext = UIGraphicsGetCurrentContext();
            CGContextScaleCTM(effectInContext, 1.0, -1.0);
            CGContextTranslateCTM(effectInContext, 0, -self.size.height);
            CGContextDrawImage(effectInContext, imageRect, self.CGImage);

            vImage_Buffer effectInBuffer;
            effectInBuffer.data     = CGBitmapContextGetData(effectInContext);
            effectInBuffer.width    = CGBitmapContextGetWidth(effectInContext);
            effectInBuffer.height   = CGBitmapContextGetHeight(effectInContext);
            effectInBuffer.rowBytes = CGBitmapContextGetBytesPerRow(effectInContext);

            UIGraphicsBeginImageContextWithOptions(self.size, NO, [[UIScreen mainScreen] scale]);
            CGContextRef effectOutContext = UIGraphicsGetCurrentContext();
            vImage_Buffer effectOutBuffer;
            effectOutBuffer.data     = CGBitmapContextGetData(effectOutContext);
            effectOutBuffer.width    = CGBitmapContextGetWidth(effectOutContext);
            effectOutBuffer.height   = CGBitmapContextGetHeight(effectOutContext);
            effectOutBuffer.rowBytes = CGBitmapContextGetBytesPerRow(effectOutContext);

            if (hasBlur) {
                CGFloat inputRadius = blurRadius * [[UIScreen mainScreen] scale];
                NSUInteger radius = floor(inputRadius * 3. * sqrt(2 * M_PI) / 4 + 0.5);
                if (radius % 2 != 1) {
                    radius += 1;
                }
                vImageBoxConvolve_ARGB8888(&effectInBuffer, &effectOutBuffer, NULL, 0, 0, radius, radius, 0, kvImageEdgeExtend);
                vImageBoxConvolve_ARGB8888(&effectOutBuffer, &effectInBuffer, NULL, 0, 0, radius, radius, 0, kvImageEdgeExtend);
                vImageBoxConvolve_ARGB8888(&effectInBuffer, &effectOutBuffer, NULL, 0, 0, radius, radius, 0, kvImageEdgeExtend);
            }
            BOOL effectImageBuffersAreSwapped = NO;
            if (hasSaturationChange) {
                CGFloat s = saturationDeltaFactor;
                CGFloat floatingPointSaturationMatrix[] = {
                    0.0722 + 0.9278 * s,  0.0722 - 0.0722 * s,  0.0722 - 0.0722 * s,  0,
                    0.7152 - 0.7152 * s,  0.7152 + 0.2848 * s,  0.7152 - 0.7152 * s,  0,
                    0.2126 - 0.2126 * s,  0.2126 - 0.2126 * s,  0.2126 + 0.7873 * s,  0,
                                  0,                    0,                    0,  1,
                };
                const int32_t divisor = 256;
                NSUInteger matrixSize = sizeof(floatingPointSaturationMatrix)/sizeof(floatingPointSaturationMatrix[0]);
                int16_t saturationMatrix[matrixSize];
                for (NSUInteger i = 0; i < matrixSize; ++i) {
                    saturationMatrix[i] = (int16_t)roundf(floatingPointSaturationMatrix[i] * divisor);
                }
                if (hasBlur) {
                    vImageMatrixMultiply_ARGB8888(&effectOutBuffer, &effectInBuffer, saturationMatrix, divisor, NULL, NULL, kvImageNoFlags);
                    effectImageBuffersAreSwapped = YES;
                }
                else {
                    vImageMatrixMultiply_ARGB8888(&effectInBuffer, &effectOutBuffer, saturationMatrix, divisor, NULL, NULL, kvImageNoFlags);
                }
            }
            if (!effectImageBuffersAreSwapped)
                effectImage = UIGraphicsGetImageFromCurrentImageContext();
            UIGraphicsEndImageContext();

            if (effectImageBuffersAreSwapped)
                effectImage = UIGraphicsGetImageFromCurrentImageContext();
            UIGraphicsEndImageContext();
        }

        UIGraphicsBeginImageContextWithOptions(self.size, NO, [[UIScreen mainScreen] scale]);
        CGContextRef outputContext = UIGraphicsGetCurrentContext();
        CGContextScaleCTM(outputContext, 1.0, -1.0);
        CGContextTranslateCTM(outputContext, 0, -self.size.height);

        CGContextDrawImage(outputContext, imageRect, self.CGImage);

        if (hasBlur) {
            CGContextSaveGState(outputContext);
            if (maskImage) {
                CGContextClipToMask(outputContext, imageRect, maskImage.CGImage);
            }
            CGContextDrawImage(outputContext, imageRect, effectImage.CGImage);
            CGContextRestoreGState(outputContext);
        }

        if (tintColor) {
            CGContextSaveGState(outputContext);
            CGContextSetFillColorWithColor(outputContext, tintColor.CGColor);
            CGContextFillRect(outputContext, imageRect);
            CGContextRestoreGState(outputContext);
        }

        UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();

        return outputImage;
    }

Você pode encontrar sua solução na DEMO da apple nesta página: WWDC 2013 , descubra e faça o download do código de exemplo UIImageEffects.

Depois, com o código de Jeremy Fox. Eu mudei para

- (UIImage*)getDarkBlurredImageWithTargetView:(UIView *)targetView
{
    CGSize size = targetView.frame.size;

    UIGraphicsBeginImageContext(size);
    CGContextRef c = UIGraphicsGetCurrentContext();
    CGContextTranslateCTM(c, 0, 0);
    [targetView.layer renderInContext:c]; // view is the view you are grabbing the screen shot of. The view that is to be blurred.
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return [image applyDarkEffect];
}

Espero que isso ajude você.

Aqui está uma maneira realmente fácil de fazer isso: https://github.com/JagCesar/iOS-blur

Basta copiar a camada do UIToolbar e pronto, o AMBlurView faz isso por você. Ok, não é tão embaçado quanto o centro de controle, mas é embaçado o suficiente.

Lembre-se de que o iOS7 está sob NDA.

Toda resposta aqui está usando o vImageBoxConvolve_ARGB8888. Essa função é muito, muito lenta, tudo bem, se o desempenho não for um requisito de alta prioridade, mas se você o estiver usando para fazer a transição entre dois View Controllers (por exemplo), essa abordagem significa vezes mais de 1 segundo ou talvez mais, isso é muito ruim para a experiência do usuário do seu aplicativo.

Se você preferir deixar todo esse processamento de imagem para a GPU (você deveria), poderá obter um efeito muito melhor e também tempos impressionantes em torno de 50ms (supondo que você tenha um tempo de 1 segundo na primeira abordagem), então vamos fazê-lo .

Primeiro faça o download do GPUImage Framework (BSD Licensed) aqui .

Em seguida, adicione as seguintes classes (.m e .h) da GPUImage (não tenho certeza de que sejam o mínimo necessário apenas para o efeito de desfoque)

• GPUImage.h
• GPUImageAlphaBlendFilter
• GPUImageFilter
• GPUImageFilterGroup
• GPUImageGaussianBlurPositionFilter
• GPUImageGaussianSelectiveBlurFilter
• GPUImageLuminanceRangeFilter
• GPUImageOutput
• GPUImageTwoInputFilter
• GLProgram
• GPUImageBoxBlurFilter
• GPUImageGaussianBlurFilter
• GPUImageiOSBlurFilter
• GPUImageSaturationFilter
• GPUImageSolidColorGenerator
• GPUImageTwoPassFilter

• GPUImageTwoPassTextureSamplingFilter

• iOS / GPUImage-Prefix.pch

• iOS / GPUImageContext
• iOS / GPUImageMovieWriter
• iOS / GPUImagePicture
• iOS / GPUImageView

Em seguida, crie uma categoria no UIImage, que adicionará um efeito de desfoque a um UIImage existente:

#import "UIImage+Utils.h"

#import "GPUImagePicture.h"
#import "GPUImageSolidColorGenerator.h"
#import "GPUImageAlphaBlendFilter.h"
#import "GPUImageBoxBlurFilter.h"

@implementation UIImage (Utils)

- (UIImage*) GPUBlurredImage
{
    GPUImagePicture *source =[[GPUImagePicture alloc] initWithImage:self];

    CGSize size = CGSizeMake(self.size.width * self.scale, self.size.height * self.scale);

    GPUImageBoxBlurFilter *blur = [[GPUImageBoxBlurFilter alloc] init];
    [blur setBlurRadiusInPixels:4.0f];
    [blur setBlurPasses:2.0f];
    [blur forceProcessingAtSize:size];
    [source addTarget:blur];

    GPUImageSolidColorGenerator * white = [[GPUImageSolidColorGenerator alloc] init];

    [white setColorRed:1.0f green:1.0f blue:1.0f alpha:0.1f];
    [white forceProcessingAtSize:size];

    GPUImageAlphaBlendFilter * blend = [[GPUImageAlphaBlendFilter alloc] init];
    blend.mix = 0.9f;

    [blur addTarget:blend];
    [white addTarget:blend];

    [blend forceProcessingAtSize:size];
    [source processImage];

    return [blend imageFromCurrentlyProcessedOutput];
}

@end

E por último, adicione as seguintes estruturas ao seu projeto:

AVFoundation CoreMedia CoreVideo OpenGLES

Sim, me diverti com essa abordagem muito mais rápida;)

Você pode tentar usar meu modo de exibição personalizado, que tem a capacidade de desfocar o fundo. Ele faz isso fingindo tirar um instantâneo do fundo e desfocá-lo, assim como o do código WWDC da Apple. É muito simples de usar.

Também fiz algumas melhorias para fingir o borrão dinâmico sem perder o desempenho. O plano de fundo da minha visualização é um scrollView que rola com a visualização, fornecendo assim o efeito de desfoque para o restante da superview.

Veja o exemplo e o código no meu GitHub

O Core Background implementa o efeito desejado do iOS 7.

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

Disclaimer: Eu sou o autor deste projeto