Zaman Tabanlı CSS Animasyon Tekniği

CSS Animasyonları için Zaman Tabanlı Yaklaşım

• CSS’de matematik fonksiyonları desteklenmeye başlamasıyla zaman temelli CSS animasyonlarını tekrar uygulamayı denemek mümkün oldu
  • mod(), round(), trigonometrik fonksiyonlar vb. destekleniyor
  • Demoları görebilmek için deneysel özellik bayrağını etkinleştirmek gerekebilir

Temel Fikir

• CSS Houdini API’si ile zamanı (milisaniye cinsinden) izleyen özel bir değişken tanımlayabilirsiniz
  • @property kuralını kullanarak --t değişkeni tanımlayın ve başlangıç değerini 0 olarak ayarlayın
  • @keyframes kuralı ile --t değişkenini 24 saat boyunca (86,400,000ms) doğrusal olarak artırın
  • --t üzerinde kurulu diğer değerler birlikte değişerek animasyon etkisi oluşturur
  • counter() fonksiyonu ile --t değişkeninin değeri görüntülenebilir

Kare Hızı Kontrolü

• Saniyede 60 kare (FPS) güncelleme aralığını korumak akıcı animasyon için yeterlidir
• Gerekirse step() fonksiyonu ile kare hızını manuel olarak kontrol edebilirsiniz
  • animation-timing-function özelliğinde step() fonksiyonunu kullanarak istediğiniz FPS değerini hesaplayın

Zaman Dönüşümü

• --t değeri tek yönlü sürekli arttığı için bazı CSS özellikleri için uygun olmayabilir
• min() fonksiyonuyla belirli bir değere ulaşıldığında animasyonu durdurabilirsiniz
• mod() fonksiyonuyla animasyonu yeniden başlatabilirsiniz
• sin() fonksiyonuyla ileri-geri hareket etkisi oluşturabilirsiniz

Özel Easing Fonksiyonu

• Matematik fonksiyonları ve --t değişkenini kullanarak özelleştirilmiş easing fonksiyonu oluşturabilirsiniz
• cubic-bezier() ile zorluğu olan efektler üretilebilir
• Örnekler: ease-out-cubic, ease-out-elastic gibi

CSS Doodle Deneyleri

• Karmaşık ifadelerde var() ve calc() kodun okunabilirliğini düşürebilir
• CSS Doodle’de --t değişkenini belirtmek için @t fonksiyonu kullanılabilir
• En yeni CSS Doodle sürümü, argüman içinde doğrudan basit matematiksel ifadeye izin verir
• Ek olarak @T ve @TS fonksiyonları da sağlanır
  • @T günün başlangıcından itibaren zamanı gösterir
  • @TS, @t(/1000) için bir kısayoldur ve zamanı saniye cinsinden izler
• Saat örneği ve zıplama hareketi örnekleri CSS Doodle ile uygulanabilir

Sonuç

• Zamanı değişken olarak kullanan bu yaklaşım ilginç
• Keyframes kullanımı daha sezgisel gelebilir ancak matematik hesaplamasının ve giriş değişkenlerinin fazla olduğu demo sahnelerinde zaman değişkenini kullanan yaklaşım farklı sonuçlar üretilebilir

GN⁺ Görüşü

• CSS’deki zaman temelli animasyon tekniği, yalnızca CSS ile uygulanabilir animasyon kapsamını genişletmekle kalmaz, aynı zamanda shader veya WebGL gibi diğer tekniklerle entegrasyon olasılığını da artıracak gibi görünüyor
• CSS Houdini ve CSS Doodle gibi araçlarla birlikte kullanıldığında daha esnek ve çeşitli anlatımlar mümkün görünür
• Bununla birlikte tarayıcı uyumluluğu sorunları veya performans konuları gibi gerçek projelerde dikkat edilmesi gereken noktalar olacaktır. Mevcut Keyframe yaklaşımıyla avantaj ve dezavantajları iyi karşılaştırıp seçici kullanmak iyi olacaktır
• GSAP gibi uzman animasyon kütüphaneleriyle karşılaştırıldığında avantaj ve dezavantajları da analiz etmek gerekir. Karşılıklı tamamlayıcı olarak kullanabileceğiniz seçeneklerin nasıl bulunabileceğini de araştırmak iyi olur
• Zaman temelli CSS animasyonlarının örnek ve kullanım senaryolarının daha fazla paylaşılmasıyla front-end geliştiricilerin bunları daha kolay uygulayabilmelerini umuyorum

[GN⁺]

Hacker News yorumları

• CSS'te negatif animation-delay değeri kullanarak animasyonun ilerleyişini JavaScript ile kontrol edebiliyoruz. Örneğin animation-delay: -1500ms olarak ayarlandığında animasyon hemen başlar ama 1.5 saniyelik noktaya atlar. Bu değeri JavaScript ile manipüle ederek CSS animasyonlarını scrub'layabilir ve tüm animasyonları oyun motoru stili bir hesapla-güncelle-render tick döngüsüyle uyumlu hale getirebilirsiniz.

• Sadece basit bir easing fonksiyonu veya bir-iki kanallı temel keyframe'den biraz daha fazlasını gerektiren duruma geçince bu yaklaşımın sınırlarına hızla çarpılır. Theatre.js kütüphanesi, keyframe ve Bezier eğrilerini düzenlemek için bir zaman çizelgesi içeren stüdyo arayüzü ile bu keyframe'leri alıp zaman çizelgesine göre değerleri enterpole eden bir runtime sağladığı için, ayarlanmış animasyonlara ihtiyaç duyulduğunda oldukça kullanışlıdır.

• Bu yazıda, tarayıcı desteği %88 olan özel CSS @property kullanılıyor. Tarayıcıların başlangıç değeri davranışı farklı olduğuna dikkat edilmelidir. Chrome tanımsız veya geçersiz bir değerde başlangıç değerini kullanır, ancak Firefox yalnızca tanımsızsa kullanır. Çoğu projede sorun çıkarmaz ama tarayıcılar arası uygulama farklarını kapatmak için Firefox'un varsayılanını JavaScript ile ayarlamak gerekebilir.

• CSS, mod(), round(), trigonometrik fonksiyonlar gibi yeterli matematiksel fonksiyona sahiptir. CSS, JavaScript gibi bir zamanlayıcı başlatamaz ama artık CSS Houdini API ile custom property tanımlayıp milisaniye düzeyinde zamanı takip etmek mümkün. Öte yandan JavaScript varken bunların hepsine neden ihtiyaç duyuyoruz? Çizim katmanının yalnızca çizim primitifleriyle ilgilenmesi gerekmez mi? Neden giderek daha fazla yüksek düzeydeki katmanı eklemeye çalışıyoruz?

• Gerçekten şık görünüyor, iyi yazılmış bir metin. Chrome, mod() için CSS desteğini henüz yayınlamadığı için bir önizleme sürümü kullanmadığınız sürece sayfanın çoğu örneği animasyonlu olmaz.

• Tick'i yönetmenize gerek kalmadan tüm tarayıcılarda pürüzsüz CSS animasyonları istiyorsanız FLIP yöntemi kullanışlıdır.

• Nefes al-ver, dur-kalk gibi tüm adımları istediğiniz şekilde kişiselleştirip hedeflediğiniz etkiye ulaştırabileceğiniz bir 'box breathing' (kutu nefes) çalışması yapmak istiyordum ama bu sayfada gördüğümüz gibi bir yöntem olmadan (JS ya da aşırı karmaşıklık olmadan) nasıl yapacağımı bulamadım. Bu sayfada gerçekten yaratıcı bir demo var!

• İlginç bir şekilde, mod() içermeyen demo çalışıyor ama mod() ve sin() modern Android Chrome'da hiç bir şey yapmıyor.

• Sayfanın altında bulunan animasyon çok etkileyici. Bir öğesi gibi değil, gibi görünüyor.

• Oldukça etkileyici ama bir bakıma Flash ile onlarca yıl önce yapılabilen noktaya geri dönmüşüz gibi. Flash'ın geri dönmesini istemiyorum ama CSS animasyonlarını yapmak için daha kullanıcı dostu araçlar olsa harika olur.