Animasyonlar

Teknoloji Seçimleri

Animasyonlar genellikle uygulamaları daha canlı hale getirmek için kullanılır. Günümüzde tarayıcılar CSS animasyonları için iyi bir desteğe sahip ve hızlı JavaScript tabanlı animasyonlar sağlayan çeşitli kütüphaneler bulunmaktadır. Ayrıca, en son teknolojileri kullanmayı tercih ediyorsanız, gelişmekte olan bir Web API ve bir polyfill de mevcuttur.

Mithril.js, zengin ve karmaşık animasyonlar elde etmek için bu diğer seçenekler yeterli olduğundan, herhangi bir animasyon API'si sunmaz. Ancak Mithril.js, animasyonların uygulanmasının geleneksel olarak zor olduğu bazı özel durumlarda işleri kolaylaştırmak için yaşam döngüsü kancaları (hooks) sağlar.

Eleman Oluşturma Animasyonu

Bir elemanın oluşturulmasını CSS ile canlandırmak oldukça basittir. Normalde olduğu gibi bir CSS sınıfına bir animasyon eklemeniz yeterlidir:

.fancy {
  animation: fade-in 0.5s;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

var FancyComponent = {
  view: function () {
    return m('.fancy', 'Merhaba dünya');
  },
};

m.mount(document.body, FancyComponent);

Eleman Kaldırma Animasyonu

Bir elemanı kaldırmadan önce animasyon uygulama konusundaki sorun, elemanı tamamen kaldırmak için animasyonun bitmesini beklememiz gerekmesidir. Neyse ki, Mithril.js, elemanın kaldırılmasını geciktirmemize olanak tanıyan onbeforeremove kancasını sunar.

opacity değerini 1'den 0'a düşürerek kaybolma efekti veren bir exit animasyonu oluşturalım.

.exit {
  animation: fade-out 0.5s;
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

Şimdi, önceki bölümde oluşturduğumuz FancyComponent'ı gösterip gizleyen basit bir bileşen oluşturalım:

var on = true;

var Toggler = {
  view: function () {
    return [
      m(
        'button',
        {
          onclick: function () {
            on = !on;
          },
        },
        'Değiştir'
      ),
      on ? m(FancyComponent) : null,
    ];
  },
};

Ardından, kaldırıldığında solma efektiyle kaldıracak şekilde FancyComponent'ı değiştirelim:

var FancyComponent = {
  onbeforeremove: function (vnode) {
    vnode.dom.classList.add('exit');
    return new Promise(function (resolve) {
      vnode.dom.addEventListener('animationend', resolve);
    });
  },
  view: function () {
    return m('.fancy', 'Merhaba dünya');
  },
};

vnode.dom, bileşenin kök DOM elemanına (<div class="fancy">) işaret eder. Burada exit sınıfını <div class="fancy">'ye eklemek için classList API'sini kullanıyoruz.

Ardından, animationend olayı tetiklendiğinde çözülen bir Promise döndürüyoruz. onbeforeremove'dan bir promise döndürdüğümüzde, Mithril.js, promise çözülene kadar bekler ve elemanı yalnızca o zaman kaldırır. Bu durumda, çıkış animasyonunun bitmesini bekler.

Toggler bileşenini bağlayarak hem giriş hem de çıkış animasyonlarının çalıştığını doğrulayabiliriz:

m.mount(document.body, Toggler);

onbeforeremove kancasının, bir eleman DOM'dan ayrılırken parentNode özelliğini kaybeden eleman üzerinde tetiklendiğine dikkat edin. Bu davranışın amacı, sayfa geçişlerinde olası tüm çıkış animasyonlarının aynı anda çalışmasını engelleyerek daha tutarlı bir kullanıcı deneyimi sağlamaktır. Çıkış animasyonunuz çalışmıyorsa, animasyon kodunuzun çağrıldığından emin olmak için onbeforeremove işleyicisini DOM ağacında mümkün olan en üst seviyeye eklediğinizden emin olun.

Performans

Animasyon oluştururken, modern tarayıcılar tarafından donanım ile hızlandırılabilen ve top, left, width ve height özelliklerini canlandırmaktan daha iyi performans sağladıkları için yalnızca opacity ve transform CSS özelliklerini kullanmanız önerilir.

Ayrıca, box-shadow özelliği ve :nth-child gibi seçicilerden kaçınmanız önerilir; çünkü bunlar da kaynak yoğun seçeneklerdir. Bir box-shadow'u canlandırmak istiyorsanız, box-shadow özelliğini bir sözde elemana uygulayıp, o elemanın şeffaflığını animasyonlandırmayı düşünebilirsiniz. Performansı düşürebilecek diğer şeyler arasında büyük veya dinamik olarak ölçeklenmiş resimler ve farklı position değerlerine sahip (örneğin, position: fixed olan bir elemanın üzerinde position: absolute olan bir eleman) örtüşen elemanlar bulunur.