web-dev-qa-db-fra.com

Effet Verre givré (flou iOS 7)

J'essaie d'appliquer un effet de verre dépoli dans un UIImageView .

J'ai essayé d'implémenter ce que j'ai trouvé dans cette question , mais le résultat n'était pas acceptable. Je voulais quelque chose comme ça:

Frosted Glass Effect

En outre, nous pouvons voir que iOS 7 utilise ce type d'effet à de nombreux endroits. Comment pouvons-nous le reproduire?

ioscocoa-touchios7uikit
33
Natan R.

Un bon tutoriel sur CoreImage est ici, montrant comment appliquer des filtres et plus encore:

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

MISE À JOUR 1

Donc, après un peu de recherche, j'ai fini par découvrir que l'image de base pour iOS était encore incomplète, par rapport à la version OS X de la bibliothèque. J'ai donc beaucoup cherché sur Google, et je trouve deux solutions, l'une plus simple, et l'autre bibliothèque beaucoup plus large et complexe.

Ainsi, par exemple, en quelques lignes, je peux obtenir le résultat que je veux (où originalImage est l'UIImage pour appliquer l'effet):

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

MISE À JOUR 2

Après Apple a annoncé iOS 7, certains développeurs ont trouvé une solution pour faire la même chose que Apple l'a fait dans les applications iOS par défaut, comme Apple n'a pas fourni d'API pour cela. La solution la plus simple et la meilleure, à mon avis, est celle-ci . Pourquoi je pense que c'est la meilleure? Parce que même si une vue derrière elle se déplace, le flou fonctionne toujours très bien avec l'effet mis à jour, car nous nous attendons à ce qu'il fonctionne. Cependant, gardez à l'esprit qu'il dépend du SDK iOS 7 pour fonctionner, et cela peut être risqué si Apple change UIToolbar.

MISE À JOUR 3

Apple a mentionné que lors de la WWDC 2013 (Session 226 - Implémentation de l'IU engageante sur iOS), ils fourniraient une classe de catégorie sur UIImage, appelée UIImage + ImageEffects (j'ai googlé , et trouvé ici , mais il est disponible dans Developer Portal - recherchez UIImageEffects dans la boîte de recherche ). Avec cette catégorie, vous pouvez appliquer le flou dans un UIImage statique, en utilisant plusieurs méthodes (clair, foncé, avec une couleur spécifique, etc.). Hier aussi j'ai vu ce composant et je l'ai trouvé assez intéressant, car vous pouvez appliquer l'effet (basé sur la catégorie mentionnée ci-dessus) dans un cadre.

MISE À JOUR 4

Enfin, sur iOS 8, Apple a publié de nouvelles classes qui peuvent facilement faire du flou en direct. Avec UIVisualEffect et UIVisualEffectView, vous pouvez rapidement ajouter du flou en direct à vos applications . Voici un bon tutoriel de Ryan Nystrom sur la façon d'utiliser ces classes (et dans le flou en général) :

51
Natan R.

Solution pour iOS 7 et 8, sans utiliser CoreImage ou CoreGraphics du tout:

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

(en supposant que vous ne ciblez pas les versions antérieures à iOS 7; si vous l'êtes, vous devrez tester la version iOS dans le bloc else)

Cette solution s'applique à toutes les vues, pas seulement aux images.

21
KPM

Utilisation d'UIImageEffects

Si vous voulez plus de contrôle lors de l'application du flou, vous pouvez utiliser le UIImageEffects d'Apple (disponible via leur exemple de code).

Vous pouvez copier le code de UIImageEffects à partir de la bibliothèque développeur d'Apple: Flou et teinte d'une image

Et voici comment l'utiliser:

#import "UIImageEffects.h"
...

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

Jetez un oeil à le Core Image Programming Guide . Il semble que le filtre stylisé et le filtre flo puissent répondre à vos besoins. Je n'ai jamais travaillé avec Core Image auparavant, mais je pense qu'il peut y avoir de bonnes sessions WWDC qui les impliquent. La documentation a n exemple de code de base ici .

1
Moshe