web-dev-qa-db-ja.com

すりガラス(iOS 7ぼかし)効果

IImageViewの曇らされたガラス効果を適用しようとしています。

私が見つけたものを実装しようとしました この質問で ですが、結果は受け入れられませんでした。私はこのようなものが欲しかった:

Frosted Glass Effect

また、iOS 7は多くの場所でこの種の効果を使用していることがわかります。どうすれば再現できますか?

33
Natan R.

CoreImageに関する優れたチュートリアルがここにあり、フィルターの適用方法などを示しています。

http://www.raywenderlich.com/5689/beginning-core-image-in-ios-5

更新1

そのため、少し調べて、OS Xバージョンのライブラリと比較すると、iOSのコアイメージがまだ不完全であることを発見しました。だから私はたくさんグーグルで調べましたが、2つの解決策を見つけました。1つはより単純なもので、もう1つはもっと広くて複雑なライブラリです。

したがって、たとえば、数行で必要な結果を得ることができます(originalImageはエフェクトを適用するUIImageです):

GPUImageGaussianBlurFilter *blurFilter = [[GPUImageGaussianBlurFilter alloc] init];
blurFilter.blurSize = 2;
UIImage *blurImage = [blurFilter imageByFilteringImage:resizedImage];

更新2

Apple iOS 7の発表後、一部の開発者は、AppleがデフォルトiOSアプリで行ったのと同じ回避策を見つけ、AppleはそのためのAPIを提供しませんでした。私の意見では、これが最も簡単でより良い解決策はこれです 。背後の一部のビューが移動しても、更新されたエフェクトではぼかしが機能するはずです。ただし、それはiOS 7 SDKに依存していることに注意してください動作し、AppleがUIToolbarを変更すると、リスクが生じる可能性があります。

更新3

Appleは、WWDC 2013(セッション226-iOSでのEngaging UIの実装)で、UIImageにUIImage + ImageEffectsと呼ばれるカテゴリクラスを提供すると述べましたそれは、 およびここにあります ですが、 開発者ポータル-検索ボックスでUIImageEffectsを検索 )で利用可能です。このカテゴリでは、いくつかの方法(明るい、暗い、特定の色など)を使用して、静的UIImageにぼかしを適用できます。また、昨日 私はこのコンポーネントを見ました で、フレーム内で(上記のカテゴリに基づいて)効果を適用できるので、かなり興味深いことがわかりました。

UPDATE 4

最後に、iOS 8では、Appleライブブラーを簡単に実行できる新しいクラスをリリースしました。UIVisualEffectおよびUIVisualEffectViewを使用すると、アプリにライブブラーをすばやく追加できます。 ここに、これらのクラスの使用方法に関する(および一般的にぼかしで)Ryan Nystromからの良いチュートリアルがあります

51
Natan R.

CoreImageまたはCoreGraphicsをまったく使用しないiOS 7および8のソリューション:

- (void)addBlurToView:(UIView *)view {
    UIView *blurView = nil; 

    if([UIBlurEffect class]) { // iOS 8
        UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight];
        blurView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
        blurView.frame = view.frame;

    } else { // workaround for iOS 7
        blurView = [[UIToolbar alloc] initWithFrame:view.bounds];
    }

    [blurView setTranslatesAutoresizingMaskIntoConstraints:NO];

    [view addSubview:blurView];
    [view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[blurView]|" options:0 metrics:0 views:NSDictionaryOfVariableBindings(blurView)]];
    [view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[blurView]|" options:0 metrics:0 views:NSDictionaryOfVariableBindings(blurView)]];
}

(iOS 7よりも古いバージョンをターゲットにしていないと仮定します。もしそうであれば、elseブロックでiOSバージョンをテストする必要があります)

このソリューションは、画像だけでなく、あらゆるビューに適用されます。

21
KPM

UIImageEffectsを使用する

ぼかしを適用するときにさらに制御したい場合は、AppleのUIImageEffects(サンプルコードから入手可能)を使用できます。

Appleの開発者ライブラリからUIImageEffectsのコードをコピーできます: 画像のぼかしと色付け

そして、これを使用する方法は次のとおりです。

#import "UIImageEffects.h"
...

self.yourImageView.image = [UIImageEffects imageByApplyingLightEffectToImage:[UIImage imageNamed:@"yourImage.png"]];
2
Zakaria Braksa

The Core Image Programming Guide をご覧ください。 stylize filterblur filter がニーズに合っているようです。 Core Imageで作業したことはありませんが、それらに関係するいくつかの優れたWWDCセッションがあると思います。ドキュメントには ここにサンプルコードの基本部分 があります。

1
Moshe