Um guia para iniciantes para implementar animações Android (parte 2)

Na parte 1, discutimos sobre os conceitos básicos de animações e sobre animações de propriedades. Nesta postagem, discutirei sobre o View Animations e a nova estrutura de transições de atividades introduzida no nível 21. da API. A estrutura de transição já foi adicionada no nível 19 da API (4.4.2), mas ficou mais poderosa no nível 21 da API.

A estrutura do Android começou com as animações de exibição, mas devido a seus problemas, eles introduziram as animações de propriedade, conforme discutido na Parte 1. As animações de exibição são perfeitas para animações de tela inicial e outras áreas em que não há interação com a exibição. Na maioria dos casos, eles são implementados usando o código XML.

Tipos de animação de exibição

  1. Interpolação de animação - Essas são as animações aplicadas em uma vista responsável por dimensionar, traduzir, girar ou desbotar uma vista (juntas ou uma a uma).
  2. Animação de quadro - Essas animações são aplicadas usando vários drawables. Neste, apenas precisamos especificar uma lista de desenháveis ​​no código XML e a animação é executada exatamente como os quadros de um vídeo.

As animações de exibição não são muito usadas porque a mesma coisa pode estar usando o objeto ViewPropertyAnimator, que é muito mais rápido e legível. A animação do quadro é semelhante à Animação Drawable. O mais importante é entender a nova estrutura de transição, que é muito útil e fornece belas animações.

As novas animações (API Level 21+)

Não é legal?

O Android fornece transições de atividades, transições de fragmentos e transições de elementos compartilhados. Outras animações são revelação circular, efeito cascata, etc., movimento curvo. O efeito cascata pode ser aplicado apenas definindo a propriedade background de uma view como:

android: background = ”? attr / selectableItemBackground”

Aqui, tentaremos transições de atividades e transições de elementos compartilhados, como acima do GIF.

A etapa básica é criar o arquivo styles-v21 e fazer o seguinte:

Explicação dos estilos acima-v21.xml

Transições de elemento compartilhado - há uma visão compartilhada entre duas atividades / fragmentos. Visualização compartilhada significa que ambas são iguais nas duas atividades, mas o tamanho delas é um pouco diferente. Por exemplo - uma imagem em um item de exibição do reciclador que, quando clicada (tocada), mostra os detalhes do item com a mesma imagem, mas em tamanho maior. Faremos algo assim: -

Legal… Mas como isso está funcionando?

Basicamente, existem 2 atividades aqui. Um com um pequeno ponto e outro com um grande ponto e texto. Quando clico no botão da Atividade A, ele abre a Atividade B com a animação. Esse efeito também pode ser visto no aplicativo Google Play Store. Mas eles também aplicam efeitos de movimento circular, revelação circular. O mais importante a ser observado aqui é que a imagem NÃO está se movendo da posição original para a posição final. A estrutura de transição calcula a cena inicial e a cena final e depois anima entre essas cenas. Para saber como as animações funcionam, consulte isso. Também com a ajuda do novo mecanismo de intenção, isso é possível conforme mostrado abaixo:

Aqui, usei a verificação da API para pirulito e, em seguida, execute a transição. Em outros níveis, a atividade começará normalmente. A nova linha Pair <> ajuda o sistema a conhecer os elementos compartilhados.

Nota - Mantenha o nome da transição igual nas duas visualizações (ponto pequeno e ponto grande). Isso ajuda o sistema a conhecer os elementos compartilhados. Uma coisa boa é colocar o nome da transição em strings.xml.

Aqui, usei a transição custom_animation.xml para a transição de atividade, que é um efeito de explosão. Além disso, excluí algumas visualizações para participar da animação. Essas visualizações são a barra de status e a barra de ferramentas. Podemos usar diferentes tipos de efeito (fade, slide) para corresponder ao nosso caso de uso.

Transições de atividades - o nível 21 da API introduziu transições de atividades mais realistas e fáceis de usar. Por exemplo, as transições Explodir, ChangeImageTransform parecem mais realistas e orientam melhor o usuário do fluxo de atividades. No exemplo acima, usei a transição de desbotamento fornecida pelo sistema Android. Se não especificarmos nenhuma animação, por padrão, a AutoTransição será usada. Podemos criar nossa própria transição criando uma classe personalizada que estende a transição. Veja isto para referência.

Revelação circular

Efeito de revelação circular

O efeito circular de revelação acima é criado quando o FAB é clicado:

Obrigado por ler o artigo. Sugestões / correções / comentários são sempre bem-vindos. Se você gostou, clique no botão Curtir e compartilhe o artigo com a comunidade Android. Vamos compartilhar o conhecimento o máximo que pudermos.

Além disso, vamos nos tornar amigos no About.me, Twitter, LinkedIn, Github e Facebook.