Solitaire Oyunum İçin Nasıl Bir Animasyon Kitaplığı Seçtim?

Animasyon kitaplıkları için çok sayıda CSS ve JavaScript kitaplığı var. Aslında o kadar çok ki, projeniz için doğru olanı seçmek imkansız görünebilir. kurmaya karar verdiğimde karşılaştığım durum buydu. çevrimiçi Solitaire oyunu. Bir animasyon kitaplığına ihtiyacım olacağını biliyordum ama hangisini seçmem doğru olurdu?

Bu makalede, nelere dikkat ettiğimi, nelere dikkat edeceğimi ve size mevcut en popüler kütüphanelerden bazılarını sunacağım. Görüşlerimi göstermek için sizinle birlikte bazı gerçek dünya örneklerini gözden geçireceğim ve sonunda, umarım, bir animasyon kitaplığı seçmem gerektiğinde benden daha donanımlı olursunuz.

Bu tavsiyeyle kat ettiğiniz mesafe elbette değişebilir. Burada paylaştığım her şey, inşa etmek istediğim bir şeye özel. Projenizin tamamen farklı gereksinimleri ve öncelikleri olabilir ve sorun değil. Bence burada önemli olan, ilk elden bir hesap almak. bir ön uç geliştirici gibi düşünmek belirli bir hedefle.

Bundan bahsetmişken, kendimi bir ön uç geliştirici olarak görüyorum ama arka planım tasarım açısından çok ağır. Yani kodu biliyorum ama JavaScript mühendisi kadar değil. Sadece bunu açıklığa kavuşturmak istedim çünkü deneyim kesinlikle nihai kararı etkileyebilir.

işte gol

Herhangi bir karar vermeye başlamadan önce, oyunun bu CSS-Tricks-ified sürümünde yapmam gereken animasyon türlerine bir göz atalım:

Çok tatlı, değil mi? Bu animasyonlar hakkında tam olarak önemsiz bir şey yok. Çok şey oluyor - bazen aynı anda - ve düzenleyecek çok şey var. Ayrıca, animasyonların çoğu kullanıcı etkileşimleri tarafından tetiklenir. Bu da beni kararıma yönlendiren birkaç öncelikle baş başa bıraktı:

• Pürüzsüz animasyonlar: Animasyonların uygulanma şekli, düzgün çalışıp çalışmamaları veya biraz kesinti gösterip göstermemeleri üzerinde büyük bir etkiye sahip olabilir.
• performans: Herhangi bir kütüphaneyi benimsemek bir projeye ağırlık katacak ve oyunumun mümkün olduğunca yalın olmasını istedim.
• kolaylık: Animasyonları yazmayı ve yönetmeyi kolaylaştıran güzel, temiz bir sözdizimi istedim. Daha iyi, daha sürdürülebilir kod yazmama izin veriyorsa, küçük bir performans maliyeti için biraz ekstra rahatlık bile verirdim. Yine, bu tasarımcıdan geliştiriciye dönüşen bir geliştirici için iyiye işarettir.
• Tarayıcı desteği: Tabii ki, oyunumun eski tarayıcıları tamamen engellemesini önlemek için bir tür aşamalı geliştirme kullanarak herhangi bir modern tarayıcıda çalışmasını istedim. Ayrıca, kesinlikle geleceğe yönelik bir hazırlık yapmak istedim.

Bu iş için doğru aleti aramaya giderken yanımda götürdüğüm şey buydu.

CSS veya JavaScript arasında seçim yapmak animasyon kitaplıkları

Bir animasyon kitaplığı seçerken ilk düşündüğüm şey, CSS tabanlı bir kitaplık mı yoksa JavaScript tabanlı bir kitaplık mı kullanacağımdı. Bir sürü harika CSS kitaplıkları, birçoğu benim için yüksek bir öncelik olan mükemmel performansa sahip. Animasyonları sıralama ve animasyon tamamlandığında geri arama alma yeteneği gibi bazı ağır hizmet animasyonları yapmak istiyordum. Saf CSS ile bunların hepsi tamamen mümkün - yine de çoğu JavaScript kitaplığının sunduğundan çok daha az sorunsuz.

Basit bir sıralı animasyonun CSS'de nasıl göründüğüne bakalım ve onu birçok yerleşik animasyon yardımcısına sahip jQuery ile karşılaştıralım:

Animasyonlar aynı görünüyor ancak farklı şekilde yaratılıyor. CSS animasyonunu yapmak için öncelikle CSS'mizde animasyon karesi animasyonunu tanımlamalı ve onu bir sınıfa eklemeliyiz:

.card.move {
  animation : move 2s;
}

@keyframes move {
  0% { left: 0 }
  50% { left: 100px }
  100% { left: 0 }
}

Daha sonra JavaScript kullanarak animasyonu yürütür ve öğede bir CSS geri aramasını dinleriz:

var cardElement = document.getElementsByClassName("card")[0];
var statusElement = document.getElementsByClassName("status")[0];

cardElement.classList.add("move");
statusElement.innerHTML = "Animating"

var animationEndCallback = function() {
  cardElement.classList.remove("move");
  statusElement.innerHTML = "Inactive"
}

cardElement.addEventListener("webkitAnimationEnd", animationEndCallback);
cardElement.addEventListener("oAnimationEnd", animationEndCallback); 
cardElement.addEventListener("antionend", animationEndCallback);

Bunun gibi basit bir örnekte olayların farklı yerlerde olması iyi olabilir, ancak işler biraz daha karmaşık hale geldiğinde çok kafa karıştırıcı hale gelebilir. 

Bunu jQuery ile animasyonun nasıl yapıldığıyla karşılaştırın:

$(".status").text("Animating")
$( ".card" ).animate({
  left: "100px"
}, 1000);
$( ".card" ).animate({
  left: 0
}, 1000, function() {
  $(".status").text("Inactive")
});

Burada, her şey aynı yerde gerçekleşir ve gelecekte animasyonların daha karmaşık hale gelmesi durumunda işleri basitleştirir.

Bir JavaScript kitaplığının gidilecek doğru yol olduğu açıktı, ancak Solitaire oyunum için doğru olan hangisiydi? Demek istediğim, jQuery harika ve bugün bile yaygın olarak kullanılmaktadır, ama bu şapkamı asmak istediğim bir şey değil. Çok sayıda JavaScript animasyon kitaplığı var, bu yüzden aklımdaki ağır animasyon türlerini işlemek için özel olarak oluşturulmuş bir şey düşünmek istedim.

JavaScript animasyon kitaplığı seçme

JavaScript animasyon kitaplıklarında eksiklik olmadığı çabucak anlaşıldı ve yeni, heyecan verici teknolojiler. Hepsinin yararları ve sakıncaları var, o yüzden düşündüklerimden bazılarını ve nedenlerini gözden geçirelim.

The Web Animasyonları API'sı gelecekte birçok JavaScript animasyon kitaplığının yerini alabilecek böyle bir durumdur. Bununla, herhangi bir harici kitaplık yüklemeden ve CSS animasyonlarıyla aynı performansla karmaşık kademeli animasyonlar oluşturabileceksiniz. Tek dezavantajı, henüz tüm tarayıcılar desteklemiyor. 

The <canvas> öğesi başka bir heyecan verici fırsat sunuyor. İçinde, DOM'da olduğu gibi JavaScript ile şeyleri canlandırabiliriz, ancak animasyon raster olarak işlenir, bu da bazı yüksek performanslı animasyonlar yapabileceğimiz anlamına gelir. Tek dezavantajı, tuval öğesinin esasen DOM'da bir görüntü olarak oluşturulmasıdır, bu nedenle piksel mükemmelliği arıyorsak şansımız tükenebilir. Tasarımla son derece uyumlu biri olarak, bu benim için bir anlaşma kırıcıydı.

Denenmiş ve test edilmiş bir şeye ihtiyacım vardı, bu yüzden muhtemelen birçok JavaScript kitaplığından birini kullanmam gerektiğini biliyordum. Kütüphanelere bakmaya başladım ve seçeneklerimi daralttım. Anime.js ve GSAP. Her ikisi de karmaşık animasyonları iyi idare ediyor gibiydi ve performansla ilgili mükemmel notları vardı. Anime, GitHub'da 42.000'den fazla yıldıza sahip bakımlı bir kitaplık iken GSAP, gelişen bir topluluğa sahip süper popüler, savaşta test edilmiş bir kitaplıktır.

Yardım istemek için bir yere ihtiyacım olduğundan ve daha sonra terk edilebilecek bir kütüphane kullanmak istemediğimden aktif bir topluluk benim için çok önemliydi. Bunu kolaylık gereksinimlerimin bir parçası olarak kabul ettim.

Animasyonları ve geri aramaları sıralama

Seçeneklerimi daralttıktan sonraki adım, iki kitaplığımı kullanarak karmaşık bir animasyon uygulamaktı. Bir solitaire oyununda yinelenen bir animasyon, bir yerde hareket eden ve sonra dönen bir kartın animasyonudur, o halde nasıl göründüğüne bakalım:

Her iki animasyon da harika görünüyor! Sorunsuzlar ve her ikisini de uygulamak oldukça basitti. Her iki kütüphanede de bir zaman çizelgesi işlevi bu, diziler oluşturmayı bir esinti haline getirdi. Uygulama AnimeJS'de şöyle görünür:

var timeline = anime.timeline({
  begin: function() {
    $(".status").text("Animating")
  },
  complete: function() {
    $(".status").text("Inactive")
  }
});

timeline.add({
  targets: '.card',
  left: [0, 300],
  easing: 'easeInOutSine',
  duration: 500
}).add({
  targets: '.card .back',
  rotateY: [0, 90],
  easing: 'easeInSine',
  duration: 200
}).add({
  targets: '.card .front',
  rotateY: [-90, 0],
  easing: 'easeOutSine',
  duration: 200
})

Animeler timeline() işlev animasyonun başında ve sonunda geri aramalarla yerleşik olarak gelir ve diziyi oluşturmak, sıralı animasyonları eklemek kadar kolaydır. Önce kartı hareket ettiriyorum, sonra arka resmimi 90 derece döndürüyorum, böylece görüş alanı dışına çıkıyor ve sonra ön resmimi 90 derece döndürüyorum, böylece görüntü ortaya çıkıyor.

GSAP'leri kullanan aynı uygulama timeline() işlev çok benziyor:

var timeline = gsap.timeline({
  onStart: function() {
    $(".status").text("Animating")
  },
  onComplete: function() {
    $(".status").text("Inactive")
  }
});

timeline.fromTo(".card", {
  left: 0
}, {
  duration: 0.5,
  left: 300
}).fromTo(".card .back", {
  rotationY: 0
}, {
  rotationY: 90,
  ease: "power1.easeIn",
  duration: 0.2
}).fromTo(".card .front", {
  rotationY: -90
}, {
  rotationY: 0,
  ease: "power1.easeOut",
  duration: 0.2
})

Karar zamanı

Anime ve GSAP arasındaki temel fark, GSAP'nin biraz daha ayrıntılı olabileceği sözdizimi gibi görünüyor. Çok benzer işlevselliğe sahip, karmaşık animasyonlarla başa çıkabilen ve gelişen bir topluluğa sahip iki harika kütüphaneye sıkışıp kaldım. Beraberlik yarışım varmış gibi görünüyordu!

öncelik	Anime	GSAP
Düzgün animasyonlar	✅	✅
Performans	✅	✅
Kolaylık	✅	✅
Tarayıcı desteği	✅	✅

Peki, bir kütüphaneyi diğerine tercih etmemi sağlayan şey neydi?

Kütüphanenin baskı altında nasıl davranacağı konusunda çok endişeliydim. Solitaire gibi bir oyunda gecikmeli animasyonlara sahip olmak, oyunu oynamanın ne kadar eğlenceli olduğunu büyük ölçüde etkileyebilir. Oyunu yaratmadan önce kütüphanenin nasıl performans gösterdiğini tam olarak göremeyeceğimi biliyordum. Neyse ki, GSAP bir stres testi Anime de dahil olmak üzere farklı animasyon kitaplıklarını birbiriyle karşılaştıran.

Buna bakıldığında, GSAP kesinlikle bir sürü karmaşık animasyonla başa çıkmak için üstün bir kitaplık gibi görünüyordu. GSAP, Anime'nin ancak 26'da zirveye çıkabildiği ağır bir animasyonda bana saniyede 19 kareden fazla veriyordu. GSAP'ın arkasında.

Hem GSAP hem de Anime bir süredir var olmasına rağmen, Anime'nin deposu birkaç yıldır biraz hareketsiz durumdayken, GSAP son birkaç ayda taahhütte bulundu.

Sonunda GSAP'yi kullandım ve kararımdan pişman olmadım!

Peki ya sen? Bunlardan herhangi biri, ön uç takımları nasıl değerlendirdiğiniz ve karşılaştırdığınızla örtüşüyor mu? Bunun gibi bir projede göz önünde bulundurmuş olabileceğiniz başka öncelikler (örn. erişilebilirlik vb.) var mı? Yoksa bir sürü farklı seçenek arasından seçimlerinizi kısmak zorunda kaldığınız bir projeniz mi var? Lütfen yorumları paylaşın çünkü bilmek istiyorum! 

Oh, ve bir destenin tamamını canlandırırken nasıl göründüğünü görmek istiyorsanız, siteme gidebilir ve Solitaire oyunu oyna. Eğlen!