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ştirmek gibi daha basit "tek seferlik" geçişler için CSS animasyonlarını 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 artıları ve eksileri vardır, ancak bunlar iyi yönergelerdir:
- Kullanıcı arayüzü öğeleri için daha küçük, kendi kendine yeten durumlara sahipseniz 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 yapılmasını istediğinizi belirttiğiniz için bu yaklaşım bildirim temelli olarak tanımlanır.
Aşağıda, bir öğeyi 100px hem X hem de Y eksenlerinde hareket ettiren CSS'yi görebilirsiniz. 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ız için iyi bir denge kurarsınız. JavaScript ile durumu yönetmeye odaklanabilir ve hedef öğelerde uygun sınıfları ayarlayarak animasyonları işlemesi için tarayıcının bırakın. Bu yolu tercih ederseniz öğedeki transitionend etkinliklerini dinleyebilirsiniz. Ancak bu işlemi yapabilmek için Internet Explorer'ın eski sürümlerinin desteğinden vazgeçmeniz gerekir. Bu etkinlikleri destekleyen ilk sürüm 10'dur. Diğer tüm tarayıcılar bir süredir bu etkinliği destekliyordu.
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ıyla, animasyonun kendisini 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 mülklerini canlandırmak veya derlenebilir efekt nesneleri oluşturmak için Web Animasyonları API'sini 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 tarafından sunulan nispeten yeni bir standarttır. Bu özellik, çoğu modern tarayıcıda yerel olarak desteklenir. Desteklenmeyen modern tarayıcılar için çoklu dolgu mevcuttur.
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.