Có rất nhiều thư viện CSS và JavaScript cho các thư viện hoạt hình ngoài kia. Trên thực tế, rất nhiều người cho rằng việc lựa chọn một cái phù hợp cho dự án của bạn dường như là điều không thể. Đó là tình huống tôi phải đối mặt khi quyết định xây dựng trò chơi Solitaire trực tuyến. Tôi biết tôi cần một thư viện hoạt hình, nhưng đâu là thư viện phù hợp để chọn?
Trong bài viết này, tôi sẽ xem xét những cân nhắc mà tôi đã thực hiện, những điều cần chú ý và giới thiệu cho bạn một số thư viện phổ biến nhất hiện có. Tôi sẽ cùng bạn xem qua một số ví dụ trong thế giới thực để minh họa quan điểm của tôi, và cuối cùng, hy vọng rằng bạn sẽ được trang bị tốt hơn tôi khi lần đầu tiên tôi phải chọn một thư viện hoạt hình.
Tất nhiên, quãng đường của bạn với lời khuyên này có thể thay đổi. Mọi thứ tôi đang chia sẻ ở đây là cụ thể cho một thứ tôi muốn xây dựng. Dự án của bạn có thể có các yêu cầu và ưu tiên hoàn toàn khác nhau và điều đó không sao cả. Tôi nghĩ điều quan trọng ở đây là có được một tài khoản trực tiếp về suy nghĩ như một nhà phát triển front-end với một mục tiêu cụ thể.
Nói về điều này, tôi tự coi mình là một nhà phát triển front-end nhưng nền tảng của tôi rất nặng về thiết kế. Vì vậy, tôi biết mã, nhưng không ở mức độ của một người là kỹ sư JavaScript. Tôi chỉ muốn làm rõ điều đó bởi vì kinh nghiệm chắc chắn có thể ảnh hưởng đến quyết định cuối cùng.
Đây là mục tiêu
Trước khi chúng ta đi vào bất kỳ quyết định nào, hãy xem qua các loại hoạt ảnh mà tôi cần tạo trong phiên bản CSS-Tricks-ified này của trò chơi:
@media (chiều rộng tối đa: 800px) {
#solitaire_embed> div {
padding-bottom: 90%! important; / * Thay đổi tỷ lệ khung hình trên thiết bị di động * /
}
}
@media (chiều rộng tối đa: 568px) {
#solitaire_embed> div {
padding-bottom: 100%! important; / * Thay đổi tỷ lệ khung hình trên thiết bị di động * /
}
}
@media (chiều rộng tối đa: 414px) {
#solitaire_embed> div {
padding-bottom: 120%! important; / * Thay đổi tỷ lệ khung hình trên thiết bị di động * /
}
}
Khá ngọt ngào, phải không? Không có gì là tầm thường về những hình ảnh động này. Có rất nhiều điều đang diễn ra - đôi khi đồng thời - và rất nhiều thứ cần phải sắp xếp. Thêm vào đó, phần lớn các hoạt ảnh được kích hoạt bởi các tương tác của người dùng. Vì vậy, điều đó khiến tôi có một số ưu tiên trong quyết định của mình:
- Hình ảnh động mượt mà: Cách các hoạt ảnh được áp dụng có thể có tác động lớn đến việc chúng chạy trơn tru hay hiển thị một chút lỗi.
- Hiệu suất: Việc sử dụng bất kỳ thư viện nào sẽ tăng thêm sức nặng cho một dự án và tôi muốn trò chơi của mình gọn gàng nhất có thể.
- Thuận tiện: Tôi muốn có một cú pháp đẹp, rõ ràng giúp viết và quản lý các hoạt ảnh dễ dàng hơn. Tôi thậm chí sẽ đánh đổi một chút tiện lợi với chi phí hiệu suất nhỏ nếu nó cho phép tôi viết mã tốt hơn, dễ bảo trì hơn. Một lần nữa, điều này báo hiệu tốt cho một nhà phát triển do nhà thiết kế chuyển sang làm.
- Hỗ trợ trình duyệt: Tất nhiên, tôi muốn trò chơi của mình hoạt động trên bất kỳ trình duyệt hiện đại nào bằng cách sử dụng một số hình thức cải tiến liên tục để ngăn chặn hoàn toàn các trình duyệt cũ ra đời. Thêm vào đó, tôi chắc chắn muốn một số kiểm chứng trong tương lai.
Đó là những gì tôi mang theo khi tìm kiếm công cụ phù hợp cho công việc cụ thể này.
Lựa chọn giữa CSS hoặc JavaScript thư viện hoạt hình
Điều đầu tiên tôi cân nhắc khi chọn thư viện hoạt ảnh là liệu nên sử dụng thư viện dựa trên CSS hay JavaScript. Có rất nhiều thư viện CSS tuyệt vời, nhiều người trong số họ có màn trình diễn xuất sắc, đó là ưu tiên hàng đầu đối với tôi. Tôi đang tìm cách thực hiện một số hoạt ảnh hạng nặng, như khả năng sắp xếp chuỗi hoạt ảnh và nhận lệnh gọi lại khi hoàn thành hoạt ảnh. Điều đó hoàn toàn có thể xảy ra với CSS thuần túy - tuy nhiên, nó kém mượt mà hơn rất nhiều so với những gì mà hầu hết các thư viện JavaScript cung cấp.
Hãy xem hoạt ảnh theo trình tự đơn giản trông như thế nào trong CSS và so sánh nó với jQuery, có rất nhiều trình trợ giúp hoạt ảnh được tích hợp sẵn:
Các hình ảnh động trông giống nhau nhưng được tạo ra khác nhau. Để tạo hoạt ảnh CSS, trước tiên, chúng ta phải xác định hoạt ảnh khung hình chính trong CSS của chúng tôi và đính kèm nó vào một lớp:
.card.move {
animation : move 2s;
}
@keyframes move {
0% { left: 0 }
50% { left: 100px }
100% { left: 0 }
}Sau đó, chúng tôi thực thi hoạt ảnh bằng JavaScript và lắng nghe lệnh gọi lại CSS trên phần tử:
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);Trong một ví dụ đơn giản như thế này, mọi thứ xảy ra ở những nơi khác nhau có thể tốt, nhưng nó có thể trở nên rất khó hiểu khi mọi thứ trở nên phức tạp hơn một chút.
So sánh điều này với cách hoạt ảnh được thực hiện với jQuery:
$(".status").text("Animating")
$( ".card" ).animate({
left: "100px"
}, 1000);
$( ".card" ).animate({
left: 0
}, 1000, function() {
$(".status").text("Inactive")
});Ở đây, mọi thứ diễn ra ở cùng một nơi, đơn giản hóa mọi thứ nếu các hoạt ảnh trở nên phức tạp hơn trong tương lai.
Rõ ràng rằng thư viện JavaScript là cách thích hợp để đi, nhưng đâu mới là cách phù hợp để chọn cho trò chơi Solitaire của tôi? Ý tôi là, jQuery rất tuyệt và vẫn được sử dụng rộng rãi ngay cả ngày nay, nhưng đó không phải là điều tôi muốn đội nón ra đi. Có rất nhiều thư viện hoạt ảnh JavaScript, vì vậy tôi muốn xem xét một cái gì đó được xây dựng đặc biệt để xử lý loại hoạt ảnh nặng mà tôi đã nghĩ đến.
Chọn một thư viện hoạt ảnh JavaScript
Tôi nhanh chóng nhận ra rằng không thiếu thư viện hoạt ảnh JavaScript và công nghệ mới, thú vị. Tất cả chúng đều có những lợi ích và nhược điểm, vì vậy chúng ta hãy xem xét một số trong số chúng tôi đã xem xét và lý do tại sao.
Sản phẩm API hoạt ảnh trên web là một trong những trường hợp như vậy có thể thay thế nhiều thư viện hoạt ảnh JavaScript trong tương lai. Với nó, bạn sẽ có thể tạo các hoạt ảnh so le phức tạp mà không cần tải bất kỳ thư viện bên ngoài nào và với hiệu suất tương tự như hoạt ảnh CSS. Hạn chế duy nhất là không phải tất cả các trình duyệt đều hỗ trợ nó.
Sản phẩm <canvas> yếu tố trình bày một cơ hội thú vị khác. Trong đó, chúng ta có thể tạo hoạt ảnh bằng JavaScript, như chúng ta làm với DOM, nhưng hoạt ảnh được hiển thị dưới dạng raster, có nghĩa là chúng ta có thể tạo một số hoạt ảnh hiệu suất cao. Hạn chế duy nhất là phần tử canvas về cơ bản được hiển thị dưới dạng hình ảnh trong DOM, vì vậy nếu chúng ta đang tìm kiếm sự hoàn hảo về pixel, chúng ta có thể gặp may. Là một người nhạy bén với thiết kế, đây là một cơ hội đối với tôi.
Tôi cần một thứ gì đó đã được thử và kiểm tra, vì vậy tôi biết có lẽ tôi phải sử dụng một trong nhiều thư viện JavaScript. Tôi bắt đầu xem xét các thư viện và thu hẹp các lựa chọn của mình để Anime.js và GSAP. Cả hai dường như đều xử lý tốt các hình ảnh động phức tạp và có những ghi chú tuyệt vời về hiệu suất. Anime là một thư viện được duy trì tốt với hơn 42.000 ngôi sao trên GitHub, trong khi GSAP là một thư viện đã được thử nghiệm chiến đấu siêu nổi tiếng với một cộng đồng lớn mạnh.
Một cộng đồng đang hoạt động rất quan trọng đối với tôi vì tôi cần một nơi để yêu cầu giúp đỡ và tôi không muốn sử dụng một thư viện mà sau này có thể bị bỏ hoang. Tôi coi đây là một phần của yêu cầu thuận tiện của tôi.
Sắp xếp theo thứ tự các hoạt ảnh và lệnh gọi lại
Khi tôi đã thu hẹp các lựa chọn của mình, bước tiếp theo là thực hiện một hoạt ảnh phức tạp bằng cách sử dụng hai thư viện của tôi. Hoạt ảnh lặp lại trong trò chơi solitaire là một lá bài di chuyển đến một nơi nào đó và sau đó lật lại, vì vậy hãy xem nó trông như thế nào:
Cả hai hình ảnh động trông tuyệt vời! Chúng diễn ra suôn sẻ và việc triển khai cả hai đều khá đơn giản. Cả hai thư viện đều có chức năng dòng thời gian điều đó làm cho việc tạo trình tự trở nên dễ dàng. Đây là cách triển khai trong 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 của timeline() chức năng được tích hợp sẵn với các lệnh gọi lại khi bắt đầu và kết thúc hoạt ảnh và việc tạo trình tự cũng dễ dàng như nối các hoạt ảnh tuần tự. Đầu tiên, tôi di chuyển thẻ, sau đó tôi xoay hình ảnh phía sau của mình 90 độ để nó ra khỏi tầm nhìn và sau đó tôi quay hình ảnh phía trước của tôi 90 độ để nó xuất hiện trong tầm nhìn.
Việc triển khai tương tự bằng cách sử dụng GSAP's timeline() chức năng trông rất giống nhau:
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
})Thời điểm quyết định
Sự khác biệt chính giữa Anime và GSAP dường như là cú pháp, trong đó GSAP có thể phức tạp hơn một chút. Tôi bị mắc kẹt với hai thư viện tuyệt vời có chức năng rất giống nhau, có thể xử lý hoạt ảnh phức tạp và có một cộng đồng phát triển mạnh. Có vẻ như tôi đã có một cuộc đua hòa!
| Ưu tiên | Anime | GSAP |
| Hoạt hình mượt | ✅ | ✅ |
| HIỆU QUẢ | ✅ | ✅ |
| Tiện | ✅ | ✅ |
| Hỗ trợ trình duyệt | ✅ | ✅ |
Vậy, điều gì đã khiến tôi chọn thư viện này hơn thư viện kia?
Tôi rất lo lắng về việc thư viện sẽ hoạt động như thế nào dưới áp lực. Việc có các hoạt ảnh giật cục trong một trò chơi như Solitaire có thể ảnh hưởng rất nhiều đến mức độ thú vị khi chơi trò chơi. Tôi biết rằng tôi sẽ không thể xem đầy đủ thư viện hoạt động như thế nào trước khi tôi tạo trò chơi. May mắn thay, GSAP đã tạo ra một kiểm tra căng thẳng so sánh các thư viện hoạt hình khác nhau với nhau, bao gồm cả Anime.
Nhìn vào đó, GSAP chắc chắn được coi là thư viện vượt trội để xử lý vô số hình ảnh động phức tạp. GSAP đã mang lại cho tôi tốc độ lên tới 26 khung hình / giây trên một phim hoạt hình nặng mà Anime chỉ có thể đứng đầu ở mức 19. Sau khi đọc GSAP nhiều hơn và xem xét các diễn đàn của họ, rõ ràng là hiệu suất được ưu tiên cao nhất đối với các chàng trai. đằng sau GSAP.
Và mặc dù cả GSAP và Anime đều đã xuất hiện được một thời gian, repo của Anime đã không hoạt động trong vài năm trong khi GSAP đã thực hiện cam kết trong vài tháng qua.
Tôi đã kết thúc sử dụng GSAP và không hối hận về quyết định của mình!
Còn bạn thì sao? Có bất kỳ hình vuông nào trong số này với cách bạn đánh giá và so sánh công cụ front-end không? Có những ưu tiên nào khác mà bạn có thể đã xem xét (ví dụ: khả năng tiếp cận, v.v.) trong một dự án như thế này không? Hay bạn có một dự án mà bạn phải cân nhắc lựa chọn của mình từ một loạt các lựa chọn khác nhau? Hãy chia sẻ trong các ý kiến vì tôi muốn biết!
Ồ, và nếu bạn muốn xem nó trông như thế nào khi tạo hoạt ảnh cho toàn bộ bộ bài, bạn có thể truy cập trang web của tôi và chơi một trò chơi Solitaire. Chúc vui vẻ!
