Doğru kullanıldığında, animasyonlar kullanıcı algısını ve hafızasını geliştirir dijital bir alanda bağlam sağlayarak, kullanıcı eylemlerine rehberlik edin ve kullanıcıların uygulamanızda gezinmesine yardımcı olun.
bu Web Animasyonları API’sı geliştiricilerin yazmasını sağlayan bir araçtır JavaScript ile zorunlu animasyonlar. Hem CSS animasyonunu hem de geçiş uygulamalarını desteklemek ve gelecekteki efektlerin yanı sıra mevcut efektlerin oluşturulmasını ve zamanlanmasını sağlamak için yazılmıştır.
Sırasında Firefox Ve Safari zaten tam spesifikasyon setini uygulamış özelliklerChromium 84, daha önce desteklenmeyen bir dizi özellik getiriyor. Krom ve Kenar tarayıcılar arası birlikte çalışabilirliği etkinleştirir.
Başlarken #
Web Animations API aracılığıyla bir animasyon oluşturmak, kullandıysanız çok tanıdık gelecektir. @keyframe tüzük. Öncelikle bir Anahtar Kare Nesnesi oluşturmanız gerekir. Neye benzeyebilir Bu CSS’de:
@keyframes openAnimation {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
Benzeyecekmiş gibi Bu JavaScript’te:
const openAnimation = [
{ transform: 'scale(0)' },
{ transform: 'scale(1)' },
];
CSS’de animasyon için parametreleri ayarladığınız yer:
.modal {
animation: openAnimation 1s 1 ease-in;
}
JS’de ayarlarsınız:
document.querySelector('.modal').animate(
openAnimation, {
duration: 1000, // 1s
iterations: 1, // single iteration
easing: 'ease-in' // easing function
}
);
Kod miktarı yaklaşık olarak aynıdır, ancak JavaScript ile, yalnızca CSS’de sahip olmadığınız birkaç süper güce sahip olursunuz. Bu, efektleri sıralama yeteneğini ve oyun durumlarının artan kontrolünü içerir.
Öte element.animate() #
Ancak güncellemeyle birlikte, Web Animasyonları API’si artık aracılığıyla oluşturulan animasyonlarla sınırlı değil. element.animate(). CSS animasyonlarını ve geçişlerini de değiştirebiliriz.
getAnimations() aracılığıyla oluşturulup oluşturulmadığına bakılmaksızın bir öğedeki tüm animasyonları döndüren bir yöntemdir. element.animate() veya CSS kuralları (CSS animasyonu veya geçişi) aracılığıyla. İşte bunun nasıl göründüğüne bir örnek:
Önce sen "get" nereden geçiş yaptığımızı belirlemek için geçiş için anahtar kareler. Ardından, çapraz solma efektini etkinleştiren iki yeni opaklık animasyonu yaratırsınız. Çapraz geçiş tamamlandığında, kopyayı silersiniz.
Animasyonları vaatlerle düzenleme #
Chromium 84’te artık vaatlerle kullanılabilecek iki yönteminiz var: animation.ready Ve animation.finished.
animation.readybekleyen değişikliklerin etkili olması için beklemenizi sağlar (yani oynatma ve duraklatma gibi oynatma kontrol yöntemleri arasında geçiş yapma).animation.finishedbir animasyon tamamlandığında özel JavaScript kodunu çalıştırmanın bir yolunu sağlar.
Örneğimizle devam edelim ve aşağıdakilerle düzenlenmiş bir animasyon zinciri oluşturalım: animation.finished. Burada dikey bir dönüşümünüz var (scaleY), ardından yatay bir dönüşüm (scaleX), ardından bir alt öğede bir opaklık değişikliği:
const transformAnimation = modal.animate(openModal, openModalSettings);
transformAnimation.finished.then(() => { text.animate(fadeIn, fadeInSettings)});
Bu animasyonları kullanarak zincirledik. animation.finished.then() zincirdeki bir sonraki animasyon setini yürütmeden önce. Bu şekilde, animasyonlar sırayla görünür ve hatta farklı seçenekler kümesiyle (hız ve kolaylık gibi) farklı hedef öğelere efektler uyguluyorsunuz.
CSS içinde, özellikle birden çok öğeye benzersiz ancak sıralı animasyonlar uygularken, bunu yeniden oluşturmak külfetli olacaktır. bir kullanmak zorunda kalacaksın @keyframeanimasyonları yerleştirmek için doğru zamanlama yüzdelerini sıralayın ve kullanın animation-delay dizideki animasyonları tetiklemeden önce.
Örnek: Yürüt, duraklat ve geri al #
Ne açabilir, kapatmalı! Neyse ki, beri krom 39Web Animasyonları API’si bize animasyonlarımızı oynatma, duraklatma ve tersine çevirme yeteneği sağladı.
Yukarıdaki animasyonu alıp düğmeyi tekrar tıklattığınızda pürüzsüz, tersine çevrilmiş bir animasyon verebilirsiniz. .reverse(). Bu şekilde, modumuz için daha yumuşak ve bağlamsal bir etkileşim oluşturabilirsiniz.
Yapabileceğiniz şey, oynatılmaya hazır iki animasyon oluşturmaktır (openModalve bir satır içi opaklık dönüşümü) ve ardından animasyonlardan birini duraklatın ve diğeri bitene kadar erteleyin. Daha sonra, oynamadan önce her birinin bitmesini beklemek için vaatleri kullanabilirsiniz. Son olarak, bir bayrağın ayarlanıp ayarlanmadığını kontrol edebilir ve ardından her animasyonu tersine çevirebilirsiniz.
Örnek: Kısmi anahtar karelerle dinamik etkileşimler #
selector.animate([{transform: `translate(${x}px, ${y}px)`}],
{duration: 1000, fill: 'forwards'});
Bu örnekte yalnızca bir ana kare vardır ve belirtilen bir başlangıç konumu yoktur. Bu bir kullanım örneğidir kısmi anahtar kareler. Fare işleyicisi burada birkaç şey yapar: yeni bir bitiş konumu ayarlar ve yeni bir animasyonu tetikler. Yeni başlangıç konumu, mevcut temel konumdan çıkarılır.
Mevcut geçişler devam ederken yeni geçişler tetiklenebilir. Bu, mevcut geçişin kesintiye uğradığı ve yeni bir geçişin yaratıldığı anlamına gelir.
Değiştirilebilir animasyonlarla performans iyileştirmeleri #
gibi olaylara dayalı animasyonlar oluştururken 'mousemove', her seferinde belleği hızla tüketebilen ve performansı düşürebilen yeni bir animasyon oluşturulur. Bu sorunu çözmek için, Chromium 83’te değiştirilebilir animasyonlar tanıtıldı ve otomatik temizleme sağlandı, burada biten animasyonlar değiştirilebilir olarak işaretlendi ve başka bir tamamlanmış animasyonla değiştirilirse otomatik olarak kaldırıldı. Aşağıdaki örneği göz önünde bulundurun:
elem.addEventListener('mousemove', evt => {
rectangle.animate(
{ transform: translate(${evt.clientX}px, ${evt.clientY}px) },
{ duration: 500, fill: 'forwards' }
);
});
Fare her hareket ettiğinde, tarayıcı kuyruklu yıldız izindeki her topun konumunu yeniden hesaplar ve bu yeni noktaya bir animasyon oluşturur. Tarayıcı artık aşağıdaki durumlarda eski animasyonları kaldıracağını (değiştirmeyi etkinleştirerek) bilmektedir:
- Animasyon bitti.
- Bileşik sıralamada daha yüksek olan ve yine tamamlanmış olan bir veya daha fazla animasyon var.
- Yeni animasyonlar aynı özellikleri canlandırıyor.
Kaldırılan her animasyon için bir sayaç oluşturarak tam olarak kaç animasyonun değiştirildiğini görebilirsiniz. anim.onremove sayacı tetiklemek için.
Animasyon kontrolünüzü daha da ileri götürmek için birkaç ek yöntem vardır:
animation.replaceState()bir animasyonun etkin mi, kalıcı mı yoksa kaldırılmış mı olduğunu izlemek için bir araç sağlar.animation.commitStyles()Bir öğenin stilini, bileşik sıradaki öğedeki tüm animasyonlarla birlikte temel stile göre günceller.animation.persist()bir animasyonu değiştirilemez olarak işaretler.
Bileşik modlarla daha akıcı animasyonlar #
Web Animasyonları API’si ile artık animasyonlarınızın bileşik modunu ayarlayabilirsiniz, yani varsayılan “değiştir” moduna ek olarak eklemeli veya birikimli olabilirler. Bileşik modlar geliştiricilerin farklı animasyonlar yazmasına ve efektlerin nasıl birleştirileceği üzerinde kontrol sahibi olmasına olanak tanır. Artık üç bileşik mod desteklenmektedir: 'replace' (varsayılan mod), 'add'Ve 'accumulate'.
Animasyonları birleştirdiğinizde, bir geliştirici kısa, belirgin efektler yazabilir ve bunların bir arada olduğunu görebilir. Aşağıdaki örnekte, her kutuya bir döndürme ve ölçeklendirme anahtar karesi uyguluyoruz; tek ayarlama, bir seçenek olarak eklenen bileşik moddur:
varsayılan olarak 'replace' bileşik modda, son animasyon transform özelliğinin yerini alır ve rotate(360deg) scale(1.4). İçin 'add'kompozit döndürmeyi ekler ve ölçeği çarparak son bir durumla sonuçlanır rotate(720deg) scale(1.96). 'accumulate' dönüşümleri birleştirir, sonuçta rotate(720deg) scale(1.8). Bu bileşik modların incelikleriyle ilgili daha fazla bilgi için şuraya göz atın: CompositeOperation ve CompositeOperationOrAuto numaralandırmaları Web Animasyonları özelliğinden.
Bir UI öğesi örneğine bir göz atalım:
Burada, iki top animasyonlar birleştirilir. Birincisi, açılır listeyi sayfanın üst kısmından içeri kaydırma efekti olarak menünün tam yüksekliğine kadar hareket ettiren bir makro animasyondur ve ikincisi, bir mikro animasyondur ve alta çarptığında küçük bir sıçrama uygular. Kullanmak 'add' bileşik mod daha yumuşak bir geçiş sağlar.
const dropDown = menu.animate(
[
{ top: `${-menuHeight}px`, easing: 'ease-in' },
{ top: 0 }
], { duration: 300, fill: 'forwards' });
dropDown.finished.then(() => {
const bounce = menu.animate(
[
{ top: '0px', easing: 'ease-in' },
{ top: '10px', easing: 'ease-out' },
{ ... }
], { duration: 300, composite: 'add' });
});
Web Animations API için sırada ne var? #
Bunların hepsi, günümüzün tarayıcılarındaki animasyon yeteneklerine yapılan heyecan verici eklemelerdir ve daha da fazla eklemeler yoldadır. Sırada nelerin geleceğine dair daha fazla okuma için bu gelecekteki spesifikasyonlara göz atın: