Fundamentos de Animações de Interface (Jonatas Santos)

Please download to get full document.

View again

All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
 3
 
  1. Animações de Interface Entendendo os fundamentos (breves) e aplicando no contexto Web @johnnydekkers 2. O que é? 3. É a característica que torna um produto…
Share
Transcript
  • 1. Animações de Interface Entendendo os fundamentos (breves) e aplicando no contexto Web @johnnydekkers
  • 2. O que é?
  • 3. É a característica que torna um produto digital memorável, tendo como objetivo principal maximizar a experiência do usuário, além de proporcionar impacto emocional
  • 4. O que não é
  • 5. É apenas “frescura”
  • 6. Porque utilizar?
  • 7. A animação pode orientar a como interagir com funcionalidades em uma interface, indicando seu movimento de interação exemplos: swipe, touch, zoom
  • 8. A animação indica hierarquia e a relação espacial com outros elementos da interface exemplos: lazy loading, skeleton screen, scroll to reveal
  • 9. A animação contribui para a captação da 
 Performance Percebida exemplos: transições de páginas, carregamento assíncrono
  • 10. Tipos de animações
  • 11. Animações que são acionadas por interações do usuário a.k.a Micro-interações exemplos: click, hover, drag, zoom Funcional
  • 12. Créditos: Mauricio Bucardo
  • 13. Animações que executam pontos de transição para determinado estado (do ponto A para o B) exemplos: page load, carrousel, section loads Transitivo
  • 14. Dê um pouco de amor à sua animação e seu usuário amará seu produto de volta! exemplos: Twitter heart button, Youtube sign button, Medium clap button Emocional
  • 15. Créditos: Facebook
  • 16. Fundamentos
  • 17. As interações possuem determinadas durações de tempo para que seja executado a transformação do ponto A para o B Duração
  • 18. • Human processor model • keystroke-level model Métodos de modelagem cognitiva
  • 19. Créditos: Taras Skytskyi
  • 20. É a característica que atribui personalidade ao movimento modificando aceleração em determinados pontos da duração exemplos: curvas de bezier Easing
  • 21. Créditos: Taras Skytskyi
  • 22. Assim como no teatro é o roteiro que orienta os atores na cena exemplos: parallax, page transitions, lazy loading lists Coreografia
  • 23. Créditos: Taras Skytskyi
  • 24. Consistência Crie um padrão nos fundamentos aplicados em seu produto, assim tornando-o expressivo
  • 25. Créditos: Material Motion Bom Ruim
  • 26. Boas práticas & técnicas aplicáveis no contexto Web
  • 27. Caminhos para o sucesso! • Pipeline de renderização • Garbage collector (consumo de memória) • Main Thread • Composite layers
  • 28. CSS Animations • Transform • Opacity • Will-change(transitions & keyframes)
  • 29. JavaScript
 Animations • requestAnimationFrame • WAAPI • AnimationEvent • Canvas • Houdini’s API 🔬
  • 30. Técnicas • FLIP (Paul Lewis) • Composited Animations • Mask Animations (overflow)
  • 31. Original Debug
  • 32. Down Frames • CSS Triggers • Browser rendering pipeline (paint, layout) • Layout Trashing • Memory leaks (junks)
  • 33. "Ao infinito... e além!" performance e originalidade
  • 34. GLSL WebGL WebGPUWHLSL
  • 35. Obrigado! @johnnydekkers
  • Related Search
    We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks
    SAVE OUR EARTH

    We need your sign to support Project to invent "SMART AND CONTROLLABLE REFLECTIVE BALLOONS" to cover the Sun and Save Our Earth.

    More details...

    Sign Now!

    We are very appreciated for your Prompt Action!

    x