após o lançamento do iOS 7 (e do iOS 8 também), os efeitos de animação e movimento tornaram-se centrais para o design de aplicativos de desenvolvedores da Apple e de terceiros. o iOS 7 introduziu um design plano e mínimo para aplicativos que inevitavelmente resultaram em alguns aplicativos com uma interface de usuário semelhante. Para distinguir seus aplicativos de outros aplicativos, os desenvolvedores empregaram recursos como animações e efeitos de movimento para destacar seus aplicativos.

não apenas as animações são usadas para diferenciar seu aplicativo, mas também podem melhorar a experiência geral do usuário de seu aplicativo. Para obter ótimos exemplos de como as animações são usadas para melhorar a UX, você deve observar como a Apple usa animações em seus aplicativos. Por exemplo, no aplicativo Fotos, quando você seleciona uma foto de uma coleção, a foto se expande da selecionada e, ao fechá-la, ela volta para a foto selecionada. Isso aumenta a navegação do aplicativo, pois permite que você saiba exatamente onde estava, se estiver navegando em muitas fotos.

o papel do Facebook também emprega animações lindamente para adicionar à experiência geral do usuário do aplicativo. Você seleciona um artigo para ler lançando-o. Essa ação, o fato de o artigo se expandir de sua versão em miniatura, sugere que, ao fazer o contrário, ou seja, virar o artigo para baixo, o reduziria de volta à sua miniatura. Aqui, a animação é usada para transmitir como o aplicativo funciona e até mesmo um usuário pela primeira vez do aplicativo em breve poderá fazer suposições sobre seu uso e descobrir sua navegação sem precisar de um tutorial.

não apenas as animações aumentam a experiência do usuário do aplicativo, mas também podem ser o que encanta e impressiona seus usuários, garantindo o uso repetido em vez de desinstalar o aplicativo para um melhor na App Store.

existem inúmeras maneiras de incluir animações em seus aplicativos, algumas delas usando o UIKit Dynamics, animações de camada, transições de controlador de visualização ou usando uma biblioteca de terceiros como a Biblioteca Pop do Facebook ou a estrutura jnwspringanimation.

neste tutorial, veremos animações de visualização simples. Você pode baixar o projeto inicial, que é um aplicativo de visualização única com uma visualização de tabela que lista os exemplos apresentados no tutorial tutorial. Vou usar isso quando chegarmos à parte de exemplos do tutorial, em vez de começar do zero.

o tutorial começa com um resumo das APIs usadas para animar visualizações e termina com alguns exemplos que mostram o uso de algumas das APIs em um aplicativo.

animações de visualização básica

criar animações em suas visualizações é uma questão de alterar propriedades nelas e permitir que o UIKit as anime automaticamente. As propriedades que mudamos são aquelas marcadas como Animáveis.

a lista a seguir mostra as propriedades animáveis.

  • centro
  • alpha
  • frame
  • limites
  • transformar
  • backgroundColor
  • contentStretch

Você vai descobrir que todas as animações envolvem uma alteração de uma ou mais das propriedades acima.

para animações de visualização simples, o UIKit fornece as seguintes APIs que podem ser usadas para animar visualizações na tela.

o primeiro leva dois parâmetros – um valor para a duração em segundos da animação e um encerramento onde você especifica as propriedades que deseja alterar. O UIKit tomará o estado original da visualização e criará uma transição suave desse estado para o estado final de acordo com o que você especificou no encerramento das animações.

as outras duas APIs são semelhantes às primeiras, mas elas usam parâmetros extras que adicionam mais configuração à animação. O segundo leva um encerramento de conclusão que você pode usar para especificar outra animação que você deseja fazer após o primeiro ou você pode fazer alguma limpeza da interface do usuário, por exemplo, removendo uma exibição da hierarquia de visualização uma vez que outra exibição é animada para a cena.

a terceira API leva dois parâmetros adicionais – o atraso, que é o tempo de espera antes do início da animação e opções, uma constante UIViewAnimationOptions, que indica como você deseja executar as animações. O seguinte mostra as opções disponíveis.

animações de mola

as animações de mola tentam modelar o comportamento de uma mola da vida real, pois, quando uma visualização é movida de um ponto para outro, ela salta/oscila no final antes de se estabelecer na posição.

abaixo está o bloco de métodos que usamos para animações de primavera.

  • UIView.animateWithDuration (_:, delay:, usingSpringWithDamping:, initialSpringVelocity:, opções:, animações:, conclusão:)

o acima é semelhante aos métodos que analisamos anteriormente, exceto por dois novos parâmetros – usingSpringWithDamping e initialSpringVelocity. Amortecimento é um valor de 0 a 1 que determina o quanto a visualização salta no final da animação. Quanto mais próximo de 1 o valor for, menos saltitante será. initialSpringVelocity como o nome diz, determina a velocidade inicial da animação. Isso determina o quão forte a animação começa. Se você quiser que ele comece vigorosamente, defina um valor maior, se você quiser uma animação suave, poderá definir o valor como 0.

animações Keyframe

animações Keyframe permitem que você defina diferentes estágios de uma animação. Você pode agrupar diferentes animações que compartilham algumas propriedades comuns, mas ainda assim pode controlá-las separadamente.

em vez de uma animação que apenas se move ao longo de um caminho, o UIKit executará os diferentes estágios da animação.

as APIs de animação de quadro-chave são as seguintes.

os dois métodos acima são usados juntos, o segundo sendo aninhado no fechamento das animações do primeiro.

o primeiro método define a configuração geral da animação, como quanto tempo leva, atraso e suas opções. Em seguida, você define um ou mais do segundo método(os quadros) dentro do fechamento de animações para definir os diferentes estágios da animação.

a hora de início Relativa e a duração relativa de cada quadro é um valor entre 0 e 1 que expressa a porcentagem de Tempo dentro da duração total da animação.

transições de visualização

as transições de visualização são usadas quando você deseja adicionar uma nova visualização à sua hierarquia de visualização ou remover uma visualização da hierarquia de visualização.

as APIs usadas para criar transições de visualização são

você usa a primeira para introduzir uma visualização na hierarquia de visualização. O método leva parâmetros semelhantes como vimos nos outros métodos de animação.

o segundo é usado para tirar uma visão da hierarquia de visualização e colocar uma nova visão em seu lugar.

exemplos

agora veremos alguns exemplos que usam algumas das chamadas de API acima para animar visualizações no projeto inicial fornecido.

exemplo i

se você executar o projeto, verá uma exibição de tabela que lista os exemplos pelos quais trabalharemos. Selecione o exemplo i na lista e você verá uma tela de Login de um aplicativo com os campos Nome de usuário e senha e o botão de login.

queremos que estes sejam animados na tela quando o aplicativo for iniciado.

para começar, ocultaremos as visualizações da vista quando a visualização for exibida pela primeira vez. Antes do Layout automático, essa teria sido uma questão simples de alterar a posição da visualização específica no código, mas como definimos restrições de layout automático nas visualizações no arquivo do storyboard, teremos que alterar as restrições no código, o que mudará a posição da visualização.

primeiro, precisamos obter uma referência das restrições que mudaremos. Abra o arquivo storyboard. Localize as seguintes restrições na cena do exemplo I.

abra o editor assistente e certifique-se de que é o ExampleIViewController.swift que aparece ao lado do storyboard na tela dividida. Arraste da restrição Center X Alignment – View-Username para a classe ExampleIViewController. Crie uma tomada chamada centerAlignUsername. Faça o mesmo para o Center X Alignment-View-Password e defina seu nome como centerAlignPassword. Crie também uma saída para o botão login chamado loginButton e uma ação para o mesmo botão e nomeie-o login. Certifique-se de definir o tipo da ação para UIButton. Você deve ter o seguinte em código.

1
2
3
4
5
6
7

@IBOutlet fraco var centerAlignUsername: NSLayoutConstraint!
@IBOutlet weak var centerAlignPassword: NSLayoutConstraint!
@IBOutlet fraco var loginButton: UIButton!
@IBAction func login(sender: UIButton) {
}

No ExampleIViewController.swift adicione o seguinte método que é chamado antes que a visualização seja apresentada na tela.

isso move os campos de nome de usuário e senha apenas fora de exibição e define o valor alfa do botão para 0, o que o torna invisível.

adicione o seguinte método que é chamado logo quando a visualização aparece.

aqui usamos o UIView.animateWithDuration () método que vimos anteriormente. Nós incluímos o UIViewAnimationOptions.CurveEaseOut opção que faz com que a animação começar rápido, em seguida, abrandar no final. Você pode experimentar diferentes opções aqui. Comando-clique em UIViewAnimationOptions para ver todas as opções disponíveis.

a animação dura 0,5 segundos e começa imediatamente. Você tem liberdade ao longo da duração, mas não deve definir um número tão grande que incomode seus usuários quando as animações em seu aplicativo parecem demorar muito. Normalmente, a duração é definida entre 0,5 e 0,7 segundos, mas como eu disse, isso não está definido em pedra e você tem a liberdade de configurá-lo para o que parecer certo para você.

a animação faz exatamente o oposto do que fizemos em viewWillAppear(). layoutIfNeeded() é usado para estabelecer as visualizações imediatamente que são alteradas. Se você não incluí-lo, você não os verá animados na tela, em vez disso, eles serão mostrados apenas em sua posição final. Execute o aplicativo e você verá o seguinte.

o acima parece mais interessante do que uma apresentação estática, mas as visualizações sendo animadas ao mesmo tempo não criam um efeito tão grande. Modifique o método como mostrado abaixo.

execute o aplicativo e a animação resultante tem as visualizações animando na tela em momentos diferentes. Olhando para o código, você pode ver que após o primeiro bloco de animação, definimos um atraso nos subsequentes.

nas telas de login, quando o login falha, geralmente há uma animação que indica ao usuário que o login falhou. Isso às vezes é feito como uma sacudida dos campos de texto ou do botão de login, e uma mensagem que permite ao usuário saber que o login falhou. Vamos adicionar esse efeito no botão de login usando molas. Modifique a função login() como mostrado.

o acima altera o tamanho do botão de login quando pressionado e anima a ação com uma animação de mola que fará com que a largura do botão se expanda e salte um pouco no final antes de se estabelecer.

brinque com o valor de amortecimento. Se você configurá-lo para 1, o botão se expandirá, sem saltar no final. Você também pode usar o mesmo método nos campos Nome de usuário e senha. Em vez de tê-los vir para a tela e simplesmente parar no lugar no final, tê-los ser primavera-like e saltar um pouco antes de se estabelecer.

exemplo II

em seu aplicativo, talvez seja necessário substituir a imagem de fundo de uma visualização automaticamente quando alguma ação acontece. Você pode fazer isso de uma maneira em que uma imagem substitua imediatamente outra na visualização, ou você pode desvanecê-la lentamente para criar uma boa transição. Vamos criar este efeito aqui. Abra ExampleIIViewController.swift e adicione o seguinte.

aqui criamos uma visualização de imagem e a adicionamos à visualização principal. Em seguida, chamamos imageFadeIn () que cria uma segunda visualização com uma imagem diferente. Adicionamos essa visualização acima da primeira visualização de imagem e definimos seu alfa para 0. No bloco de animação, animamos seu valor alfa, tornando-o visível. Em seguida, usamos um fechamento de conclusão para definir a imagem da visualização da imagem para a segunda imagem e removemos a segunda visualização da imagem da hierarquia de visualização, pois ela não é mais necessária. Adicionei um longo atraso para que a animação não aconteça no momento em que selecionamos o exemplo II na visualização da tabela. A duração também é um pouco longa para que possamos ver o que está acontecendo na demonstração.

o seguinte é o efeito.

exemplo III

em seguida, veremos as animações do quadro-chave. Abra ExampleIIIViewController.swift e adicione a seguinte variável e funções ao arquivo. Comentei o código para explicar cada etapa.

em viewDidLoad () chame a função createView (). Adicione o seguinte à parte inferior de viewDidLoad().

1
createView()

Sobre a execução do aplicativo e selecionar Exemplo III, do modo de exibição de tabela, você verá um red ver com uma imagem vista na parte superior e um botão no meio.

queremos ter a visão (a que me referirei como o alertView a partir de agora) para diminuir de tamanho e cair para baixo fora de vista.

quando criamos o botão, adicionamos um ouvinte a ele. Quando o botão é tocado, dismissAlert () é chamado. Modifique a função como mostrado.

no código acima, criamos quadros que representam o que queremos para os dois estágios de animação da visualização. smallFrame encolhe para metade do tamanho de alertView, mantendo o ponto central e finalFrame tem uma posição na parte inferior da tela, fora de vista.

usamos uma animação de quadro-chave com dois quadros-chave. O primeiro define o quadro do alertView para smallFrame e o segundo para finalFrame. O resultado será que o alertView encolherá para metade do seu tamanho e, em seguida, ficará fora de vista. Observe que coloquei um número tão grande para a duração – 4 segundos. Você pode mudar isso, eu só queria a animação em câmera lenta para a demonstração. Execute o aplicativo e selecione exemplo III.

a animação não é exatamente o que esperávamos. Você pode ver o alertView vermelho animado conforme o esperado, mas a escala de seus filhos não muda. Alterar o quadro dos pais, não altera automaticamente os quadros de seus filhos.

usaremos um recurso introduzido no iOS 7 chamado UIView snapshots para corrigir a animação. Isso permite que você tire um instantâneo de um UIView junto com sua hierarquia e renderize-o em um novo UIView.

em dismissAlert() adicione o seguinte logo antes do código de animação do quadro-chave.

1
2
3
4

deixe instantâneo = alertView.snapshotViewAfterScreenUpdates (false)
instantâneo.quadro = alertView.quadro
Vista.como baixar e instalar Minecraft.removeFromSuperview()

aqui, criamos uma visualização de instantâneo e a adicionamos à visualização principal. Em seguida, removemos o alertView da visualização, pois o instantâneo o substituirá.

Substitua a animação do quadro-chave pelo seguinte.

execute o aplicativo e, ao tocar em dispensar, a visualização(instantâneo, na verdade) deve ser animada conforme o esperado.

exemplo IV

analisamos como você pode animar visualizações simples. Neste exemplo, veremos como você pode animar uma visualização de tabela.

se você selecionar o exemplo IV na exibição de tabela, encontrará outra exibição de tabela com uma lista de itens nela. Quando a exibição da tabela é apresentada, os itens da lista já estão posicionados na tabela. Queremos animá-los na vista para criar um efeito mais interessante.

Abra ExampleIVViewController.swift e adicione os seguintes métodos.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

substituir func viewWillAppear(animação: Bool) {
animateTable()
}
func animateTable() {
tableView.reloadData()
let cells = tableView.visibleCells()
deixe tableHeight: CGFloat = tableView.fronteira.tamanho.altura
para I nas células {
let cell: UITableViewCell = I como UITableViewCell
cell.transformação = CGAffineTransformMakeTranslation(0, tableHeight)
}
var índice = 0
para um em células {
deixe célula: UITableViewCell = a as UITableViewCell
UIView.animateWithDuration(1.5, delay: 0.05 * Double (index), usingSpringWithDamping:0.8, initialSpringVelocity: 0, options: nil, animations: {
cell.transformação = CGAffineTransformMakeTranslation(0, 0);
}, conclusão: nil)
índice de += 1
}
}

Aqui, quando o modo de exibição aparece, o animateTable() função é chamada. Recarregamos os dados da visualização da tabela e percorremos as células que estão atualmente visíveis na tela e movemos cada uma delas para a parte inferior da tela. Em seguida, iteramos todas as células que movemos para a parte inferior da tela e as animamos de volta à posição com uma animação spring.

execute o aplicativo e você verá o seguinte.

conclusão

analisamos várias APIs que você pode usar para adicionar animações às visualizações do seu aplicativo. Este não é um guia exaustivo sobre animação no iOS, mas usando as APIs simples que analisamos, você pode criar várias animações em seus aplicativos. Para mergulhar ainda mais nas animações do iOS, você pode ver a dinâmica do UIKit, animações de camada, visualizar transições do controlador e até efeitos de movimento. Você também pode olhar para bibliotecas de terceiros como o Facebook Pop e o jnwspringanimation framework, que podem ajudá-lo a criar animações complexas com mais facilidade.

você pode baixar o projeto concluído aqui.

Deixe uma resposta

O seu endereço de email não será publicado.