Bagaimana Saya Memilih Perpustakaan Animasi untuk Game Solitaire Saya

Ada banyak pustaka CSS dan JavaScript untuk pustaka animasi di luar sana. Begitu banyak, pada kenyataannya, memilih yang tepat untuk proyek Anda bisa tampak mustahil. Itulah situasi yang saya hadapi ketika saya memutuskan untuk membangun sebuah permainan Solitaire online. Saya tahu saya membutuhkan perpustakaan animasi, tetapi mana yang tepat untuk dipilih?

Dalam artikel ini, saya akan membahas pertimbangan apa yang saya buat, apa yang harus diwaspadai dan memberi Anda beberapa perpustakaan paling populer yang tersedia. Saya akan membahas beberapa contoh dunia nyata dengan Anda untuk mengilustrasikan poin saya, dan pada akhirnya, semoga, Anda akan lebih siap daripada saya ketika saya pertama kali harus memilih perpustakaan animasi.

Jarak tempuh Anda dengan saran ini dapat bervariasi, tentu saja. Semua yang saya bagikan di sini khusus untuk hal yang ingin saya bangun. Proyek Anda mungkin memiliki persyaratan dan prioritas yang sama sekali berbeda dan tidak apa-apa. Saya pikir yang penting di sini adalah mendapatkan akun langsung dari berpikir seperti pengembang front-end dengan tujuan tertentu.

Omong-omong, saya menganggap diri saya sebagai pengembang front-end tetapi latar belakang saya sangat berat dalam desain. Jadi saya tahu kode, tetapi tidak sejauh seseorang yang merupakan insinyur JavaScript. Hanya ingin menjelaskannya karena pengalaman pasti dapat memengaruhi keputusan akhir.

Inilah tujuannya

Sebelum kita masuk ke dalam pengambilan keputusan, mari kita lihat jenis animasi yang perlu saya buat dalam versi permainan yang di-CSS-Tricks ini:

Cukup manis, bukan? Tidak ada yang sepele tentang animasi ini. Ada banyak hal yang terjadi — terkadang secara bersamaan — dan banyak hal yang harus diatur. Plus, sebagian besar animasi dipicu oleh interaksi pengguna. Jadi, itu membuat saya memiliki beberapa prioritas menuju keputusan saya:

• Animasi halus: Cara animasi diterapkan dapat berdampak besar pada apakah animasi itu berjalan dengan lancar, atau menampilkan sedikit gangguan.
• Kinerja: Mengadopsi perpustakaan apa pun akan menambah bobot proyek dan saya ingin permainan saya se-ramping mungkin.
• Kenyamanan: Saya menginginkan sintaks yang bagus dan bersih yang membuatnya lebih mudah untuk menulis dan mengelola animasi. Saya bahkan akan menukar sedikit kenyamanan ekstra dengan biaya kinerja yang kecil jika memungkinkan saya untuk menulis kode yang lebih baik dan lebih mudah dipelihara. Sekali lagi, ini menjadi pertanda baik bagi seorang desainer yang menjadi pengembang.
• Dukungan peramban: Tentu saja saya ingin game saya berfungsi di browser modern apa pun menggunakan beberapa bentuk peningkatan progresif untuk mencegah browser lama yang benar-benar rusak. Plus, saya pasti menginginkan pemeriksaan di masa depan.

Itulah yang saya bawa saat saya mencari alat yang tepat untuk pekerjaan khusus ini.

Memilih antara CSS atau JavaScript perpustakaan animasi

Hal pertama yang saya pertimbangkan ketika memilih perpustakaan animasi adalah apakah akan menggunakan perpustakaan berbasis CSS atau JavaScript. Ada banyak perpustakaan CSS yang bagus, banyak dari mereka dengan kinerja luar biasa yang merupakan prioritas tinggi bagi saya. Saya ingin melakukan beberapa animasi tugas berat, seperti kemampuan untuk mengurutkan animasi dan mendapatkan panggilan balik pada penyelesaian animasi. Itu semua sangat mungkin dengan CSS murni — tetap saja, ini jauh lebih mulus daripada yang ditawarkan kebanyakan perpustakaan JavaScript.

Mari kita lihat bagaimana animasi sekuens sederhana terlihat di CSS dan membandingkannya dengan jQuery, yang memiliki banyak pembantu animasi bawaan:

Animasi terlihat sama tetapi dibuat berbeda. Untuk membuat animasi CSS, pertama, kita harus mendefinisikan animasi keyframe di CSS kita dan melampirkannya ke kelas:

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

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

Kami kemudian menjalankan animasi menggunakan JavaScript dan mendengarkan panggilan balik CSS pada elemen:

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);

Mengalami hal-hal yang terjadi di tempat yang berbeda mungkin baik-baik saja dalam contoh sederhana seperti ini, tetapi bisa menjadi sangat membingungkan setelah semuanya menjadi sedikit lebih kompleks. 

Bandingkan ini dengan bagaimana animasi dilakukan dengan jQuery:

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

Di sini, semuanya terjadi di tempat yang sama, menyederhanakan hal-hal jika animasi tumbuh lebih kompleks di masa depan.

Tampaknya jelas bahwa perpustakaan JavaScript adalah cara yang tepat, tetapi mana yang tepat untuk dipilih untuk permainan Solitaire saya? Maksudku, jQuery hebat dan masih banyak digunakan bahkan sampai sekarang, tapi itu bukan sesuatu yang ingin saya gantung. Ada banyak perpustakaan animasi JavaScript, jadi saya ingin mempertimbangkan sesuatu yang dibuat khusus untuk menangani jenis animasi berat yang ada dalam pikiran saya.

Memilih perpustakaan animasi JavaScript

Dengan cepat menjadi jelas bagi saya bahwa tidak ada kekurangan perpustakaan animasi JavaScript dan teknologi baru yang menarik. Mereka semua memiliki kelebihan dan kekurangan, jadi mari kita bahas beberapa yang saya pertimbangkan dan mengapa.

Grafik API Animasi Web adalah salah satu kasus yang mungkin menggantikan banyak perpustakaan animasi JavaScript di masa mendatang. Dengan itu, Anda akan dapat membuat animasi terhuyung-huyung yang kompleks tanpa memuat pustaka eksternal apa pun dan dengan kinerja yang sama seperti animasi CSS. Satu-satunya kelemahan adalah itu belum semua browser mendukungnya. 

Grafik <canvas> elemen menyajikan kesempatan menarik lainnya. Di dalamnya, kita dapat menganimasikan berbagai hal dengan JavaScript, seperti yang kita lakukan dengan DOM, tetapi animasi tersebut dirender sebagai raster, yang berarti kita dapat membuat beberapa animasi berkinerja tinggi. Satu-satunya kelemahan adalah elemen kanvas pada dasarnya dirender sebagai gambar di DOM, jadi jika kita mencari kesempurnaan piksel, kita mungkin kurang beruntung. Sebagai seseorang yang sangat selaras dengan desain, ini adalah dealbreaker bagi saya.

Saya membutuhkan sesuatu yang dicoba dan diuji, jadi saya tahu saya mungkin harus menggunakan salah satu dari banyak perpustakaan JavaScript. Saya mulai melihat perpustakaan dan mempersempit pilihan saya untuk Anime.js dan GSAP. Mereka berdua tampaknya menangani animasi yang kompleks dengan baik dan memiliki catatan kinerja yang sangat baik. Anime adalah perpustakaan yang terpelihara dengan baik dengan lebih dari 42.000 bintang di GitHub, sementara GSAP adalah perpustakaan yang sangat populer dan teruji pertempuran dengan komunitas yang berkembang.

Komunitas yang aktif sangat penting bagi saya karena saya membutuhkan tempat untuk meminta bantuan, dan saya tidak ingin menggunakan perpustakaan yang nantinya mungkin akan ditinggalkan. Saya menganggap ini sebagai bagian dari persyaratan kenyamanan saya.

Mengurutkan animasi dan panggilan balik

Setelah saya mempersempit pilihan saya, langkah selanjutnya adalah menerapkan animasi kompleks menggunakan dua perpustakaan saya. Animasi berulang dalam permainan solitaire adalah kartu yang bergerak di suatu tempat dan kemudian dibalik, jadi mari kita lihat tampilannya:

Kedua animasi tampak hebat! Mereka mulus, dan menerapkan keduanya cukup mudah. Kedua perpustakaan memiliki fungsi garis waktu yang membuat membuat urutan mudah. Ini adalah bagaimana implementasinya terlihat di AnimeJS:

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
})

anime timeline() fungsi dilengkapi dengan callback di awal dan akhir animasi, dan membuat urutan semudah menambahkan animasi berurutan. Pertama, saya memindahkan kartu, lalu saya memutar gambar belakang saya 90 derajat, sehingga tidak terlihat, dan kemudian saya mengubah gambar depan saya 90 derajat, sehingga terlihat.

Implementasi yang sama menggunakan GSAP timeline() fungsi terlihat sangat mirip:

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
})

Waktu keputusan

Perbedaan utama antara Anime dan GSAP tampaknya adalah sintaks, di mana GSAP mungkin sedikit lebih rumit. Saya terjebak dengan dua perpustakaan hebat yang memiliki fungsi yang sangat mirip, mampu menangani animasi yang kompleks, dan memiliki komunitas yang berkembang. Sepertinya saya memiliki perlombaan dasi!

Prioritas	anime	GSAP
Animasi halus	✅	✅
Performance	✅	✅
Praktis	✅	✅
Dukungan Browser	✅	✅

Jadi, apa yang membuat saya memilih satu perpustakaan daripada yang lain?

Saya sangat prihatin tentang bagaimana perpustakaan akan bertindak di bawah tekanan. Memiliki animasi yang lamban dalam game seperti Solitaire dapat sangat memengaruhi betapa menyenangkannya bermain game. Saya tahu saya tidak akan dapat sepenuhnya melihat bagaimana kinerja perpustakaan sebelum saya membuat game. Untungnya, GSAP telah membuat tes stres yang membandingkan perpustakaan animasi yang berbeda satu sama lain, termasuk Anime.

Melihat itu, GSAP jelas terlihat sebagai perpustakaan yang unggul untuk menangani banyak animasi yang kompleks. GSAP memberi saya lebih dari 26 frame per detik pada animasi berat yang Anime hanya mampu mencapai 19. Setelah membaca lebih lanjut tentang GSAP dan melihat ke forum mereka, menjadi jelas bahwa kinerja adalah prioritas tertinggi untuk orang-orang. di belakang GSAP.

Dan meskipun GSAP dan Anime telah ada cukup lama, repo Anime telah tidak aktif selama beberapa tahun sementara GSAP telah membuat komitmen dalam beberapa bulan terakhir.

Saya akhirnya menggunakan GSAP dan tidak menyesali keputusan saya!

Bagaimana dengan kamu? Apakah ada kotak ini dengan cara Anda mengevaluasi dan membandingkan perkakas front-end? Apakah ada prioritas lain yang mungkin Anda pertimbangkan (misalnya aksesibilitas, dll.) dalam proyek seperti ini? Atau apakah Anda memiliki proyek di mana Anda harus mengurangi pilihan Anda dari banyak pilihan yang berbeda? Silakan bagikan di komentar karena saya ingin tahu! 

Oh, dan jika Anda ingin melihat tampilannya saat menganimasikan setumpuk kartu, Anda dapat mengunjungi situs saya dan mainkan permainan Solitaire. Selamat bersenang-senang!