Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

FrontinFortaleza 2015

2,055 views

Published on

Palestra *Evolução das animações na web* proferida em 16/05/2015 em Fortaleza, CE.

Published in: Technology

FrontinFortaleza 2015

  1. 1. Evolução das animações na web
  2. 2. Maurício Samy Silva Maujor http://kwz.me/AZ http://kwz.me/DC http://kwz.me/Dh maujor@maujor.com
  3. 3. Animações na web 1993 – (HTML+) Navegador Mosaic 1.0 implementa a tag <img> GIF Animada
  4. 4. GIF Animada
  5. 5. GIF Animada
  6. 6. Animações na web 1995 – HTML 2 Navegador IE 2.0 implementa as tags proprietárias <marquee> e <embed>
  7. 7. Elemento <marquee>
  8. 8. Animações na web 1996 – Macromedia Flash 1.0
  9. 9. Animações na web 1996 - Navegador IE 3.0 implementa a linguagem jscript
  10. 10. var el = document.getElementById('ele'); el.style.left = '0px'; el.style.top = '0px'; function animar() { el.style.left = parseInt(el.style.left) + 2 + 'px'; el.style.top = parseInt(el.style.top) + 1 + 'px'; . }; window.onload = animar(); <script></script> setTimeout(animar, 50);
  11. 11. DHTML Exemplo 1 Exemplo 2 Exemplo 3 http://dynamicdrive.com
  12. 12. Maujor http://kwz.me/AX <animate attributeName="fill-opacity" keyTimes="0; 0.47; 0.48; 0.55; 0.56; 1" repeatCount="indefinite" values="1; 1; 0; 0; 1; 1;" dur="4s" begin="2s"/> SVG + SMIL
  13. 13. <style></style> 2009 – HTML4.01 e XHTML 1.0 Navegador Chrome 4.0 implementa animação CSS3 transition e animation 1996 2009 (13 anos)
  14. 14. HTML5 HTML5 <canvas> e <video> 2009
  15. 15. Especificações do W3C Criadas em março 2009 transition: http://www.w3.org/TR/css3-transitions/ animation: http://www.w3.org/TR/css3-animations/
  16. 16. Transitions
  17. 17. button { background: red; ... } button:hover { background: green; ... } Transition
  18. 18. button { background: red; transition: background 2s ease-out; } button:hover { background: green; } Transition
  19. 19. Transition sem transition com transition :hover
  20. 20. button { background: green; font: 140px sans-serif; border: 5px solid #fff; color: red; transition: all 2s ease-out; } Transition
  21. 21. button { background: green; font: 140px sans-serif; border: 5px solid #fff; color: red; transition: 2s ease-out; } Transition
  22. 22. el { transition-property: propriedade; transition-duration: 2s; transition-timing-function: ease; transition-delay: 500ms; } Transition Sintaxe
  23. 23. el { transition: propriedade 2s ease 1s; } Transition Sintaxe
  24. 24. transition-property transition-duration transition-timing-function transition-delay transition Transition
  25. 25. transition-timing-function keyword steps() cubic-bezier() Transition
  26. 26. keyword linear ease ease-in ease-out ease-in-out
  27. 27. steps() steps(8, start) steps(8, end)
  28. 28. steps()
  29. 29. cubic-bezier(.6, .1, .15, .7)
  30. 30. cubic-bezier(.6, .1, .15, .7)
  31. 31. cubic-bezier(.6, .1, .15, .7)
  32. 32. cubic-bezier(.6, .1, .15, .7)
  33. 33. cubic-bezier(.6, .1, .15, .7)
  34. 34. cubic-bezier(.6, .1, .15, .7)
  35. 35. cubic-bezier(1, .3, .7, 0)
  36. 36. cubic-bezier(1, .3, .7, 0)
  37. 37. cubic-bezier Traçado da curva de Bezier online http://cubic-bezier.com
  38. 38. Animations
  39. 39. @keyframes animar { from { left: 0; } to { left: 90%;} } Animation @keyframes animar { 0% { left: 0; } 100% { left: 90%;} }
  40. 40. @keyframes animar { to { left: 80em;} } Animation @keyframes animar { 0% { left: 0; } 25% { left: 600px; } 75% { left: 950px; } 100% { left: 1200px;} }
  41. 41. Animation Animação com animation dispara em dois momentos: 1. Carregamento da página (e estilos); 2. Aplicação de estilo por script.
  42. 42. div.ani { … animation: animar 6s linear infinite alternate; } Animation
  43. 43. <script> var el = document.getElementById(“a”); el.onclick = function() { this.className = “ani"; } </script> Animation <div class=“ani”>...</div> <div id=“a”>...</div>
  44. 44. animation-name animation-duration animation-delay animation-timing-function animation-iteration-count animation-direction animation-fill-mode animation-play-state Animation
  45. 45. animation-direction normal alternate reverse alternate-reverse Animation
  46. 46. Animation Para as direções reverse e alternate-reverse a função de animação também reverte. ease-in ease-out
  47. 47. animation-play-state running paused Animation
  48. 48. transition x animation animation transition
  49. 49. http://kwz.me/Da Em 2012 para comemorar 182 anos de Eadweard J. Muybridge, fotógrafo inglês, precursor da película de celulóide, usada ainda hoje. Google doodle
  50. 50. API Motion Path
  51. 51. API Motion Path
  52. 52. API Timing Control
  53. 53. setTimeout() setInterval() requestAnimationFrame() API Timing Control
  54. 54. API Web Animations
  55. 55. var animation = elem.animate([ {color:“#000",background:"#0cf",transform:rotate(0deg)"}, {color:"#f90",background:"#03c",transform:"rotate(120deg)"}, {color:"#f90",background:"#03c",transform:"rotate(240deg)"}, {color:"#000",background:"#0cf",transform:"rotate(360deg)" ], { direction: 'linear', duration: 10000, iterations: Infinity }); API Web Animations
  56. 56. API Web Animations
  57. 57. Obrigado

×