CSS veya JavaScript ile animasyon oluşturabilirsiniz. Hangisini kullanmalısınız ve neden?
Web'de animasyon oluşturmanın iki temel yolu vardır: CSS ve JavaScript. Hangisini seçeceğiniz, projenizin diğer bağımlılıklarına ve ne tür efektler elde etmeye çalıştığınıza bağlıdır.
Özet
- Kullanıcı arayüzü öğesi durumlarını değiştirme gibi daha basit "tek seferlik" geçişler için CSS animasyonları kullanın.
- Sıçrama, durdurma, duraklatma, geri sarma veya yavaşlatma gibi gelişmiş efektler kullanmak istediğinizde JavaScript animasyonları kullanın.
- Animasyon oluşturmak için JavaScript'i tercih ediyorsanız Web Animations API'yi veya kullanabileceğiniz modern bir çerçeveyi kullanın.
Çoğu temel animasyon CSS veya JavaScript ile oluşturulabilir ancak harcanan çaba ve zaman farklıdır (CSS ve JavaScript Performansı başlıklı makaleyi de inceleyin). Her birinin avantajları ve dezavantajları vardır ancak aşağıdaki kurallara uymanız faydalı olacaktır:
- Kullanıcı arayüzü öğeleri için daha küçük, kendi kendine yeten durumlara sahip olduğunuzda CSS'yi kullanın. CSS geçişleri ve animasyonları, bir gezinme menüsünü yandan getirmek veya bir ipucu göstermek için idealdir. Durumları kontrol etmek için JavaScript kullanabilirsiniz ancak animasyonlar CSS'nizde yer alır.
- Animasyonlarınız üzerinde önemli ölçüde kontrole ihtiyacınız olduğunda JavaScript'i kullanın. Web Animasyonları API'si, günümüzde çoğu modern tarayıcıda kullanılabilen standart tabanlı bir yaklaşımdır. Bu sayede, karmaşık nesne yönelimli uygulamalar için ideal olan gerçek nesneler elde edilir. JavaScript, animasyonlarınızı durdurmanız, duraklatmanız, yavaşlatmanız veya geri almanız gerektiğinde de kullanışlıdır.
- Bir sahnenin tamamını manuel olarak yönetmek istediğinizde doğrudan
requestAnimationFrame'yi kullanın. Bu, ileri düzey bir JavaScript yaklaşımıdır ancak oyun oluşturuyor veya HTML kanvas üzerinde çizim yapıyorsanız yararlı olabilir.
Alternatif olarak, animasyon işlevi içeren bir JavaScript çerçevesi zaten kullanıyorsanız (ör. jQuery'nin .animate() yöntemi veya GreenSock'ın TweenMax aracı) animasyonlarınız için bu çerçeveyi kullanmaya devam etmeyi daha uygun bulabilirsiniz.
CSS ile animasyon uygulama
CSS ile animasyon uygulamak, ekranda bir öğeyi hareket ettirmenin en kolay yoludur. Ne olmasını istediğinizi belirttiğiniz için bu yaklaşım beyan edici olarak tanımlanır.
Aşağıda, bir öğeyi 100px hem X hem de Y eksenlerinde hareket ettiren CSS kodu verilmiştir. Bu işlem, 500ms saniye sürmesi ayarlanmış bir CSS geçişi kullanılarak yapılır. move sınıfı eklendiğinde transform değeri değiştirilir ve geçiş başlar.
.box {
transform: translate(0, 0);
transition: transform 500ms;
}
.box.move {
transform: translate(100px, 100px);
}
Geçişin süresinin yanı sıra yumuşak geçiş seçenekleri de vardır. Bu seçenekler, animasyona nasıl bir his vereceğini belirler. Easing hakkında daha fazla bilgi için Easing'in Temel Özellikleri kılavuzunu inceleyin.
Yukarıdaki snippet'te olduğu gibi, animasyonlarınızı yönetmek için ayrı CSS sınıfları oluşturursanız her animasyonu açıp kapatmak için JavaScript'i kullanabilirsiniz:
box.classList.add('move');
Bu sayede uygulamalarınızda iyi bir denge elde edersiniz. JavaScript ile durumu yönetmeye odaklanabilirsiniz. Animasyonların tarayıcıya bırakılması için hedef öğelerde uygun sınıfları ayarlamak yeterlidir. Bu yolu tercih ederseniz öğedeki transitionend etkinliklerini dinleyebilirsiniz. Ancak bu işlemi yalnızca Internet Explorer'ın eski sürümlerinin desteğinden vazgeçebiliyorsanız yapabilirsiniz. Bu etkinlikleri destekleyen ilk sürüm 10'dur. Diğer tüm tarayıcılar bu etkinliği bir süredir destekliyor.
Bir geçişin sonunu dinlemek için gereken JavaScript şu şekilde görünür:
var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);
function onTransitionEnd() {
// Handle the transition finishing.
}
CSS geçişlerinin yanı sıra CSS animasyonları da kullanabilirsiniz. Bu sayede, animasyon kareleri, süreler ve iterasyonlar üzerinde çok daha fazla kontrole sahip olabilirsiniz.
Örneğin, kutuyu geçişlerle aynı şekilde canlandırabilirsiniz ancak tıklama gibi kullanıcı etkileşimleri olmadan ve sonsuz tekrarlarla canlandırabilirsiniz. Ayrıca, birden fazla mülkü aynı anda değiştirebilirsiniz.
.box {
animation-name: movingBox;
animation-duration: 1300ms;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes movingBox {
0% {
transform: translate(0, 0);
opacity: 0.3;
}
25% {
opacity: 0.9;
}
50% {
transform: translate(100px, 100px);
opacity: 0.2;
}
100% {
transform: translate(30px, 30px);
opacity: 0.8;
}
}
CSS animasyonlarında, animasyonu hedef öğeden bağımsız olarak tanımlar ve gerekli animasyonu seçmek için animation-name özelliğini kullanırsınız.
CSS animasyonlarınızın eski tarayıcılarda çalışmasını istiyorsanız tedarikçi firma ön ekleri eklemeniz gerekir. Birçok araç, ihtiyacınız olan CSS'nin ön ek eklenmiş sürümlerini oluşturmanıza yardımcı olabilir. Böylece, ön ek eklenmemiş sürümü kaynak dosyalarınıza yazabilirsiniz.
JavaScript ve Web Animasyonları API'si ile animasyon oluşturma
JavaScript ile animasyon oluşturmak, CSS geçişleri veya animasyonları yazmaya kıyasla daha karmaşıktır ancak genellikle geliştiricilere önemli ölçüde daha fazla güç sağlar. Belirli CSS özelliklerini animasyonlu hale getirmek veya birleştirilebilir efekt nesneleri oluşturmak için Web Animations API'yi kullanabilirsiniz.
JavaScript animasyonları, kodunuzun bir parçası olarak satır içi olarak yazıldığından zorunludur. Ayrıca bunları başka nesnelerin içine de yerleştirebilirsiniz. Daha önce açıklanan CSS geçişini yeniden oluşturmak için yazmanız gereken JavaScript aşağıda verilmiştir:
var target = document.querySelector('.box');
var player = target.animate([
{transform: 'translate(0)'},
{transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
target.style.transform = 'translate(100px, 100px)';
});
Web animasyonları varsayılan olarak yalnızca bir öğenin sunumunu değiştirir. Nesnenizin taşındığı konumda kalmasını istiyorsanız animasyon sona erdiğinde, örneğimizde gösterildiği gibi temel stillerini değiştirmeniz gerekir.
Web Animations API, W3C'nin nispeten yeni bir standardıdır. Bu özellik, çoğu modern tarayıcıda yerel olarak desteklenir. Desteklemeyen modern tarayıcılar için çoklu doldurma kullanılabilir.
JavaScript animasyonları sayesinde, her adımda bir öğenin stillerini tamamen kontrol edebilirsiniz. Yani animasyonlarınızı yavaşlatabilir, duraklatabilir, durdurabilir, tersine çevirebilir ve öğeleri dilediğiniz gibi değiştirebilirsiniz. Bu, davranışınızı uygun şekilde kapsayabileceğiniz için özellikle karmaşık, nesne yönelimli uygulamalar oluşturuyorsanız yararlıdır.