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.

Highway to FPS or true animations in Angular | OdessaFrontend Meetup #11

51 views

Published on

Часто разработчики сталкиваются с проблемой непонимания того, какие средства использовать при разработке анимации во фронтенде, забывая при этом о том, что за нас уже загнули все пальцы. Наша задача — попросту использовать то, что уже написано другими. Денис Бурячковский рассказывает о том, что команда ангуляра привнесла в ряды фронтенд комьюнити для облегчения работы со всевозможными интерактивными фишками.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Highway to FPS or true animations in Angular | OdessaFrontend Meetup #11

  1. 1. Highway to FPS or true animations in Angular
  2. 2. What is animation?
  3. 3. Do something with a box to make it alive!
  4. 4. Frame 1 Frame 29 Frame 58 Frame 87
  5. 5. Why is it so smooth?
  6. 6. 60 FPS 24 FPS One second
  7. 7. Current realities
  8. 8. ● 30 FPS - Console and arcade games ● 60 FPS - More complicated games ● 120 - 240 FPS - ARE U A PRO?
  9. 9. Performance LI(EA)CK(K)
  10. 10. https://googlechrome.github.io/devtools-samples/jank/
  11. 11. Ways to improve
  12. 12. FLIP
  13. 13. SAFE CSS
  14. 14. https://csstriggers.com
  15. 15. Layers
  16. 16. Transitions
  17. 17. Keyframes
  18. 18. Angular
  19. 19. Common transitions
  20. 20. Reusable animations
  21. 21. State change expressions :enter/:leave/:increment/ :decrement
  22. 22. Router animations
  23. 23. Be a good front end :)

×