iOS 7のぼかし表示に似た効果をどのようにして生成できますか？
私はAppleの公に発表されたiOS 7サンプルスクリーンからこのぼやけた背景を複製しようとしています：
この質問 以下の内容にCIフィルタを適用することを提案しますが、それはまったく異なるアプローチです。多くの理由から、iOS 7が以下のビューの内容をキャプチャしないことは明らかです。
- 下のビューのスクリーンショットをキャプチャし、iOS 7のぼかしスタイルを模倣するのに十分な大きさの半径を持つCIGaussianBlurフィルタを適用すると、シミュレータでも1〜2秒かかります。
- IOS 7のぼかしビューでは、ビデオやアニメーションなどの動的なビューをぼやけずにぼやけさせることができます。
この効果を生み出すためにどのようなフレームワークを使用できるのか、そして現在の公開APIで同様の効果を生み出すことが可能であれば、誰でも仮説を立てることができますか？
編集：（コメントより）Appleがそれをどのように行っているのか正確にはわかりませんが、私たちができる基本的な仮定はありますか。私たちは彼らがハードウェアを使っていると思いますよね？
効果は実際にはその背後にあるものを認識していないように、効果は各ビューに自己完結していますか？それとも、ぼかしがどのように機能するかに基づいて、ぼかしの背後にあるコンテンツを考慮に入れる必要がありますか。
効果の背後にあるコンテンツが関連している場合、Appleは以下のコンテンツの「フィード」を受信し、それらを継続的にぼかしてレンダリングしていると想定できますか？
なぜその効果を再現するのは面倒なのでしょうか。ビューの後ろにUIToolbarを引くだけです。
myView.backgroundColor = [UIColor clearColor];
UIToolbar* bgToolbar = [[UIToolbar alloc] initWithFrame:myView.frame];
bgToolbar.barStyle = UIBarStyleDefault;
[myView.superview insertSubview:bgToolbar belowSubview:myView];
アップルは、この機能を含むUIImageのカテゴリとしてWWDCでコードを公開しました。開発者アカウントをお持ちの場合は、このリンクにアクセスしてUIImageカテゴリ（および残りのサンプルコード）を入手できます。 https：// developer.Apple.com/wwdc/schedule/ セクション226を参照して詳細をクリックしてください。まだ試していませんが、iOS 6では効果がかなり遅くなると思います。IOS7には、ぼかしへの入力として使用される初期スクリーンショットの取得をより高速にするいくつかの機能強化があります。
実際、私はこれを達成するのはかなり簡単だろうと思います。それはおそらく作動しないか、あるいはAppleが行っていることと全く同じに見えないでしょうが、非常に近いかもしれません。
まず第一に、あなたはあなたが発表する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;
}
ガウスぼかし - 推奨
Appleが提供しているUIImage+ImageEffectsカテゴリ こちら を使うと、iOS 7のぼかしに非常によく似たガウスぼかしが得られます。
ボックスぼかし
次のboxBlurImageWithBlur: UIImageカテゴリを使ってボックスのぼかしを使うこともできます。これはあなたが見つけることができるアルゴリズムに基づいています ここ 。
@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がしていることと完全には一致しないでしょう、しかしそれはまだかなりクールに見えるべきです。
それが役に立てば幸い。
iOS8はこれらの質問に答えました。
- (instancetype)initWithEffect:(UIVisualEffect *)effect
またはSwift：
init(effect effect: UIVisualEffect)
私はUIViewの私の小さなサブクラスを書いたところです。それはどんなカスタムビューでもネイティブiOS 7のぼかしを作り出す能力を持っています。 UIToolbarを使用していますが、フレーム、境界、色、およびアルファをリアルタイムのアニメーションで変更するための安全な方法です。
あなたが何か問題に気付いたら私に知らせてください。
https://github.com/ivoleko/ILTranslucentView
Appleのエンジニアは、このパフォーマンスをgpuバッファから直接読み取っているため、セキュリティ上の問題があると主張する噂があります。
これはWWDCのビデオで見ることができる解決策です。ガウスぼかしをしなければならないので、最初にやるべきことは、ここに書いているコードを使って新しい.mと.hファイルを追加することです。それをあなたのビューに追加し、それからあなたのUITable UIViewまたはこれまで透明でなければならないものは、あなたは望ましい効果をアーカイブするためにapplyBlurWithRadiusで遊ぶことができます。
最後に、ぼやけた画像が背景になり、上記の残りのコントロールは透明になります。
これが機能するためには、次のライブラリを追加する必要があります。
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;
}
あなたはこのページでAppleのデモからあなたの解決策を見つけることができます： WWDC 201 、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];
}
これがお役に立てば幸いです。
これがそれをする本当に簡単な方法です： https://github.com/JagCesar/iOS-blur
UIToolbarのレイヤーをコピーするだけで、完了です。AMBlurViewがそれを行います。さて、それはコントロールセンターほどぼやけていませんが、それは十分にぼやけています。
IOS7はNDAの下にあることを忘れないでください。
ここでのすべての応答はvImageBoxConvolve_ARGB8888を使用しています。これを使用して2つのView Controller間を移行する（たとえば）このアプローチは1秒以上の時間を意味します。これはアプリケーションのユーザーエクスペリエンスにとって非常に悪いことです。
この画像処理をすべてGPUに任せた方がいい（そしてそうすべきです）場合は、はるかに優れた効果と50msを丸める素晴らしい時間（最初のアプローチで1秒の時間があると仮定）を得ることができます。 。
最初にGPUImageフレームワーク（BSDライセンス）をダウンロードしてください ここ 。
次に、GPUImageから次のクラス（.mと.h）を追加します（これらがぼかし効果のために最低限必要なものかどうかはわかりません）。
- GPUImage.h
- GPUImageAlphaBlendFilter
- GPUImageFilter
- GPUImageFilterGroup
- GPUImageGaussianBlurPositionFilter
- GPUImageGaussianSelectiveBlurFilter
- GPUImageLuminanceRangeFilter
- GPUImageOutput
- GPUImageTwoInputFilter
- GLプログラム
- GPUImageBoxBlurFilter
- GPUImageGaussianBlurFilter
- GPUIイメージOSBlurFilter
- GPUImageSaturationFilter
- GPUImageSolidColorGenerator
- GPUImageTwoPassFilter
GPUImageTwoPassTextureSamplingFilter
iOS/GPUImage-Prefix.pch
- iOS/GPUImageContext
- iOS/GPUImageMovieWriter
- iOS/GPUImagePicture
- iOS/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コアメディアコアビデオOpenGLES
ええ、このずっと速いアプローチを楽しんでください;）
あなたは私のカスタムビューを使ってみることができます。そして、それは背景をぼかす能力を持っています。これは、AppleのWWDCコードのように、背景のスナップショットを取ってそれをぼかして偽造することによってこれを行います。使い方はとても簡単です。
また、パフォーマンスを損なうことなくダイナミックブラーを偽造するための改善も行いました。私のビューの背景はビューと一緒にスクロールするscrollViewで、スーパービューの残りの部分にぼかし効果を与えます。
my GitHub の例とコードを見てください
Core Backgroundは望ましいiOS 7効果を実装しています。
https://github.com/justinmfischer/core-background
免責事項：私はこのプロジェクトの著者です