Której techniki animacji DOM powinieneś użyć?

Do tej pory zapoznaliśmy Cię z trzema technikami animowania fragmentów strony internetowej: window.setInterval/setTimeout, window.requestAnimationFrame, oraz z animacjami/przekształceniami CSS.

Podczas rozważania jakiej techniki użyć, powinieneś zadać sobie następujące pytania:

Projektując strony internetowe musimy zadbać o ich wydajność i często jest ona postrzegana jako najważniejsze kryterium. Wydajność przeglądania stron zależna jest od konkretnej wersji przeglądarki, a wydajność przeglądarek mobilnych różni się znacząco od tych na komputerach stacjonarnych. Nie jest więc pewne, że techniki z których korzystasz dzisiaj będą równie wydajne w przyszłości. Obecnie animacje CSS są najszybsze, następnie requestAnimationFrame, a na końcu setInterval.

Za pomocą CSS nie zrobisz wszystkiego. Na przykład, aby rysować po płótnie <canvas> musisz użyć funkcji takich jak fillRect(). Nie da się tego zrobić za pomocą CSS. Aby tego dokonać musiałbyś użyć funkcji requestAnimationFrame lub setInterval do ponownego wykonywania fragmentów kodu. Właściwie, jest to metoda, z której korzystamy na Khan Academy w naszym środowisku ProcessingJS. ProcessingJS jest biblioteką JS, która rysuje wewnątrz znacznika <canvas>. Jeśli w kodzie zdefiniujesz funkcję draw(), to ProcessingJS użyje setInterval do wywoływania kodu zawartego w funkcji draw() w odstępach czasu wynikających z frameRate, czyli ilości klatek na sekundę.

Czasem będziesz potrzebował wywoływać funkcję w określonych odstępach czasu, ale nie będzie to miało związku z animacjami na stronie. Może będziesz prosił serwer o aktualizacje, jak np. Twitter na stronie z postami odświeżanymi na żywo. W takim wypadku możesz użyć po prostu setInterval, bo odstępy czasu nie muszą być szczególnie dokładne (gdy wywołujesz funkcję co minutę części sekundy nie mają dużego wpływu na działanie skryptu). Na Khan Academy korzystamy z tej metody, aby ciągle sprawdzać żądania na stronie pomocy co dwie minuty.

Oczywiście powinieneś pamiętać o zgodności z przeglądarkami. Jeśli piszesz kod, który musi działać w IE9 nie możesz korzystać z requestAnimationFrame i animacji CSS. Musisz używać kombinacji powyższych technik tak, aby strona działała na każdej przeglądarce albo znaleźć bibliotekę, która zrobi to za ciebie np. Velocity.js.

Możesz nauczyć się znacznie więcej na temat tych trzech technik. Odwiedź strony poniżej, aby dowiedzieć się więcej:

Bonus dla fanów Doctor'a Who: jeden z moich ulubionych przykładów potęgi animacji CSS3 - animowany wehikuł czasu.