Material Design Animations

Transcript

1. Material Design Animations
2. Material Design “We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science.”
3. Material Design “Motion is meaningful and appropriate, serving to focus attention and maintain continuity.”
4. Material Motion Descreve relações espaciais, funcionalidade e interação com beleza e fluidez
5. O que o movimento provê?
6. Foco guiado entre views
7. Indicações do que acontece ao completar uma ação
8. Relações hierárquicas e espaciais entre elementos
9. Distrações para operações em background
10. Caráter, polimento e prazer
11. Recomendações
12. Durações Animações Curtas 150 - 200 ms Animações Longas 300 - 400 ms
13. Ondulações confirmam interação do usuário
14. Mostre a conexão entre novas superfícies e os elementos que as criaram
15. Movimentos devem seguir a trajetória de um arco
16. Os elementos e seus agregados devem seguir uma coreografia que define suas relações
17. Elementos devem se combinar a medida que se aproximam
18. Uma transição guia o usuário para o próximo passo
19. Animações podem servir para chamar a atenção do usuário
20. Bibliotecas
23. Coordinator Behaviors
24. Material Transition Animation
25. Ana Coimbra @anacoimbrag (31) 9 9248-2436 ana.coimbra.gomes@gmail.com
26. Referências • Material Design: https://material.io/guidelines/material-design/introduction.html • Material Motion: https://material.io/guidelines/motion/material-motion.html • Lottie: http://airbnb.io/lottie • Coordinator Behaviors: https://github.com/ttymsd/coordinator-behaviors • MaterialTransitionAnimations:https://github.com/Cutta/MaterialTransitionAnimation