Výkon Webových Animácií

by Milan

Prečo?

• Improved UX

• “Krok s dobou”

• šetrenie batérie zariadenia

CSS animácie

• Animate.css (http://daneden.github.io/animate.css/)?

JS animácie

• lepšia podpora v prehliadačoch

• poskytujú vačšiu funkcionalitu

• lepšie menežovateľný workflow animácií

• vysoký výkon

• hardvérová akcelerácia

Velocity.js

Velocity.js

• Nadstavba and jQuery.animate

• značné zlepšenie výkonu

• efektívna synchronizácia DOM počas priebehu animácie

• cache-ovanie hodnôt animácie

• vynikajúce výsledky na mobilných zariadeniach

• podpora už od IE8 a Android Browser 2.3

Velocity.js

• http://velocityjs.org

• DEMO: http://julian.com/research/velocity/demo.html

GSAP

GSAP

• Vysoký výkon, špeciálne na mibilných zariadeniach

• Robusná knižnica s mnohými funkciami

• Kompatibilita už s IE6

• Porovnanie výkonu http://greensock.com/js/speed.html

GSAP

• http://greensock.com/gsap

• DEMO: http://greensock.com/?post_type=example&p=5676

Impulse

Impulse

• Animácie založené na fyzike

• Dátovo malá a nezávislá knižnica

• Skvelá pre animácie spojené s dotykmi

Impulse

• http://impulse.luster.io/

• DEMO: http://impulse.luster.io/examples.html

Ďakujem