Como usar o UIVisualEffectView para desfocar a imagem?


208

Alguém poderia dar um pequeno exemplo de aplicação do desfoque a uma imagem? Eu tenho tentado descobrir o código por um tempo agora :( ainda novo no obj c!

O UIVisualEffectViewfornece uma abstração simples sobre efeitos visuais complexos. Dependendo do efeito desejado, os resultados podem afetar o conteúdo em camadas atrás da visualização ou o conteúdo adicionado ao contentView da visualização.

Aplique a UIVisualEffectViewem uma vista existente para aplicar um efeito de desfoque ou vibração à vista existente. Depois de adicionar o UIVisualEffectView à hierarquia de visualizações, adicione quaisquer subvisões ao contentView do UIVisualEffectView. Não adicione subvisões diretamente a UIVisualEffectViewele mesmo.

https://developer.apple.com/documentation/uikit/uivisualeffectview#//apple_ref/occ/instp/UIVisualEffectView/contentView


1
Tenha cuidado para adicionar vistas para UIVisualEffectView's contentView github.com/onmyway133/blog/issues/124
onmyway133

Além disso, se você o estiver adicionando a uma subvisão e definindo seu quadro, não se esqueça de atualizar o quadro em viewDidLayoutSubviews para garantir que a rotação funcione.
Steve Moser

Respostas:


415

Basta colocar essa visualização de desfoque no imageView. Aqui está um exemplo em Objective-C:

UIVisualEffect *blurEffect;
blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];

UIVisualEffectView *visualEffectView;
visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];

visualEffectView.frame = imageView.bounds;
[imageView addSubview:visualEffectView];

e Swift:

var visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))    

visualEffectView.frame = imageView.bounds

imageView.addSubview(visualEffectView)

3
muito obrigado! Esqueci-me sobre a definição do quadro :( Não há nada no google ainda para visual, de modo que este deve ser o primeiro termo de busca :)
cNoob

1
Espero que a API não mude! Essa é uma das razões pelas quais as APIs da Apple ainda não lançadas podem ser complicadas. Por exemplo, algumas das APIs do UIKit Dynamics mudam ligeiramente entre a versão beta e a versão. Nada importante, mas eles teriam quebrado qualquer código de exemplo gravado nas APIs originais.
Zev Eisenberg

5
Existe alguma maneira de animar / desfocar o desfoque?
Ruben Martinez Jr.

3
@BS Você pode animar o alfa da visualização do efeito visual. Estrondo.
Maciej Trybiło

2
O UIBlurEffect é incrível, mas observe que ele não funciona em dispositivos mais antigos, como o iPad2 - passei horas tentando descobrir por que ele estava apenas colocando uma camada translúcida na tela e não desfocando - tudo porque estava testando em um dispositivo mais antigo
Keith

135

Aqui está como usar UIVibrancyEffect e UIBlurEffect com UIVisualEffectView

Objetivo-C:

// Blur effect
UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
[blurEffectView setFrame:self.view.bounds];
[self.view addSubview:blurEffectView];

// Vibrancy effect
UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffect];
UIVisualEffectView *vibrancyEffectView = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];
[vibrancyEffectView setFrame:self.view.bounds];

// Label for vibrant text
UILabel *vibrantLabel = [[UILabel alloc] init];
[vibrantLabel setText:@"Vibrant"];
[vibrantLabel setFont:[UIFont systemFontOfSize:72.0f]];
[vibrantLabel sizeToFit];
[vibrantLabel setCenter: self.view.center];

// Add label to the vibrancy view
[[vibrancyEffectView contentView] addSubview:vibrantLabel];

// Add the vibrancy view to the blur view
[[blurEffectView contentView] addSubview:vibrancyEffectView];

Swift 4:

    // Blur Effect
    let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    blurEffectView.frame = view.bounds
    view.addSubview(blurEffectView)

    // Vibrancy Effect
    let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect)
    let vibrancyEffectView = UIVisualEffectView(effect: vibrancyEffect)
    vibrancyEffectView.frame = view.bounds

    // Label for vibrant text
    let vibrantLabel = UILabel()
    vibrantLabel.text = "Vibrant"
    vibrantLabel.font = UIFont.systemFont(ofSize: 72.0)
    vibrantLabel.sizeToFit()
    vibrantLabel.center = view.center

    // Add label to the vibrancy view
    vibrancyEffectView.contentView.addSubview(vibrantLabel)

    // Add the vibrancy view to the blur view
    blurEffectView.contentView.addSubview(vibrancyEffectView)

1
A solução funciona mesmo sem subclassificação, apenas definirextension UILabel { override func tintColorDidChange() { textColor = tintColor; super.tintColorDidChange() } }
Palimondo

1
A Apple parece ter corrigido o erro. A solução subclasse / extensão não é mais necessário no iOS 8 beta 2.
Benjamin Mayo

2
Obrigado. Testei e confirmei a correção de bug e editei a resposta.
Matt Rundle

1
Estou tentando adicionar isso à minha visualização, mas toda vez que a apresento, ela fica borrada repetidamente até obter um fundo branco ... Estou removendo a visualização com removeFromSuperView depois de a dispensar, mas obtive o mesmo resultado .. .. alguma ideia?
George Asda

@GeorgeAsda que tal em vez de ligar removeFromSuperView, você faz o [self.visualEffectView setHidden:NO];? Alocar e adicionar à visualização é uma operação cara do que ocultar ou exibir.
Yoon Lee

46

Você também pode usar o construtor de interface para criar esses efeitos facilmente para situações simples. Como os valores z das vistas dependem da ordem em que estão listados no Esboço do documento, você pode arrastar um UIVisualEffectViewpara o contorno do documento antes da vista que deseja desfocar. Isso cria automaticamente um aninhado UIView, que é a contentViewpropriedade do dado UIVisualEffectView. Aninhe as coisas dentro dessa exibição que você deseja que apareçam sobre o desfoque.

XCode6 beta5

Você também pode aproveitar facilmente a vibração UIVisualEffect, que criará automaticamente outro aninhado UIVisualEffectViewno esboço do documento com a vibração ativada por padrão. Você pode adicionar um rótulo ou exibição de texto ao aninhado UIView(novamente, a contentViewpropriedade do UIVisualEffectView), para obter o mesmo efeito que o elemento da interface do usuário "> deslize para desbloquear".

insira a descrição da imagem aqui


Você pode confirmar que o que mostra é realmente desfocado? Minha imagem (o que você chamou de "BackgroundPhoto" em sua hierarquia) fica esmaecida sob a exibição translúcida Blur Style: Dark. (Versão de lançamento do Xcode 6.01 e usando o iOS Simulator)
tobinjim

O que você quer dizer com 'está esmaecido'? Você não acha que está borrado então?
ohhh

Ok, vou dar uma olhada em algumas horas.
ohhh

Obrigado! Você tem uma hierarquia de visão em seu BackgroundPhoto que é recolhida nas capturas de tela ... Acabei de usar um UIImageView e atribuí uma foto a ele (um cachorro de cor clara contra fundo verde - a definição nítida entre as pernas brancas e a grama verde é tão nítido quando coberto pela visualização do efeito visual quanto quando não estiver).
precisa saber é o seguinte

1
Eu vi que a mudança do tipo de borrão de escuro, a etiqueta fica cor branca ...
Daniel

8

Prefiro criar efeitos visuais via Storyboard - nenhum código usado para criar ou manter elementos da interface do usuário. Também me dá suporte total à paisagem. Fiz uma pequena demonstração do uso de UIVisualEffects com Blur e também Vibrancy.

Demo no Github


8

Se alguém quiser a resposta no Swift:

var blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark) // Change .Dark into .Light if you'd like.

var blurView = UIVisualEffectView(effect: blurEffect)

blurView.frame = theImage.bounds // 'theImage' is an image. I think you can apply this to the view too!

Atualização:

A partir de agora, ele está disponível no IB para que você não precise codificar nada :)


2
-(void) addBlurEffectOverImageView:(UIImageView *) _imageView
{
    UIVisualEffect *blurEffect;
    blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];

    UIVisualEffectView *visualEffectView;
    visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];

    visualEffectView.frame = _imageView.bounds;
    [_imageView addSubview:visualEffectView];
}

Adicione um texto com a resposta para saber como a sua resposta ajuda o OP a corrigir o problema postado
resposta

0

Isso é usado para desfocar fundos, claros ou escuros, para que o texto possa ser sobreposto mais facilmente. Opcionalmente, você pode ativar a vibração, que faz com que o texto seja renderizado em uma cor brilhante e contrastante ao lado do desfoque.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.