Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Choosing your animation adventure - Generate NYC 2018

2.217 visualizaciones

Publicado el

The state of web animation. Of all the web animation technologies we have available today, which one, or ones, should you choose to get the job done efficiently.

Publicado en: Diseño
  • My struggles with my dissertation were long gone since the day I contacted Emily for my dissertation help. Great assistance by guys from ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Girls for sex in your area are there: tinyurl.com/areahotsex
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Sex in your area is here: www.bit.ly/sexinarea
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Dating for everyone is here: www.bit.ly/2AJerkH
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Sex in your area for one night is there tinyurl.com/hotsexinarea Copy and paste link in your browser to visit a site)
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

Choosing your animation adventure - Generate NYC 2018

  1. 1. Choose Your Animation Adventure Val Head • @vlh Author of Designing Interface Animation Design Advocate, Adobe
  2. 2. Choose Your Animation Adventure Val Head • @vlh Author of Designing Interface Animation Design Advocate, Adobe
  3. 3. You have encountered an interface that requires animation. What would you like to use? (1) CSS? (2) JavaScript? (3) SVG? (4) …?
  4. 4. CSS Key Frames Transitions
  5. 5. What CSS is great at: • Well-defined state transitions • Loading animations, looping animations • Animations on :hover, :focus and similar CSS
  6. 6. Pros: • No external library needed • Great potential for performance without much effort • Keyframes are reusable • Can adjust properties in media queries for responsive animation when needed CSS
  7. 7. Cons: • Access to limited events • Defined entirely ahead of time • Can’t separate transform properties* CSS
  8. 8. CSS + JS = 🙌
  9. 9. CSSIn Summary Where it shines: • Animated interactions with defined states • Simple interactive animations Biggest Pro: • Nearly effortless performance • No additional requests
  10. 10. CSS is pretty great, but it might be 
 time to move to JavaScript if: • You’ll be chaining more than 3-ish animations in a sequence • The animation needs to change dynamically at runtime • Need to animate transform properties separately • Physics or other complex easing structures are required
  11. 11. VanillaCanvas Web GL react Libs Web Animation API JS
  12. 12. What javascript is great at: JS • Complex animated interactions • Narrative or immersive animation • Dynamic state transitions
  13. 13. requestAnimationFrame
  14. 14. Vanilla JS - requestAnimationFrame JS function moveCat() { . . . currentValue = changeInValue * progress; cat.style.transform ="translateX("+currentValue+"px)"; . . . requestAnimationFrame(moveCat); } moveCat();
  15. 15. Vanilla JS - requestAnimationFrame JS function moveCat() { . . . currentValue = changeInValue * progress; cat.style.transform ="translateX("+currentValue+"px)"; . . . requestAnimationFrame(moveCat); } moveCat();
  16. 16. Vanilla JS - requestAnimationFrame JS function moveCat() { . . . currentValue = changeInValue * progress; cat.style.transform ="translateX("+currentValue+"px)"; . . . requestAnimationFrame(moveCat); } moveCat();
  17. 17. Vanilla JS - requestAnimationFrame JS function moveCat() { . . . currentValue = changeInValue * progress; cat.style.transform ="translateX("+currentValue+"px)"; . . . requestAnimationFrame(moveCat); } moveCat();
  18. 18. JS animation libraries
  19. 19. Comparing JavaScript animation libraries…
  20. 20. TweenMax.to( box, 1,
 {opacity:0.5, x:800, ease:Power2.easeIn}
 ); Velocity(box, 
 {opacity: 0.5, translateX:"+=800"}, 
 {duration: 1000, easing:"easeInQuad"}); anime({ targets: box, opacity:0.5, translateX: 800,
 duration: 1000, easing: 'easeInQuad'
 });
  21. 21. ~9 - 29kb ~14.4kb ~4.7kb back to IE8* back to IE8 back to IE10 Docs + forums Docs + SO Docs drawSVG, morphSVG, Draggable drop-in replacement for jQuery very lightweight Some features and licensing 
 requires $ MIT licenseMIT license
  22. 22. JavaScript In Summary Where it shines: • Complex UI animation • Animation with dynamic states • Immersive animation Biggest Pro: • Lots of options for how to get it done • Can animate DOM, SVG, canvas
  23. 23. SVG
  24. 24. What SVG is great at: SVG • Animated illustrations • Animated icons • Infographics and dataviz • Fluidly scaling, responsive animation
  25. 25. SMIL • Tag-based animation within SVG • No IE or Edge support • Being deprecated in Chrome 😕 🙂 😁 CSS • Transitions and keyframe animations can be applied to SVG elements • Limited number of properties are exposed to CSS • Transforms not supported in IE or Edge JS • Can access/animate native SVG properties • Can do motion along path, shape morphing and more just like SMIL*
  26. 26. airbnb.design/lottie/
  27. 27. lottiefiles.com
  28. 28. github.com/airbnb/lottie-web
  29. 29. SVGIn Summary Where it shines: •Animated illustrations & infographics •Shape morphing •Motion along a path Biggest Pro: •Responsive by nature •Potential for tiny file sizes
  30. 30. PERFORMANCE
  31. 31. size - transform: scale() position - transform: translate() rotation - transform: rotate() opacity
  32. 32. compositepaintlayoutstyle
  33. 33. csstriggers.com
  34. 34. CSS JavaScript • CSS is declarative 
 (whole animation is known ahead of time) • CSS animations with transform & opacity won’t be impacted by the main thread • JS is imperative 
 (browser only really aware of the current frame) • Hardware acceleration isn’t automatic
  35. 35. SVG & Hardware Acceleration? • Not all browsers support it • Good performance in general without it though
  36. 36. Don’t be afraid to run your own tests
  37. 37. You have encountered an interface that requires animation. What would you like to use? (1) …?
  38. 38. Designing Interface Animation designinginterfaceanimation.com
  39. 39. Thank you! Newsletter: uianimationewsletter.com Let’s chat on twitter: @vlh Typeface: Brandon Text | Illustrations by Rachel Sager

×