Animações no Android - Android Dev Conference 2017

Workshop apresentado no evento Android Dev Conference

link da apresentação com todas as animações:
https://goo.gl/Xhx8rp

Transcript

2. Animações no Android Android Dev Conference
3. SUMÁRIO • Animação Funcional • Conceitos básicos • APIs
4. “Animation is no longer just for delight; it is one of the most important tools for successful interaction” Android Developer Site
5. Animação Funcional Boas animações são as que tem um significado ou uma função.
6. Animação Funcional • Destacar principalmente mudanças visuais, evitando a não percepção das mesmas. • Estabelecer melhor as relações hierárquicas e espaciais entre os elementos.
7. Animação Funcional Principais conceitos • Feedbacks Visuais • Visibilidade de status do sistema • Transição de navegação
8. Animação Funcional Feedback Visual Visibilidade de status do sistema Transição de navegação Importante para demonstrar o resultado da interação com elementos reais na tela
9. Animação Funcional Feedback Visual Visibilidade de status do sistema Transição de navegação Também é usada para prover informações sobre um problema de maneira rápida e fácil. Ex. Uma animação de shake pode ser usada para demonstrar um erro em um formulário.
10. Animação Funcional Feedback Visual Visibilidade de status do sistema Transição de navegação Um dos mais importantes princípios de UI. Mostra visualmente ao usuário o contexto atual do sistema, como por exemplo animações de status de download/upload ou de alguma ação que o usuário fez, como deletar algo.
11. Animação Funcional Feedback Visual Visibilidade de status do sistema Transição de navegação Também é muito usada para chamar a atenção do usuário para uma mudança importante, como por exemplo uma ligação recebida ou um email novo.
12. Animação Funcional Feedback Visual Visibilidade de status do sistema Transição de navegação Usada para demonstrar ao usuário de maneira fácil a mudança entre dois estados do app, criando conexões visuais entre os mesmos. Pode ser usada para demonstrar transições hierárquicas...
13. Animação Funcional Feedback Visual Visibilidade de status do sistema Transição de navegação … ou de mesmo nível.
14. E o que devo evitar? Importante evitar animações sem propósito, pois pode se tornar irritante, principalmente quando esta transforma o processo de uso do app em algo mais lento. Até mesmo uma boa animação pode ser irritante se for usada a todo momento, por isso é importante se questionar se a animação será irritante quando vista pela “centésima” vez.
15. Conceitos Básicos O que eu preciso saber
16. Conceitos Básicos • Tipos de animação • "Interpolators" • "Listeners" • "Sets" de animação
17. Conceitos Básicos Tipos de animação Interpolators Listeners Animation Sets É a animação usada para redimensionar uma view. Scale É a animação usada para movimentar uma view. Translate É a animação usada para rotacionar uma view. Rotate É a animação usada para alterar a visibilidade uma view. Alpha
18. Conceitos Básicos Tipos de animação Interpolators Listeners Animation Sets Também chamado de "Easying Curves". São as as curvas que definem como uma animação vai se comportar, como aceleração, desaceleração, bounce e outros. Muito importante para dar uma movimentação mais natural à animação. Os interpolators mais usados nas animações do Material Design são FastOutSlowInInterpolator e LinearOutSlowInInterpolator.
19. Conceitos Básicos Tipos de animação Interpolators Listeners Animation Sets O principal listener para animações é o Animator.AnimatorListener que possui 4 métodos para serem implementados. onAnimationStart - chamado quando a animação começa. onAnimationEnd - chamado quando a animação termina. onAnimationRepeat - chamado entre as possíveis repetições da animação. onAnimationCancel - chamado quando a animação é cancelada.
20. Conceitos Básicos Tipos de animação Interpolators Listeners Animation Sets A api possui também um listener para escutar eventos de Pausa nas animações, o Animator.AnimatorPauseListener que possui 2 métodos para serem implementados. onAnimationPause - chamado quando a animação é pausada. onAnimationResume - chamado quando a animação recomeça após uma pausa. Dica: AnimatorListenerAdapter
21. Caso esteja sendo feita uma animação de valores, o listener é o ValueAnimator.AnimatorUpdateListener que possui um método para ser implementado. onAnimationUpdate - chamado a cada frame da animação. Ele recebe como parâmetro um ValueAnimator que será utilizado para recuperar o valor calculado para o frame da animação Conceitos Básicos Tipos de animação Interpolators Listeners Animation Sets
22. Para criar um conjunto de animações usamos o AnimatorSet. Com ele é possível coreografar várias animações e até mesmo vários sets de animação. A maneira mais comum de montar uma coreografia é usando os métodos playTogther e playSequentially que recebem listas de animações ou de sets de animações. Conceitos Básicos Tipos de animação Interpolators Listeners Animation Sets
23. APIs Básicas Quais as APIs mais comuns de animação
24. APIs • View Animations • Property Animations ◦ ValueAnimator ◦ ObjectAnimator • Transitions
25. API mais simples, porém mais limitada. Ex: view.animate().scale(1.5f) view.animate().alpha(1f) view.animate().translationX(200) view.animate().rotation(180f) APIs View Animation Property Animation • ValueAnimator • ObjectAnimator Transitions
26. Uma API mais genérica que permite animar valores e criar animações personalizadas como animações de textos numéricos e de cores. Ex: ValueAnimator.ofFloat(Float...) ValueAnimator.ofInt(int...) ValueAnimator.ofArgb(int...) Importante lembrar que é necessário recuperar os valores da animação para aplicar na view desejada com o listener APIs View Animation Property Animation • ValueAnimator • ObjectAnimator Transitions
27. Uma API mais complexa, porém mais poderosa, sendo possível animar qualquer propriedade com método set público. Ex: ObjectAnimator.ofFloat(view, "scaleX", 1f, 0f).start() ObjectAnimator.ofFloat(background, "cornerRadius", 0f, 10f).start() ObjectAnimator.ofArgb(view, "backgroundColor", colorFrom, colorTo).start(); ObjectAnimator.ofInt(.....).start() APIs View Animation Property Animation • ValueAnimator • ObjectAnimator Transitions
28. API mais "mágica" que tenta automatizar o máximo de animações possíveis. Mas também oferece um controle bastante completo sobre as animações. Ex: TransitionManager.beginDelayedTransition(ViewGroup, transition); view.setVisibility(View.GONE); Obs: view precisa estar dentro de ViewGroup APIs View Animation Property Animation • ValueAnimator • ObjectAnimator Transitions
29. API mais "mágica" que tenta automatizar o máximo de animações possíveis. Mas também oferece um controle bastante completo sobre as animações. API mínima 19 API usando a support library mínima 14 implementation 'com.android.support:transition:x.x.x' APIs View Animation Property Animation • ValueAnimator • ObjectAnimator Transitions
30. APIs View Animation Property Animation • ValueAnimator • ObjectAnimator Transitions Anima as mudanças de posição e tamanho das views ChangeBounds Estende Visibility e faz animações de FadeIn e FadeOut de uma view. Fade Transition padrão. Aplica FadeOut, Move and Resize, and FadeIn, nessa ordem. AutoTransition
31. APIs View Animation Property Animation • ValueAnimator • ObjectAnimator Transitions Alguns exemplos básicos
32. Live Code
33. Custom Transition E quando queremos animar algo diferente?
34. Primeiro passo é capturar os valores da transição. 1 - Capturar o valor inicial com o método: captureStartValues(TransitionValues transitionValues) 2 - Capturar o valor final com o método: captureEndValues(TransitionValues transitionValues) Os dois podem ser centralizados em um método genérico que captura os valores Exemplo: void captureValues(TransitionValues transitionValues) { if (transitionValues.view instanceof MyView) transitionValues.values.put(PROPNAME, myView.getValue()); } Custom Transition CaptureValues CreateAnimator
35. Após capturar os valores da nossa animação, precisamos implementar o método createAnimator para retornar o Animator que fará a nossa animação de transição Exemplo: Animator createAnimator(..., TransitionValues startValues, TransitionValues endValues) { if (startValues != null && endValues != null && endValues.view instanceof MyView) { int start = (Integer) startValues.values.get(PROPNAME); int end = (Integer) endValues.values.get(PROPNAME); if (start != end) return ObjectAnimator.ofInt(myView, “property”, start, end); } return null; } Custom Transition CaptureValues CreateAnimator
36. Live Code (de novo)
37. Referências • https://developer.android.com • https://material.io/guidelines/motion/material-motion.html • http://cogitolearning.co.uk • https://medium.com/@andkulikov/animate-all-the-things-transitions-in-android-914af5477d50
38. Centro Av. Presidente Wilson, 231 - 29º andar (21) 2240-2030 Cidade Monções Av. Nações Unidas, 11.541 - 3º andar (11) 4119-0449 Savassi Av. Getúlio Vargas, 671 Sala 800 - 8º andar (31) 3360-8900 www.concrete.com.br João Gouveia joaorgouveia joaorgouveia