35 votes

iPhone SDK - Effet Verre Dépoli (iOS 7 Blur)

Je suis en train d'appliquer un verre dépoli effet dans une UIImageView.

J'ai essayé de mettre en œuvre ce que j'ai trouvé dans cette question, mais le résultat n'était pas acceptable. Je voulais quelque chose comme ceci:

Frosted Glass Effect

Des idées?

Mise à JOUR:

Aussi, nous pouvons voir que iOS 7 utilise ce genre d'effet dans beaucoup d'endroits. Comment peut-on reproduire?

51voto

Natan R. Points 3008

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

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

Mise à JOUR 1

Ainsi, après un peu de recherche, j'ai fini par découvrir que la Base de l'Image de l'iOS est encore incomplète, si l'on compare à la version OS X de la bibliothèque. J'ai donc googlé beaucoup, et j'ai trouver deux solutions, l'une des plus simples, et l'autre, beaucoup plus large et complexe de la bibliothèque.

Ainsi, par exemple, en quelques lignes, je peux obtenir le résultat que je veux (où originalImage est le 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 trouvent une solution pour faire la même chose que Apple n'a par défaut dans les applications iOS, Apple n'a pas fournir une API pour que. La plus simple et la meilleure solution, à mon avis, est-ce un. Pourquoi je pense que c'est le meilleur? Parce que même si certains considèrent que derrière il se déplace, le flou ne fonctionne toujours très bien avec la mise à jour de l'effet, comme nous le pensons, il doit travailler. Cependant, gardez à l'esprit que cela dépend de l'iOS 7 SDK afin de travailler, et il peut être risqué si Apple change UIToolbar.

Mise à JOUR 3

Apple a mentionné, lors de la WWDC 2013 (Session 226 - la mise en Œuvre de Mobiliser de l'INTERFACE utilisateur sur iOS), ils assureront une catégorie de classe sur UIImage, appelé UIImage+ImageEffects (j'ai googlé, et trouvé ici, mais il est disponible dans le Portail des Développeurs de recherche pour UIImageEffects dans la zone de recherche). Avec cette catégorie, vous pouvez appliquer l'effet de flou en statique UIImage, à l'aide de plusieurs méthodes (clair, foncé, avec une couleur spécifique, etc.). Aussi, hier, j'ai vu ce composant et l'a trouvé très intéressant, comme vous pouvez appliquer l'effet (basée sur cette catégorie) dans un cadre.

Mise à JOUR 4

Enfin, sur iOS 8, Apple a publié de nouvelles classes qui peuvent faire vivre flou facilement. Avec UIVisualEffect et UIVisualEffectView, vous pouvez rapidement ajouter live flou pour 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):

21voto

KPM Points 1679

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

 - (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 visiez pas des versions antérieures à iOS 7; si vous le faites, vous devrez tester la version iOS dans le bloc else )

Cette solution s'applique à n'importe quelle vue, pas seulement aux images.

1voto

Moshe Points 23825

Jetez un oeil à la Base de l'Image Guide de Programmation. Il semble que la stylisation du filtre et le filtre de flou peuvent répondre à vos besoins. Je n'ai jamais travaillé avec Core Image avant, mais je pense qu'il y a peut-être quelques bonnes sessions de la WWDC qui les concernent. La documentation a une base exemple de code ici.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X