< Nazad na kurseve

Uvod u web animacije

Uvod u animacije

• Kako radi animacija?
• Eksplicitne i implicitne (sprajtovi vs modeli)
• FPS (slika po sekundi)
• Delta vreme

Animacije DOM elemenata

• CSS tranzicije (boje, položaja i vidljivosti)
• CSS animacije (upotreba keyframe)
• SVG animacije
• Javaskript animacije
• jQuery animacije
• Vežba: Pomeranje predmeta

Uvod u HTML5 platno (canvas)

• Koordinatni sistem
• HTML5 canvas element
• Priprema platna
• canvas width i height

Crtanje na platnu

• drawing paths
• Circles and Arcs
• Working with colors options alpha
• working with Canvas images

Javaskript animacije

• Glavna petlja (main loop)
• Animating using setInterval
• Animating using requestAnimationFrame
• Igre i interaktivne animacije

Transformacije

• Rotacija
• Skaliranje
• Translacija
• Refleksija

Napredne animacije

• Programiranje kiše
• Pravljenje kružne animacije pomoću trigonometrije