academy vol.4
TRANSCRIPT
![Page 1: Academy vol.4](https://reader031.vdocuments.site/reader031/viewer/2022020101/55aef9831a28ab3b0a8b486e/html5/thumbnails/1.jpg)
Výkon Webových Animácií
by Milan
![Page 2: Academy vol.4](https://reader031.vdocuments.site/reader031/viewer/2022020101/55aef9831a28ab3b0a8b486e/html5/thumbnails/2.jpg)
Prečo?
• Improved UX
• “Krok s dobou”
• šetrenie batérie zariadenia
![Page 3: Academy vol.4](https://reader031.vdocuments.site/reader031/viewer/2022020101/55aef9831a28ab3b0a8b486e/html5/thumbnails/3.jpg)
CSS animácie
• Animate.css (http://daneden.github.io/animate.css/)?
![Page 4: Academy vol.4](https://reader031.vdocuments.site/reader031/viewer/2022020101/55aef9831a28ab3b0a8b486e/html5/thumbnails/4.jpg)
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
![Page 5: Academy vol.4](https://reader031.vdocuments.site/reader031/viewer/2022020101/55aef9831a28ab3b0a8b486e/html5/thumbnails/5.jpg)
Velocity.js
![Page 6: Academy vol.4](https://reader031.vdocuments.site/reader031/viewer/2022020101/55aef9831a28ab3b0a8b486e/html5/thumbnails/6.jpg)
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
![Page 7: Academy vol.4](https://reader031.vdocuments.site/reader031/viewer/2022020101/55aef9831a28ab3b0a8b486e/html5/thumbnails/7.jpg)
Velocity.js
• http://velocityjs.org
• DEMO: http://julian.com/research/velocity/demo.html
![Page 8: Academy vol.4](https://reader031.vdocuments.site/reader031/viewer/2022020101/55aef9831a28ab3b0a8b486e/html5/thumbnails/8.jpg)
GSAP
![Page 9: Academy vol.4](https://reader031.vdocuments.site/reader031/viewer/2022020101/55aef9831a28ab3b0a8b486e/html5/thumbnails/9.jpg)
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
![Page 10: Academy vol.4](https://reader031.vdocuments.site/reader031/viewer/2022020101/55aef9831a28ab3b0a8b486e/html5/thumbnails/10.jpg)
GSAP
• http://greensock.com/gsap
• DEMO: http://greensock.com/?post_type=example&p=5676
![Page 11: Academy vol.4](https://reader031.vdocuments.site/reader031/viewer/2022020101/55aef9831a28ab3b0a8b486e/html5/thumbnails/11.jpg)
Impulse
![Page 12: Academy vol.4](https://reader031.vdocuments.site/reader031/viewer/2022020101/55aef9831a28ab3b0a8b486e/html5/thumbnails/12.jpg)
Impulse
• Animácie založené na fyzike
• Dátovo malá a nezávislá knižnica
• Skvelá pre animácie spojené s dotykmi
![Page 13: Academy vol.4](https://reader031.vdocuments.site/reader031/viewer/2022020101/55aef9831a28ab3b0a8b486e/html5/thumbnails/13.jpg)
Impulse
• http://impulse.luster.io/
• DEMO: http://impulse.luster.io/examples.html
![Page 14: Academy vol.4](https://reader031.vdocuments.site/reader031/viewer/2022020101/55aef9831a28ab3b0a8b486e/html5/thumbnails/14.jpg)
Ďakujem