Каква техника на DOM анимация трябва да използваш?

Досега видя три техники, чрез които можеш да анимираш части от своята уеб страница: window.setInterval/setTimeout, window.requestAnimationFrame и CSS анимации и плавни преходи.

Когато обмисляш коя техника да използваш, трябва да помислиш върху следните въпроси:

Когато правим уеб страници, сме загрижени за производителността, затова можем да приемем, че това е най-важният критерий. Производителността в браузъра обаче се променя, когато се появят нови браузъри, а мобилните браузъри могат да работят по различен начин от настолните, затова техниката, която днес работи най-добре, утре може да не е най-добрата. За момента CSS анимациите/трансформациите са най-добри, когато става дума за производителност, следвани от requestAnimationFrame и setInterval.

И все пак CSS не може да направи всичко. Например, за да нарисуваш пиксели и форми в тага <canvas>, трябва да извикаш функции като fillRect() и не можеш да изпозлваш CSS. Вместо това ще трябва да използваш requestAnimationFrame или setInterval, за да извикваш периодично тези функции. Всъщност точно това правим тук в Кан Академия в нашата среда на ProcessingJS. ProcessingJS е JS библоиотека, която рисува в таг <canvas> и ако дефинираш функция draw() в своя код, тогава ProcessingJS използва setInterval, за да извиква постоянно функцията draw() според frameRate.

Понякога искаш да извикаш JavaScript функции периодично, но не защото ти трябва да анимираш нещо на страницата. Може би изпращаш заявки към сървър за актуализация, както прави Twitter, когато актуализира своите новини в реално време. В този случай можеш просто да използваш setInterval и тогава няма да има значение, че реакцията не е мигновена, защото го извикваш на всяка минута или нещо такова. Това правим в Кан Академия на страницата за помощ, за да проверяваме на всеки 2 минути дали няма изпратени заявки за помощ.

Разбира се, не трябва да забравяш за съвместимостта с браузъри. Ако пишеш код, който трябва да работи в IE9, тогава не можеш да използваш requestAnimationFrame или CSS анимации. Трябва да използваш комбинация от техники, които работят в браузърите, или да намериш библиотека, която да прави това вместо теб, например Velocity.js.

Още много може да се научи за всички тези техники. Посети тези линкове, за да научиш повече:

Бонус за феновете на сериала Doctor Who: един от моите любими примери за силата на CSS3 анимациите в този анимиран TARDIS.