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.
Highway to FPS or true
animations in Angular
What is animation?
Do something with a box
to make it alive!
Frame 1 Frame 29
Frame 58 Frame 87
Why is it so smooth?
60 FPS
24 FPS
One
second
Current realities
● 30 FPS - Console and arcade
games
● 60 FPS - More complicated
games
● 120 - 240 FPS - ARE U A PRO?
Performance LI(EA)CK(K)
https://googlechrome.github.io/devtools-samples/jank/
Ways to improve
FLIP
SAFE CSS
https://csstriggers.com
Layers
Transitions
Keyframes
Angular
Common transitions
Reusable animations
State change expressions
:enter/:leave/:increment/
:decrement
Router animations
Be a good front end :)
Highway to FPS or true animations in Angular | OdessaFrontend Meetup #11
Highway to FPS or true animations in Angular | OdessaFrontend Meetup #11
Highway to FPS or true animations in Angular | OdessaFrontend Meetup #11
Highway to FPS or true animations in Angular | OdessaFrontend Meetup #11
Highway to FPS or true animations in Angular | OdessaFrontend Meetup #11
Highway to FPS or true animations in Angular | OdessaFrontend Meetup #11
Highway to FPS or true animations in Angular | OdessaFrontend Meetup #11
Highway to FPS or true animations in Angular | OdessaFrontend Meetup #11
Highway to FPS or true animations in Angular | OdessaFrontend Meetup #11
Highway to FPS or true animations in Angular | OdessaFrontend Meetup #11
Highway to FPS or true animations in Angular | OdessaFrontend Meetup #11
Highway to FPS or true animations in Angular | OdessaFrontend Meetup #11
Highway to FPS or true animations in Angular | OdessaFrontend Meetup #11
Highway to FPS or true animations in Angular | OdessaFrontend Meetup #11
Highway to FPS or true animations in Angular | OdessaFrontend Meetup #11
Highway to FPS or true animations in Angular | OdessaFrontend Meetup #11
Highway to FPS or true animations in Angular | OdessaFrontend Meetup #11
Highway to FPS or true animations in Angular | OdessaFrontend Meetup #11
Highway to FPS or true animations in Angular | OdessaFrontend Meetup #11
Próxima SlideShare
Cargando en…5
×

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

43 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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 :)

×