Hangi DOM animasyon yöntemini kullanmalısınız?

Web sayfanızın bölümlerini hareketlendirmek için üç teknik gördünüz: [window.setInterval](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setInterval)/[setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout), window.requestAnimationFrame, ve CSS animasyonları/geçişleri.

Hangi tekniği kullanacağınızı düşündüğünüzde, şu sorulara bakmalısınız:

Web sayfalarını yaparken, performans bizim için çok önemlidir, onun için bunu en önemli kriter olarak görmek isteriz. Ancak, yeni tarayıcılar çıktığında tarayıcı performansı değişir, ve mobil tarayıcılar masaüstü tarayıcılarından çok farklı performans gösterebilir onun için bugün en iyi performans gösteren teknik, yarın en iyi performans gösteren teknik olmayabilir. Halen, CSS animasyonları/geçişleri en iyi performans gösterendir, sonra requestAnimationFrame, sonra setInterval.

Ancak, CSS her şeyi yapamaz. Örneğin, <canvas> etiketinde pikselleri ve şekilleri çizmek için, fillRect() gibi fonksiyonlar çağırmanız gerekir, CSS kullanamazsınız. Bunun yerine, bu fonksiyonları periyodik olarak çağırmak için, requestAnimationFrame veya setInterval kullanmanız gerekir. Aslında, Khan Academy ortamımızda, ProcessingJS ortamında yaptığımız da aynen budur. ProcessingJS, <canvas> etiketine çıktı veren bir JS kütüphanesidir ve kodunuzda draw() fonksiyonu tanımlarsanız, ProcessingJS frameRate'e göre, bu draw() fonksiyonunu çağırmak için setInterval kullanır.

Bazen, JavaScript fonksiyonlarını periyodik olarak çağırmak istersiniz, ama sayfada bir şeyi hareketlendirmek için değil. Bir sunucuya güncelleme soruyor olabilirsiniz, Twitter'in gerçek zamanlı beslemesini güncelleştirdiğinde yaptığı gibi. Bu durumda, setInterval kullanabilirsiniz, ve zamanlamanın kesinliği fark yaratmaz, çünkü bunu dakikada bir falan çağırırsınız. Biz Khan Academy yardım talepleri sayfasında böyle yapıyoruz, sürekli 2 dakikada bir, yeni yardım taleplerini kontrol ediyoruz.

Elbette, tarayıcı uyumunu aklınızda tutmalısınız. IE9'da çalışması gereken bir kod yazıyorsanız, requestAnimationFrame veya CSS animasyonu kullanamazsınız. Tarayıcıların hepsinde çalışan bir teknik kombinasyonu kullanmanız veya sizin için bunu yapan bir kütüphane bulmanız gerekir, Velocity.js gibi.

Bu tekniklerle ilgili daha öğrenilecek çok şey vardır. Daha fazlasını öğrenmek için, bu bağlantıları izleyin:

Doctor Who hayranları için bonus: CSS3 animasyonlarının gücüyle ilgili en sevdiğim örneklerden biri, BU animated TARDIStir.