HTML5 Canvas

Osnovna stvar u animacijama jest tzv. frame rate odnosno brzina izmjene sličica u animaciji. Dakle, svaka animacija se sastoji od niza statičnih sličica koje se izmjenjuju. Tako će biti i u animacijama unutar canvasa.
Kod filmova je najčešća brzina 24fps (frames per second) , tj. 24 sličice u sekundi. Dakle, 1 sličica traje 1000/24=41.67 sekundi, a nakon toga dolazi naredna.
Izmjena ovakvih sličica moguća je uz upotrebu nekoliko JS metoda.

JS metode vremenskog intervala

Osnovne metode koje će neprekidno pozivati funkcije te na taj način obavljati animaciju jesu:
setInterval(function, delay) - neprekidno poziva funkciju nakon svakih delay milisekundi
setTimeout(function, delay) - poziva funkciju jednom sa vremenskim kašnjenjem od delay milisekundi

Primjer - setInterval(): vidi primjer » vidi code

Primjer - setTimeout(): vidi primjer » vidi code

BLINK sa setInterval() - loše: vidi primjer » vidi code

BLINK sa setTimeout() - dobro: vidi primjer » vidi code

U narednom primjeru upotrebljene su ove metode kako bi se ispisali brojevi od 1 do 15. Vremenski interval ispisa je 40ms. Ovaj javascript code se može upotrijebiti za kreiranje animacija u canvasu. Važno je uočiti da se setInterval metoda može zaustaviti pomoću clearInterval() metode.

Ispis brojeva od 1 do 15 svakih 40 milisekundi.

Primjer sa setInterval(): vidi primjer » vidi code

Primjer sa setTimeout(): vidi primjer » vidi code

Metoda window.requestAnimationFrame()

Osim gore spomenutih metoda mogu se koristiti još 2 nove metode:
requestAnimationFrame(function) - poziva funkciju nakon određenog broja milisekundi
cancelAnimationFrame(idObj) - zaustavlja animaciju pozvanu sa requestAnimationFrame

Metoda requestAnimationFrame() funkcionalno djeluje kao setTimeout(),
ali ima slijedeće prednosti:
    - browser automatski sinkronizira animaciju sa refresh rate ekrana pa je ona glađa
    - animacija u neaktivnom tab-u browsera će biti zaustavljena što štedi CPU
    - ušteda baterije (kod laptopa, tableta, mobitela ...)

Brzina animacije postavlja se automatski, a najčešće iznosi 60fps.

Ispis brojeva od 1 do 15.
Primjer sa requestAnimationFrame(): vidi primjer » vidi code

Budući da je ovo relativno nova metoda potrebno je za svaki browser definirati zasebno. To se postiže na slijedeći način:

Ispis brojeva od 1 do 15.
Primjer sa requestAnimationFrame() i crossbrowser code-om:
vidi primjer » vidi code

Kao što je već rečeno kod ove metode se brzina izmjene sličica definira automatski te iznosi najčešće 60fps. Ako ipak želimo kontrolirati fps to ćemo učinit sa slijedećim JS code-om:

Ispis brojeva od 1 do 15. Ispis je sa fps=2.
Primjer sa requestAnimationFrame() i setTimeout():
vidi primjer » vidi code

Ispis brojeva od 1 do 15 sa prekidom kod 10.
Primjer sa requestAnimationFrame() i cancelAnimationFrame():
vidi primjer » vidi code