Comment puis-je produire un effet similaire à la vue floue iOS 7?

J'essaie de reproduire cet arrière-plan flou à partir de l'écran d'exemple iOS 7 publié par Apple:

Cette question suggère d'appliquer un filtre CI au contenu ci-dessous, mais c'est une approche complètement différente. Il est évident qu'iOS 7 ne capture pas le contenu des vues ci-dessous, pour de nombreuses raisons:

1. Faire des tests approximatifs, capturer une capture d'écran des vues ci-dessous et appliquer un filtre CIGaussianBlur avec un rayon suffisamment grand pour imiter le style de flou d'iOS 7 prend 1-2 secondes, même sur un simulateur.
2. La vue de flou iOS 7 est capable de flouter des vues dynamiques, telles qu'une vidéo ou des animations, sans décalage notable.

Quelqu'un peut-il émettre l'hypothèse des cadres qu'ils pourraient utiliser pour créer cet effet, et s'il est possible de créer un effet similaire avec les API publiques actuelles?

Éditer: (du commentaire) Nous ne savons pas exactement comment Apple le fait, mais y a-t-il des hypothèses de base que nous pouvons faire? Nous pouvons supposer qu'ils utilisent du matériel, non?

L'effet est-il autonome dans chaque vue, de sorte que l'effet ne sait pas réellement ce qu'il y a derrière? Ou, en fonction du fonctionnement du flou, le contenu derrière le flou doit-il être pris en considération?

Si le contenu derrière l'effet est pertinent, peut-on supposer qu'Apple reçoit un "flux" du contenu ci-dessous et le rend continuellement avec un flou?

Pourquoi prendre la peine de reproduire l'effet? Dessinez simplement une barre d'outils UIT derrière votre vue.

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

Apple a publié du code sur WWDC en tant que catégorie sur UIImage qui inclut cette fonctionnalité.Si vous avez un compte de développeur, vous pouvez récupérer la catégorie UIImage (et le reste de l'exemple de code) en allant sur ce lien: https://developer.apple. com / wwdc / horaire / et en parcourant la section 226 et en cliquant sur les détails. Je n'ai pas encore joué avec mais je pense que l'effet sera beaucoup plus lent sur iOS 6, il y a quelques améliorations à iOS 7 qui rendent la capture d'écran initiale qui est utilisée comme entrée pour le flou beaucoup plus rapide.

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

En fait, je parierais que ce serait assez simple à réaliser. Il ne fonctionnerait probablement pas ou ne ressemblerait pas exactement à ce qui se passe Apple, mais pourrait être très proche.

Tout d'abord, vous devez déterminer le CGRect de l'UIView que vous présenterez. Une fois que vous avez déterminé que vous auriez juste besoin de saisir une image de la partie de l'interface utilisateur afin qu'elle puisse être floue. Quelque chose comme ça...

- (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;
}

Flou gaussien - Recommandé

En utilisant la UIImage+ImageEffectscatégorie Apple fournie ici , vous obtiendrez un flou gaussien qui ressemble beaucoup au flou dans iOS 7.

Box Blur

Vous pouvez également utiliser un flou de boîte en utilisant la boxBlurImageWithBlur:catégorie UIImage suivante . Ceci est basé sur un algorithme que vous pouvez trouver ici .

@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

Maintenant que vous calculez la zone d'écran à rendre floue, la passez dans la catégorie flou et recevez un retour UIImage flou, il ne reste plus qu'à définir cette image floue comme arrière-plan de la vue que vous allez présenter. Comme je l'ai dit, cela ne correspondra pas parfaitement à ce que fait Apple, mais cela devrait toujours être plutôt cool.

J'espère que ça aide.

iOS8 a répondu à ces questions.

- (instancetype)initWithEffect:(UIVisualEffect *)effect

ou Swift:

init(effect effect: UIVisualEffect)

Je viens d'écrire ma petite sous-classe d'UIView qui a la capacité de produire un flou iOS 7 natif sur n'importe quelle vue personnalisée. Il utilise UIToolbar mais de manière sûre pour changer son cadre, ses limites, sa couleur et son alpha avec une animation en temps réel.

Veuillez me prévenir si vous remarquez des problèmes.

https://github.com/ivoleko/ILTranslucentView

Il y a une rumeur selon laquelle les ingénieurs d'Apple prétendent que pour rendre cela performant, ils lisent directement la mémoire tampon du processeur graphique, ce qui pose des problèmes de sécurité.C'est pourquoi il n'y a pas encore d'API publique pour le faire.

C'est une solution que vous pouvez voir dans les vidios de la WWDC. Vous devez faire un flou gaussien, donc la première chose que vous devez faire est d'ajouter un nouveau fichier .m et .h avec le code que j'écris ici, puis vous devez faire et faire une capture d'écran, utiliser l'effet souhaité et ajoutez-le à votre vue, puis à votre UITable UIView ou à tout ce qui doit être transparent, vous pouvez jouer avec applyBlurWithRadius, pour archiver l'effet souhaité, cet appel fonctionne avec n'importe quel UIImage.

À la fin, l'image estompée sera l'arrière-plan et les autres commandes ci-dessus doivent être transparentes.

Pour que cela fonctionne, vous devez ajouter les bibliothèques suivantes:

Acelerate.framework, UIKit.framework, CoreGraphics.framework

J'espère que tu aimes.

Codage heureux.

    //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;
    }

Vous pouvez trouver votre solution dans DEMO d'Apple sur cette page: WWDC 2013 , découvrez et téléchargez l'exemple de code UIImageEffects.

Puis avec le code de @Jeremy Fox. Je l'ai changé en

- (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];
}

J'espère que ceci vous aidera.

Voici un moyen très simple de le faire: https://github.com/JagCesar/iOS-blur

Copiez simplement la couche de UIToolbar et vous avez terminé, AMBlurView le fait pour vous. D'accord, ce n'est pas aussi flou que le centre de contrôle, mais c'est assez flou.

N'oubliez pas qu'iOS7 est sous NDA.

Chaque réponse utilise ici vImageBoxConvolve_ARGB8888 cette fonction est vraiment, vraiment lente, c'est bien, si les performances ne sont pas une exigence de haute priorité, mais si vous l'utilisez pour la transition entre deux contrôleurs de vue (par exemple) cette approche signifie des temps supérieurs à 1 seconde ou peut-être plus, c'est très mauvais pour l'expérience utilisateur de votre application.

Si vous préférez laisser tout ce traitement d'image au GPU (et vous devriez), vous pouvez obtenir un bien meilleur effet et également des temps impressionnants en arrondissant 50 ms (en supposant que vous avez un temps de 1 seconde dans la première approche), alors, faisons-le .

Téléchargez d'abord le GPUImage Framework (licence BSD) ici .

Ensuite, ajoutez les classes suivantes (.m et .h) à partir de GPUImage (je ne suis pas sûr que ce soit le minimum nécessaire pour l'effet de flou uniquement)

• 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

Ensuite, créez une catégorie sur UIImage, qui ajoutera un effet de flou à un UIImage existant:

#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

Enfin, ajoutez les cadres suivants à votre projet:

AVFoundation CoreMedia CoreVideo OpenGLES

Oui, je me suis amusé avec cette approche beaucoup plus rapide;)

Vous pouvez essayer d'utiliser ma vue personnalisée, qui a la capacité de rendre l'arrière-plan flou. Il le fait en simulant un instantané de l'arrière-plan et en le floutant, tout comme celui du code WWDC d'Apple. C'est très simple à utiliser.

J'ai également fait quelques améliorations pour simuler le flou dynamique sans perdre les performances. L'arrière-plan de ma vue est un scrollView qui défile avec la vue, fournissant ainsi l'effet de flou pour le reste de la vue d'ensemble.

Voir l'exemple et le code sur mon GitHub

Core Background implémente l'effet iOS 7 souhaité.

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

Avertissement: je suis l'auteur de ce projet