如何生成类似于iOS 7模糊视图的效果？
我正试图从Apple公开发布的iOS 7示例屏幕中复制这个模糊背景：
This question建议对以下内容应用CI过滤器，但这是一种完全不同的方法。很明显iOS 7没有捕获下面视图的内容，原因有很多：
- 进行一些粗略测试，捕获下面视图的屏幕截图，并应用具有足够半径的CIGaussianBlur滤镜来模仿iOS 7的模糊样式，即使在模拟器上也需要1-2秒。
- iOS 7模糊视图可以模糊动态视图，例如视频或动画，没有明显的延迟。
有人可以假设他们可以使用哪些框架来创建这种效果，是否可以使用当前的公共API创建类似的效果？
编辑（来自评论）我们并不确切知道Apple是如何做到的，但我们可以做出任何基本的假设吗？我们可以假设他们正在使用硬件，对吧？
每个视图中的效果都是自包含的，这样效果实际上并不知道背后的效果是什么吗？或者，必须根据模糊的工作原理，考虑模糊背后的内容？
如果效果背后的内容是相关的，我们是否可以假设Apple正在接收下面内容的“提要”并持续呈现模糊效果？
12 个答案:
答案 0 :(得分：133)
为什么要复制效果呢？只需在视图后面绘制一个UIToolbar即可。
myView.backgroundColor = [UIColor clearColor];
UIToolbar* bgToolbar = [[UIToolbar alloc] initWithFrame:myView.frame];
bgToolbar.barStyle = UIBarStyleDefault;
[myView.superview insertSubview:bgToolbar belowSubview:myView];
答案 1 :(得分：64)
Apple在WWDC上发布代码作为UIImage上包含此功能的类别，如果您有开发者帐户，可以通过此链接获取UIImage类别（以及示例代码的其余部分）：https://developer.apple.com/wwdc/schedule/并浏览第226节并单击详细信息。我还没玩过它，但我认为在iOS 6上效果会慢很多，iOS 7有一些增强功能，可以抓住初始屏幕截图，用作模糊输入的速度更快。 / p>
答案 2 :(得分：37)
实际上我敢打赌，这样做很容易实现。它可能无法运行或看起来与苹果公司的情况完全相同，但可能非常接近。
首先，您需要确定您将要呈现的UIView的CGRect。一旦你确定你只需要抓取UI部分的图像就可以模糊了。像这样......
- (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;
}
高斯模糊 - 推荐
使用UIImage+ImageEffects类别Apple提供的here，您将获得高斯模糊，看起来非常像iOS 7中的模糊。
Box Blur
您还可以使用以下boxBlurImageWithBlur: UIImage类别使用框模糊。这是基于你可以找到{algorythem}的here。
@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
现在您正在计算要模糊的屏幕区域，将其传递到模糊类别并接收已模糊的UIImage背面，现在剩下的就是将该模糊图像设置为您将成为视图的背景呈现。就像我说的那样，这对于Apple正在做的事情来说不是一个完美的匹配，但它看起来仍然很酷。
希望它有所帮助。
答案 3 :(得分：24)
iOS8回答了这些问题。
- (instancetype)initWithEffect:(UIVisualEffect *)effect
或斯威夫特：
init(effect effect: UIVisualEffect)
答案 4 :(得分：19)
我刚刚编写了我的UIView的小子类，它能够在任何自定义视图上生成本机iOS 7模糊。它使用UIToolbar但以安全的方式通过实时动画更改它的边框，边界，颜色和alpha。
如果您发现任何问题，请告诉我。
https://github.com/ivoleko/ILTranslucentView
答案 5 :(得分：10)
苹果公司工程师声称，为了提高性能，他们正在直接从gpu缓冲区读取，这会引发安全问题，这就是为什么没有公共API来实现这一目标的原因。
答案 6 :(得分：7)
这是一种非常简单的方法：https://github.com/JagCesar/iOS-blur
只需复制UIToolbar图层即可完成，AMBlurView会为您完成。 好吧，它不像控制中心那么模糊，但模糊不清。
请记住，iOS7属于NDA。
答案 7 :(得分：7)
您可以在此页面中找到Apple's DEMO的解决方案： WWDC 2013，找出并下载UIImageEffects示例代码。
然后用@Jeremy Fox的代码。我把它改成了
- (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];
}
希望这会对你有所帮助。
答案 8 :(得分：7)
这是您可以在WWDC的视频中看到的解决方案。你必须做一个高斯模糊，所以你要做的第一件事是添加一个新的.m和.h文件与我在这里写的代码，然后你必须制作和屏幕拍摄，使用所需的效果和将它添加到你的视图，然后你的UITable UIView或者必须透明，你可以使用applyBlurWithRadius来存档所需的效果，这个调用适用于任何UIImage。
最后，模糊图像将成为背景，上面的其他控件必须是透明的。
要使其工作，您必须添加下一个库：
Acelerate.framework，UIKit.framework，CoreGraphics.framework
我希望你喜欢它。
快乐的编码。
//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;
}
答案 9 :(得分：6)
这里的每个响应都是使用 vImageBoxConvolve_ARGB8888 这个功能非常非常慢，如果性能不是高优先级要求，但是如果你使用它来在两个视图控制器之间进行转换（例如）这种方法意味着超过1秒或更长时间，这对应用程序的用户体验非常不利。
如果您希望将所有这些图像处理留给GPU（你应该），你可以获得更好的效果，并且可以获得更好的效果，并且可以在50ms内完成（假设你在第一种方法中有1秒的时间），所以，让我们做。
首先下载GPUImage Framework（BSD Licensed）here。
接下来，从GPUImage添加以下类（.m和.h）（我不确定这些是模糊效果所需的最小值）
- GPUImage.h
- GPUImageAlphaBlendFilter
- GPUImageFilter
- GPUImageFilterGroup
- GPUImageGaussianBlurPositionFilter
- GPUImageGaussianSelectiveBlurFilter
- GPUImageLuminanceRangeFilter
- GPUImageOutput
- GPUImageTwoInputFilter
- GLProgram
- GPUImageBoxBlurFilter
- GPUImageGaussianBlurFilter
- GPUImageiOSBlurFilter
- GPUImageSaturationFilter
- GPUImageSolidColorGenerator
- GPUImageTwoPassFilter
-
GPUImageTwoPassTextureSamplingFilter
-
式IO / GPUImage-Prefix.pch
- iOS / GPUImageContext
- 式IO / GPUImageMovieWriter
- 式IO / GPUImagePicture
- 式IO / GPUImageView
接下来，在UIImage上创建一个类别，它会为现有的UIImage添加模糊效果：
#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
最后，将以下框架添加到您的项目中：
AVFoundation CoreMedia corevideo的 OpenGLES
是的，用这种更快的方法获得乐趣;）
答案 10 :(得分：4)
您可以尝试使用我的自定义视图，该视图具有模糊背景的功能。它通过伪造背景快照并模糊它来实现这一点，就像Apple的WWDC代码中的那样。它使用起来非常简单。
我还做了一些改进，在不失去性能的情况下伪造动态模糊。我的视图背景是一个scrollView，它随视图滚动，从而为其余的superview提供模糊效果。
请参阅my GitHub
上的示例和代码答案 11 :(得分：2)
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？