No aplicativo Música do novo iOS, podemos ver uma capa do álbum por trás de uma exibição que a desfoca.
Como algo assim pode ser realizado? Eu li a documentação, mas não encontrei nada lá.
ios
objective-c
graphics
filtering
core-image
kondratyevdev
fonte
fonte
Respostas:
Você pode usar
UIVisualEffectView
para alcançar esse efeito. Esta é uma API nativa que foi ajustada para desempenho e excelente duração da bateria, além de ser fácil de implementar.Rápido:
Objetivo-C:
Se você estiver apresentando esse controlador de exibição de maneira modal para desfocar o conteúdo subjacente, será necessário definir o estilo de apresentação modal como Contexto Atual e definir a cor de plano de fundo para limpar, para garantir que o controlador de exibição subjacente permaneça visível assim que for apresentado no topo.
fonte
insertSubView:belowSubView:
comentário neste código, tenho usado o seguinte para definir o borrão como o fundo do ponto de vista:view.insertSubview(blurEffectView, atIndex: 0)
UIAccessibilityIsReduceTransparencyEnabled()
.Imagem principal
Como essa imagem na captura de tela é estática, você pode usar a
CIGaussianBlur
partir da imagem principal (requer iOS 6). Aqui está um exemplo: https://github.com/evanwdavis/Fun-with-Masks/blob/master/Fun%20with%20Masks/EWDBlurExampleVC.mLembre-se, isso é mais lento que as outras opções nesta página.
Desfoque de pilha (Box + Gaussian)
Acelere o Framework
Na sessão “Implementando a interface do usuário envolvente no iOS” da WWDC 2013, a Apple explica como criar um fundo desfocado (às 14:30) e menciona um método
applyLightEffect
implementado no código de exemplo usando Accelerate.framework.GPUImage usa sombreadores OpenGL para criar borrões dinâmicos. Ele tem vários tipos de desfoque: GPUImageBoxBlurFilter, GPUImageFastBlurFilter, GaussianSelectiveBlur, GPUImageGaussianBlurFilter. Existe até um GPUImageiOSBlurFilter que "deve replicar completamente o efeito de desfoque fornecido pelo painel de controle do iOS 7" ( tweet , artigo ). O artigo é detalhado e informativo.
Em indieambitions.com: faça um desfoque usando o vImage . O algoritmo também é usado no iOS-RealTimeBlur .
De Nick Lockwood: https://github.com/nicklockwood/FXBlurView O exemplo mostra o desfoque em uma exibição de rolagem. Ele desfoca com dispatch_async e sincroniza para chamar atualizações com UITrackingRunLoopMode para que o desfoque não fique atrasado quando o UIKit dá mais prioridade à rolagem do UIScrollView. Isso é explicado no livro de Nick, iOS Core Animation , que é ótimo.
iOS-blur Isso pega a camada de desfoque da UIToolbar e a coloca em outro lugar. A Apple rejeitará seu aplicativo se você usar esse método. Consulte https://github.com/mochidev/MDBlurView/issues/4
Do blog da Evadne: LiveFrost : envolvimento rápido e síncrono do instantâneo UIView . Ótimo código e ótima leitura. Algumas idéias deste post:
Outras coisas
Andy Matuschak disse no Twitter: "você sabe, muitos dos lugares em que parece que estamos fazendo isso em tempo real são estáticos com truques inteligentes".
No doubleencore.com, eles dizem que “descobrimos que um raio de desfoque de 10 pontos mais um aumento de 10 pontos na saturação imitam melhor o efeito de desfoque do iOS 7 na maioria das circunstâncias”.
Uma espiada nos cabeçalhos privados do SBFProceduralWallpaperView da Apple .
Finalmente, esse não é um borrão real, mas lembre-se de que você pode definir o rasterizationScale para obter uma imagem pixelizada: http://www.dimzzy.com/blog/2010/11/blur-effect-for-uiview/
fonte
UIImage
caso contrário ele vai maneira olhar muito grande em um dispositivo Retina ...Decidi postar uma versão Objective-C escrita a partir da resposta aceita, apenas para fornecer mais opções nesta pergunta.
As restrições podem ser removidas se você quiser, caso suporte apenas o modo retrato ou apenas adicionei um sinalizador a essa função para usá-las ou não.
fonte
Acho que não tenho permissão para postar o código, mas a postagem acima mencionando o código de exemplo da WWDC está correta. Aqui está o link: https://developer.apple.com/downloads/index.action?name=WWDC%202013
O arquivo que você está procurando é a categoria em UIImage e o método é applyLightEffect.
Como observei acima em um comentário, o Apple Blur tem saturação e outras coisas acontecendo além do desfoque. Um simples borrão não funciona ... se você deseja imitar o estilo deles.
fonte
Eu acho que a solução mais fácil para isso é substituir o UIToolbar, que desfoca tudo por trás dele no iOS 7. É bastante sorrateiro, mas é muito simples de implementar e rápido!
Você pode fazer isso com qualquer visualização, apenas faça uma subclasse em
UIToolbar
vez deUIView
. Você pode até mesmo fazê-lo com umUIViewController
'sview
propriedade, por exemplo ...1) crie uma nova classe que seja uma "Subclasse de"
UIViewController
e marque a caixa "Com XIB para interface do usuário".2) Selecione View e vá para o inspetor de identidade no painel direito (alt-command-3). Mude a "Classe" para
UIToolbar
. Agora vá ao inspetor de atributos (alt-command-4) e altere a cor "Background" para "Clear Color".3) Adicione uma subvisão à visualização principal e conecte-a a um IBOutlet na sua interface. Ligue
backgroundColorView
. Será algo parecido com isto, como uma categoria privada no.m
arquivo de implementação ( ).4) Vá para o
.m
arquivo de implementação do controlador de exibição ( ) e altere o-viewDidLoad
método, da seguinte maneira:Isso lhe dará uma visão cinza escura, que desfoca tudo por trás dela. Não é engraçado, não há desfocagem lenta da imagem principal, usando tudo o que está ao seu alcance fornecido pelo OS / SDK.
Você pode adicionar a visão deste controlador de visão a outra visão, da seguinte maneira:
Deixe-me saber se algo não estiver claro, terei prazer em ajudar!
Editar
O UIToolbar foi alterado na 7.0.3 para fornecer um efeito indesejável ao usar um desfoque colorido.
Nós costumávamos definir a cor usando
barTintColor
, mas se você estava fazendo isso antes, precisará configurar o componente alfa para menos de 1. Caso contrário, a sua barra de ferramentas do UITool será completamente opaca - sem desfoque.Isso pode ser alcançado da seguinte forma: (tendo em mente
self
uma subclasse deUIToolbar
)Isso dará um tom azulado à visão borrada.
fonte
self.backgroundColorView.opaque = NO;
self.backgroundColorView.alpha = 0.5;
self.backgroundColorView.backgroundColor = [UIColor colorWithWhite:0.3 alpha:1];
Mas o fundo não está desfocado, apenas produza um bom efeito. obrigado mesmo assim!Aqui está uma implementação rápida no Swift usando o CIGaussianBlur:
fonte
Escala de desfoque personalizada
Você pode tentar
UIVisualEffectView
com a configuração personalizada como -Saída: - para
blurEffect.setValue(1...
&blurEffect.setValue(2..
fonte
(NSClassFromString("_UICustomVibrancyEffect") as! UIVibrancyEffect.Type).init()
. Realmente apreciaria alguma ajuda!Aqui está uma maneira fácil de adicionar desfoque personalizado sem pechinchar com APIs privadas usando UIViewPropertyAnimator :
Primeiro, declare a propriedade da classe:
Em seguida, defina sua exibição de desfoque em
viewDidLoad()
:Nota: Esta solução não é adequada para
UICollectionView
/UITableView
célulasfonte
No Xcode, você pode fazer isso facilmente. Siga as etapas do xcode. Drage a visualização do efeito visual na sua visualização ou visualização de imagem.
Happy Coding :)
fonte
A resposta aceita está correta, mas falta uma etapa importante aqui, caso essa visualização - para a qual você deseja um fundo desfocado - seja apresentada usando
[self presentViewController:vc animated:YES completion:nil]
Por padrão, isso negará o desfoque, pois o UIKit remove a exibição do apresentador, que você está desfocando. Para evitar essa remoção, adicione esta linha antes da anterior
vc.modalPresentationStyle = UIModalPresentationOverFullScreen;
Ou use outros
Over
estilos.fonte
OBJETIVO-C
SWIFT 3.0
from: https://stackoverflow.com/a/24083728/4020910
fonte
Usando UIImageEffects
Para quem quer mais controle, você pode usar o
UIImageEffects
código de exemplo da Apple .Você pode copiar o código
UIImageEffects
da Biblioteca de desenvolvedores da Apple: Desfocar e colorir uma imagemE aqui está como aplicá-lo:
fonte
fonte
Descobri isso por acidente, me dá ótimos resultados (quase duplicados com os da Apple) e usa a estrutura Acceleration. - http://pastebin.com/6cs6hsyQ * Não escrito por mim
fonte
Esta resposta é baseada na excelente resposta anterior de Mitja Semolic . Eu o convertei para o swift 3, adicionei uma explicação para o que está acontecendo nos comentários, o tornei uma extensão de um UIViewController para que qualquer VC pudesse chamá-lo à vontade, adicionei uma visão sem desfocagem para mostrar a aplicação seletiva e adicionei um bloco de conclusão para que o controlador de visualização de chamada pode fazer o que quiser ao concluir o desfoque.
Confirmei que funciona com iOS 10.3.1 e iOS 11
fonte
Um complemento importante à resposta de @ Joey
Isto aplica-se a uma situação em que pretende apresentar a-fundo desfocado
UIViewController
comUINavigationController
.Aproveitar!
fonte
Versão Swift 3 da resposta de Kev para retornar a imagem borrada -
fonte
Código 2019
Aqui está um exemplo mais completo usando a incrível técnica @AdamBardon.
{Além disso: como uma questão geral de engenharia do iOS,
didMoveToWindow
pode ser mais adequado para você do quedidMoveToSuperview
. Em segundo lugar, você pode usar outra maneira de desmontar, mas a desmontagem são as duas linhas de código mostradas lá.}BlurryBall
é apenas umUIVisualEffectView
. Observe as entradas para uma visualização de efeitos visuais. Se você precisar de cantos arredondados ou qualquer outra coisa, faça-o nesta classe.fonte
A Apple forneceu uma extensão para a classe UIImage chamada UIImage + ImageEffects.h. Nesta classe, você tem os métodos desejados para desfocar sua visualização
fonte
Aqui está o código Swift 2.0 para a solução fornecida na resposta aceita :
fonte
Se adicionar uma visão de desfoque escuro para o tableView, isso fará com que seja lindamente:
fonte
Você pode fazer seu Background Blur diretamente usando "Visual Effect Effect with Blur" e "Visual Effect View with Blur and Vibrancy".
Tudo o que você precisa fazer para tornar o Blur Background no aplicativo iOS é ...
Etapa 1 Imagem
Etapa 2 Imagem
Layout da aplicação antes de clicar em qualquer botão!
Visualização do aplicativo após clicar no botão, o que torna todo o fundo do aplicativo desfocado!
fonte
Caso isso ajude alguém, aqui está uma extensão rápida que criei com base na resposta de Jordan H. Está escrita no Swift 5 e pode ser usada no Objetivo C.
NOTA: Se você deseja desfocar o fundo de um UILabel sem afetar o texto, crie um UIView de contêiner, adicione o UILabel ao UIView de contêiner como uma subvisão, defina backgroundColor do UILabel como UIColor.clear e chame blurBackground (style : UIBlurEffect.Style, fallbackColor: UIColor) no contêiner UIView. Aqui está um exemplo rápido disso escrito em Swift 5:
fonte
Swift 4:
Para adicionar uma sobreposição ou a janela pop-up Você também pode usar a Container View com a qual você obtém um View Controller gratuito (você obtém a Container View da paleta / biblioteca de objetos usuais)
Passos:
Tenha uma View (ViewForContainer na foto) que contenha essa Container View, para escurecê-la quando o conteúdo da Container View for exibido. Conecte a tomada dentro do primeiro View Controller
Ocultar esta visualização quando o 1º VC for carregado
Exibir quando o botão é clicado, insira a descrição da imagem aqui
Para escurecer essa exibição quando o conteúdo da exibição de contêiner for exibido, defina o plano de fundo das visualizações como preto e a opacidade para 30%
Adicionei uma resposta à criação da exibição popview em outra pergunta do Stackoverflow https://stackoverflow.com/a/49729431/5438240
fonte
Resposta simples é Adicione uma subvisão e mude de alfa.
fonte