A simplicidade de UIKit Dynamics
Neste tutorial será demonstrado como UIKit Dynamics é capaz de fazer algo significativamente grande de maneira simples.
Introdução
O papel fundamental de uma interface é realizar a comunicação entre seu sistema e o usuário.
Logo, imagine que você como desenvolvedor possui uma interface com vários botões, caixas de texto, tabelas ou coleções em sua interface. Será que todos estes componentes estão agindo da melhor maneira possível? Claro, se bem implementado os botões irão clicar, as tabelas irão mostrar o conteúdo e as coleções irão ser passadas. Mas será que a interface que é composta por todos estes componentes está cumprindo seu papel da melhor forma possível?
Uma boa interface vai muito além da execução sem erros dos componentes, mas trata-se do papel fundamental da interface ser cumprido: gerar uma boa experiência para o usuário.
Com isso existe a necessidade de incorporar comportamentos mais flúidos às interfaces para proporcionar ao usuário uma boa experiência ao usar seu aplicativo. Para este papel, o UIKit Dynamics se torna uma poderosa ferramenta.
O UIKit Dynamics é um framework nativo da Apple que aplica animações nas views baseado na física de objetos do mundo real e com isso gera uma interação do usuário mais próxima com o mundo real.
Importância
O UIKit Dynamics não só irá lhe economizar muitas linhas de código como também irá proporcionar ao usuário uma experiência ainda mais profunda com a interface.
Profundidade. Camadas visuais distintas e movimentos realistas transmitem hierarquia e vitalidade e facilitam a compreensão. O toque e a capacidade de descoberta aumentam o prazer e permitem o acesso à funcionalidade e ao conteúdo adicional sem perder o contexto. As transições fornecem uma sensação de profundidade à medida que você navega pelo conteúdo.(Human Interface Guidelines)
Funcionamento
O UIKit Dynamics provê as classes UIDynamicAnimator e UIDynamicBehavior para animar objetos que implementam UIDynamicItem, as classes UIView e UICollectionViewLayoutAttributes já implementam esse protocolo por padrão.
O UIDynamicAnimator é a classe responsável por realizar as animações para os objetos e fornecer o contexto para essas animações. Para usar o UIDynamicAnimator deve se configurar um ou mais objetos UIDynamicBehavior e vinculá-los a um conjunto de UIDynamicItems e adicioná-los no UIDynamicAnimator.
A biblioteca contém seis classes nativas de UIDynamicBehavior: UIAttachmentBehavior, UICollisionBehavior, UIDynamicItemBehavior, UIGravityBehavior, UIPushBehavior, UIFieldBehavior, UISnapBehavior. Cada uma destas classes configura um comportamento diferente a um ou mais UIDynamicItems.
Para ativar o comportamento basta adicioná-los ao objeto UIDynamicAnimator.
Exemplo
Para este exemplo interativo foi usado colisão, Snap Behavior e o Pan gesture. Os 3 passos a seguir demonstrarão como realizar a aplicação demonstrada.
Passo 1: Ancoragem da UIImageView
Arraste uma imageView para a View controller, coloque uma imagem a sua escolha, crie um outlet para a ViewController.swift e digite o seguinte trecho de código.
No trecho de código acima, criamos os três objetos necessários para realizar a animação:
A ImageView que já é um UIDynamicItem;
O comportamento para ser associado ao item que será um UISnapBehavior;
O objeto animador UIDynamicAnimator que terá como base a view principal.
Crie o objeto dynamicAnimator com base na view principal, em seguida adicione um comportamento snap (comportamento que ancora objetos em um ponto específico) para ser aplicado na ImageView smileBox que tem o ponto de ancoragem no centro da view. Em seguida basta adicionar uma Pan Gesture ao código para mover o smileBox.
Passo 2: Troca da ancoragem
Em seguida, arraste uma view que será um segundo ponto de ancoragem pra a smileBox. É necessário uma função que verifica se a smileBox está em intercessão com a segunda view de ancoragem, caso esteja ela troca o ponto de ancoragem e caso a smileBox saia da segunda View, ela ancora novamente na View principal. No código abaixo é adicionado a View e a função de verificação DENTRO da Pan Gesture.
Passo 3: Adicionando colisão
Neste terceiro e último passo iremos adicionar a útima view para o exemplo, ao final você será capaz de realizar o exemplo conforme mostrado no inicio.
Para começar, declare o uso do protocolo UICollisionBehaviorDelegate na classe ViewController.
Adicione uma nova View como feito anteriormente. Crie um outlet para esta view que será a bola. Faremos uso da UIColisionBehavior.
Será adicionado dois tipos de colisão, um entre a bola e os limites da tela e outro entre a bola e a smileBox. Será usado o UIDynamicItemBehavior que serve para adicionar um comportamento(behavior) específico ao objeto. Neste caso, iremos adicionar o efeito de elasticidade ao objeto. Segue o código abaixo:
Conclusão:
Caso tenha seguido o passo a passo acima, seu código ficará similar ao mostrado abaixo:
O UIKit Dynamics não é complicado, mas é preciso sabedoria para saber qual dos comportamentos usar nos componentes corretos. Recomendamos que você busque incrementar este exemplo, para uma melhor aprendizagem. Implemente novas views com novos behaviors e busque também tentar aplicar em componentes. Isso tornará sua interface mais fluida e dará uma imersão maior para seus futuros usuários.
