Bagaimana saya bisa menghasilkan efek yang mirip dengan tampilan blur iOS 7?

Saya mencoba meniru latar belakang buram ini dari layar contoh iOS 7 yang dirilis Apple:

Pertanyaan ini menyarankan menerapkan filter CI untuk konten di bawah ini, tetapi itu pendekatan yang sama sekali berbeda. Jelas bahwa iOS 7 tidak menangkap konten tampilan di bawah ini, karena berbagai alasan:

1. Melakukan beberapa pengujian kasar, menangkap tangkapan layar tampilan di bawah dan menerapkan filter CIGaussianBlur dengan radius yang cukup besar untuk meniru gaya blur iOS 7 membutuhkan waktu 1-2 detik, bahkan pada simulator.
2. Tampilan blur iOS 7 mampu mengaburkan tampilan dinamis, seperti video atau animasi, tanpa jeda yang terlihat.

Adakah yang bisa membuat hipotesis kerangka kerja apa yang bisa mereka gunakan untuk membuat efek ini, dan jika mungkin untuk membuat efek yang sama dengan API publik saat ini?

Edit: (dari komentar) Kami tidak tahu persis bagaimana Apple melakukannya, tetapi adakah asumsi dasar yang dapat kami buat? Kita dapat berasumsi mereka menggunakan perangkat keras, bukan?

Apakah efek mandiri di setiap tampilan, sehingga efeknya tidak benar-benar tahu apa yang ada di baliknya? Atau haruskah, berdasarkan cara kerja blur, konten di balik blur dipertimbangkan?

Jika konten di balik efek tersebut relevan, dapatkah kita berasumsi bahwa Apple menerima "umpan" dari konten di bawah ini dan terus-menerus menjadikannya kabur?

Mengapa repot mereplikasi efeknya? Cukup gambarkan UIToolbar di belakang tampilan Anda.

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

Apple merilis kode di WWDC sebagai kategori di UIImage yang mencakup fungsi ini, jika Anda memiliki akun pengembang, Anda dapat mengambil kategori UIImage (dan kode contoh lainnya) dengan masuk ke tautan ini: https://developer.apple. com / wwdc / schedule / dan browsing untuk bagian 226 dan mengklik detail. Saya belum bermain-main dengannya tapi saya pikir efeknya akan jauh lebih lambat di iOS 6, ada beberapa peningkatan untuk iOS 7 yang membuat menyambar screen shot awal yang digunakan sebagai input untuk blur jauh lebih cepat.

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

Sebenarnya saya berani bertaruh ini akan lebih mudah untuk dicapai. Mungkin tidak akan beroperasi atau terlihat persis seperti apa yang terjadi Apple tetapi bisa sangat dekat.

Pertama-tama, Anda harus menentukan CGRect dari UIView yang akan Anda presentasikan. Setelah Anda menentukan bahwa Anda hanya perlu mengambil gambar dari bagian UI sehingga dapat kabur. Sesuatu seperti ini...

- (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 - Direkomendasikan

Menggunakan UIImage+ImageEffectsKategori Apple yang disediakan di sini , Anda akan mendapatkan gaussian blur yang sangat mirip dengan blur di iOS 7.

Box Blur

Anda juga bisa menggunakan blur kotak menggunakan boxBlurImageWithBlur:kategori UIImage berikut . Ini didasarkan pada algorythem yang dapat Anda temukan di sini .

@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

Sekarang Anda menghitung area layar menjadi buram, meneruskannya ke kategori kabur dan menerima kembali UIImage yang telah buram, sekarang yang tersisa adalah mengatur gambar buram itu sebagai latar belakang tampilan yang akan Anda sajikan. Seperti yang saya katakan, ini tidak akan menjadi pasangan yang sempurna untuk apa yang dilakukan Apple, tetapi tetap terlihat keren.

Semoga ini bisa membantu.

iOS8 menjawab pertanyaan-pertanyaan ini.

- (instancetype)initWithEffect:(UIVisualEffect *)effect

atau Swift:

init(effect effect: UIVisualEffect)

Saya baru saja menulis subkelas kecil saya dari UIView yang memiliki kemampuan untuk menghasilkan iOS 7 blur asli pada tampilan kustom apa pun. Ini menggunakan UIToolbar tetapi dengan cara yang aman untuk mengubah bingkai, batas, warna dan alfa dengan animasi real-time.

Tolong beri tahu saya jika Anda melihat ada masalah.

https://github.com/ivoleko/ILTranslucentView

Ada desas-desus bahwa insinyur Apple mengklaim, untuk membuat pemain ini mereka membaca langsung dari buffer gpu yang menimbulkan masalah keamanan yang mengapa belum ada API publik untuk melakukan ini.

Ini adalah solusi yang dapat Anda lihat di vidios WWDC. Anda harus melakukan Gaussian Blur, jadi hal pertama yang harus Anda lakukan adalah menambahkan file .m dan .h baru dengan kode yang saya tulis di sini, kemudian Anda harus membuat dan menembak layar, menggunakan efek yang diinginkan dan tambahkan ke tampilan Anda, lalu UITable UIView Anda atau apa pun yang harus transparan, Anda dapat bermain dengan applyBlurWithRadius, untuk mengarsipkan efek yang diinginkan, panggilan ini berfungsi dengan UIImage apa pun.

Pada akhirnya gambar yang buram akan menjadi latar belakang dan sisa kontrol di atas harus transparan.

Agar ini berfungsi, Anda harus menambahkan perpustakaan berikutnya:

Acelerate.framework, UIKit.framework, CoreGraphics.framework

Saya harap Anda menyukainya.

Selamat coding.

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

Anda dapat menemukan solusi dari DEMO apel di halaman ini: WWDC 2013 , cari tahu dan unduh kode sampel UIImageEffects.

Kemudian dengan kode @Jeremy Fox. Saya mengubahnya menjadi

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

Semoga ini bisa membantu Anda.

Ini adalah cara yang sangat mudah untuk melakukannya: https://github.com/JagCesar/iOS-blur

Cukup salin lapisan UIToolbar dan Anda selesai, AMBlurView melakukannya untuk Anda. Oke, ini tidak buram seperti pusat kontrol, tapi cukup buram.

Ingat bahwa iOS7 berada di bawah NDA.

Setiap respons di sini menggunakan vImageBoxConvolve_ARGB8888 fungsi ini benar-benar lambat, itu baik, jika kinerjanya bukan persyaratan prioritas tinggi, tetapi jika Anda menggunakan ini untuk transisi antara dua Pengontrol Tampilan (misalnya) pendekatan ini berarti lebih dari 1 kali. kedua atau mungkin lebih, itu sangat buruk bagi pengalaman pengguna aplikasi Anda.

Jika Anda lebih suka menyerahkan semua pemrosesan gambar ini ke GPU (Dan Anda seharusnya), Anda bisa mendapatkan efek yang jauh lebih baik dan juga waktu yang luar biasa membulatkan 50ms (seandainya Anda memiliki waktu 1 detik dalam pendekatan pertama), jadi, mari kita lakukan .

Pertama-tama unduh GPUImage Framework (BSD Licensed) di sini .

Selanjutnya, Tambahkan kelas berikut (.m dan .h) dari GPUImage (Saya tidak yakin bahwa ini adalah minimum yang diperlukan untuk efek blur saja)

• GPUImage.h
• GPUImageAlphaBlendFilter
• GPUImageFilter
• GPUImageFilterGroup
• GPUImageGaussianBlurPositionFilter
• GPUImageGaussianSelectiveBlurFilter
• GPUImageLuminanceRangeFilter
• GPUImageOutput
• GPUImageTwoInputFilter
• Program GL
• GPUImageBoxBlurFilter
• GPUImageGaussianBlurFilter
• GPUImageiOSBlurFilter
• Filter Gambaraturatur GPU
• GPUImageSolidColorGenerator
• GPUImageTwoPassFilter

• GPUImageTwoPassTextureSamplingFilter

• iOS / GPUImage-Prefix.pch

• iOS / GPUImageContext
• iOS / GPUImageMovieWriter
• Gambar iOS / GPUImage
• iOS / GPUImageView

Selanjutnya, buat kategori di UIImage, yang akan menambahkan efek blur ke UIImage yang ada:

#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

Dan terakhir, tambahkan kerangka kerja berikut untuk proyek Anda:

AVFoundation CoreMedia CoreVideo OpenGLES

Ya, bersenang-senang dengan pendekatan yang jauh lebih cepat ini;)

Anda dapat mencoba menggunakan tampilan kustom saya, yang memiliki kemampuan untuk mengaburkan latar belakang. Ia melakukan ini dengan memalsukan mengambil potret latar belakang dan mengaburkannya, seperti yang ada dalam kode WWDC Apple. Sangat mudah digunakan.

Saya juga membuat beberapa perbaikan untuk memalsukan kekaburan dinamis tanpa kehilangan kinerja. Latar belakang tampilan saya adalah scrollView yang menggulir dengan tampilan, sehingga memberikan efek blur untuk sisa superview.

Lihat contoh dan kode di GitHub saya

Core Background mengimplementasikan efek iOS 7 yang diinginkan.

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

Penafian: Saya adalah penulis proyek ini