Cómo elegí una biblioteca de animación para mi juego de solitario

Existe una gran cantidad de bibliotecas CSS y JavaScript para bibliotecas de animación. Tantos, de hecho, que elegir el adecuado para tu proyecto puede parecer imposible. Esa es la situación que enfrenté cuando decidí construir un juego de solitario en línea. Sabía que necesitaría una biblioteca de animación, pero ¿cuál era la correcta para elegir?

En este artículo, repasaré las consideraciones que hice, lo que debe tener en cuenta y le presentaré algunas de las bibliotecas más populares disponibles. Veré algunos ejemplos del mundo real contigo para ilustrar mis puntos y, al final, con suerte, estarás mejor equipado que yo cuando tuve que elegir una biblioteca de animación por primera vez.

Su kilometraje con este consejo puede variar, por supuesto. Todo lo que comparto aquí es específico de algo que quería construir. Su proyecto puede tener requisitos y prioridades completamente diferentes y eso está bien. Creo que lo importante aquí es obtener un relato de primera mano de pensar como un desarrollador front-end con un objetivo particular.

Hablando de eso, me considero un desarrollador front-end pero mi experiencia es muy pesada en diseño. Así que conozco el código, pero no tanto como alguien que es ingeniero de JavaScript. Solo quería aclarar eso porque la experiencia ciertamente puede afectar la decisión final.

aquí está el objetivo

Antes de tomar una decisión, echemos un vistazo a los tipos de animaciones que necesitaba hacer en esta versión del juego con CSS-Tricks:

Bastante dulce, ¿verdad? No hay nada exactamente trivial en estas animaciones. Están sucediendo muchas cosas, a veces simultáneamente, y mucho que orquestar. Además, la mayoría de las animaciones se desencadenan por las interacciones del usuario. Entonces, eso me dejó con algunas prioridades de cara a mi decisión:

• Animaciones suaves: La forma en que se aplican las animaciones puede tener un gran impacto en si se ejecutan sin problemas o se muestran un poco entrecortadas.
• Actuación: Adoptar cualquier biblioteca agregará peso a un proyecto y quería que mi juego fuera lo más simple posible.
• Conveniencia: Quería una sintaxis agradable y limpia que facilitara la escritura y la gestión de las animaciones. Incluso cambiaría un poco de conveniencia adicional por un pequeño costo de rendimiento si me permite escribir un código mejor y más fácil de mantener. Una vez más, esto es un buen augurio para un diseñador convertido en desarrollador.
• Soporte del navegador: Por supuesto, quería que mi juego funcionara en cualquier navegador moderno utilizando alguna forma de mejora progresiva para evitar que los navegadores heredados funcionaran por completo. Además, definitivamente quería algo a prueba de futuro.

Eso es lo que llevé conmigo mientras buscaba la herramienta adecuada para este trabajo en particular.

Elegir entre CSS o JavaScript bibliotecas de animación

Lo primero que consideré al elegir una biblioteca de animación fue elegir una biblioteca basada en CSS o JavaScript. Hay un montón de grandes bibliotecas CSS, muchos de ellos con un desempeño excelente que era una alta prioridad para mí. Estaba buscando hacer algunas animaciones de trabajo pesado, como la capacidad de secuenciar animaciones y obtener devoluciones de llamada al finalizar la animación. Todo eso es totalmente posible con CSS puro; aún así, es mucho menos fluido que lo que ofrecen la mayoría de las bibliotecas de JavaScript.

Veamos cómo se ve una animación secuenciada simple en CSS y comparémosla con jQuery, que tiene muchos ayudantes de animación integrados:

Las animaciones se ven iguales pero se crean de manera diferente. Para hacer la animación CSS, primero, tenemos que definir la animación de fotogramas clave en nuestro CSS y adjuntarla a una clase:

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

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

Luego ejecutamos la animación usando JavaScript y escuchamos una devolución de llamada de CSS en el elemento:

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

Que las cosas sucedan en diferentes lugares podría estar bien en un ejemplo simple como este, pero puede volverse muy confuso una vez que las cosas se vuelven un poco más complejas. 

Compare esto con cómo se realiza la animación con jQuery:

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

Aquí, todo sucede en el mismo lugar, simplificando las cosas en caso de que las animaciones se vuelvan más complejas en el futuro.

Parecía claro que una biblioteca de JavaScript era el camino correcto a seguir, pero ¿cuál era la correcta para elegir para mi juego de solitario? Quiero decir, jQuery es genial y Todavía se usa ampliamente incluso hoy, pero eso no es algo en lo que quiera colgar mi sombrero. Hay muchas bibliotecas de animación de JavaScript, así que quería considerar algo construido específicamente para manejar el tipo de animaciones pesadas que tenía en mente.

Elegir una biblioteca de animación de JavaScript

Rápidamente me di cuenta de que no faltan bibliotecas de animación de JavaScript y tecnologías nuevas y emocionantes. Todos tienen ventajas y desventajas, así que repasemos algunos de los que consideré y por qué.

El API de animaciones web es uno de esos casos que podría reemplazar muchas bibliotecas de animación de JavaScript en el futuro. Con él, podrás crear animaciones escalonadas complejas sin cargar bibliotecas externas y con el mismo rendimiento que las animaciones CSS. El único inconveniente es que no todos los navegadores lo admiten todavía. 

El <canvas> El elemento presenta otra oportunidad emocionante. En él, podemos animar cosas con JavaScript, como lo haríamos con el DOM, pero la animación se representa como trama, lo que significa que podemos hacer algunas animaciones de alto rendimiento. El único inconveniente es que el elemento del lienzo se representa esencialmente como una imagen en el DOM, por lo que si buscamos la perfección de píxeles, es posible que no tengamos suerte. Como alguien muy en sintonía con el diseño, esto fue un factor decisivo para mí.

Necesitaba algo probado y probado, así que sabía que probablemente tenía que ir con una de las muchas bibliotecas de JavaScript. Empecé a mirar bibliotecas y reduje mis opciones a anime.js y GSAP. Ambos parecían manejar bien las animaciones complejas y tenían excelentes notas sobre el rendimiento. Anime es una biblioteca bien mantenida con más de 42.000 XNUMX estrellas en GitHub, mientras que GSAP es una biblioteca súper popular y probada en batalla con una comunidad próspera.

Una comunidad activa era fundamental para mí, ya que necesitaba un lugar para pedir ayuda y no quería usar una biblioteca que luego podría ser abandonada. Consideré esto como parte de mis requisitos de conveniencia.

Secuenciación de animaciones y devoluciones de llamada

Una vez que reduje mis opciones, el siguiente paso fue implementar una animación compleja usando mis dos bibliotecas. Una animación recurrente en un juego de solitario es la de una carta que se mueve a algún lugar y luego se da la vuelta, así que veamos cómo se ve:

¡Ambas animaciones se ven geniales! Son suaves, y la implementación de ambos fue bastante sencilla. Ambas bibliotecas tenían un función de línea de tiempo eso hizo que la creación de secuencias fuera muy fácil. Así es como se ve la implementación en 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
})

animes timeline() función viene incorporado con devoluciones de llamada al comienzo y al final de la animación, y crear la secuencia es tan fácil como agregar las animaciones secuenciales. Primero, muevo la tarjeta, luego giro la imagen trasera 90 grados, para que desaparezca de la vista, y luego giro la imagen frontal 90 grados, para que quede visible.

La misma implementación usando GSAP's timeline() función se ve muy similar:

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

Tiempo de decisión

La principal diferencia entre Anime y GSAP parece ser la sintaxis, donde GSAP podría ser un poco más elaborado. Estaba atrapado con dos grandes bibliotecas que tenían una funcionalidad muy similar, podían manejar animaciones complejas y tenían una comunidad próspera. ¡Parecía que tenía una carrera empatada!

Prioridad	Anime	GSAP
Animaciones suaves	✅	✅
Rendimiento	✅	✅
Conveniencia	✅	✅
Soporte del navegador	✅	✅

Entonces, ¿qué me hizo elegir una biblioteca sobre la otra?

Estaba muy preocupado por cómo actuaría la biblioteca bajo presión. Tener animaciones lentas en un juego como Solitaire puede afectar en gran medida lo divertido que es jugar. Sabía que no podría ver completamente el rendimiento de la biblioteca antes de crear el juego. Afortunadamente, GSAP había hecho una prueba de estrés que comparó diferentes bibliotecas de animación entre sí, incluido Anime.

Mirando eso, GSAP ciertamente parecía ser la biblioteca superior para manejar un montón de animaciones complejas. GSAP me estaba dando más de 26 fotogramas por segundo en una animación pesada que Anime solo pudo superar en 19. Después de leer más sobre GSAP y mirar en sus foros, quedó claro que el rendimiento era de la máxima prioridad para los muchachos. detrás de GSAP.

Y aunque tanto GSAP como Anime han existido por un tiempo, el repositorio de Anime ha estado un poco inactivo durante un par de años, mientras que GSAP había realizado compromisos en los últimos meses.

¡Terminé usando GSAP y no me he arrepentido de mi decisión!

¿Y usted? ¿Algo de esto cuadra con la forma en que evalúa y compara las herramientas de front-end? ¿Hay otras prioridades que podría haber considerado (por ejemplo, accesibilidad, etc.) en un proyecto como este? ¿O tiene un proyecto en el que tuvo que reducir sus opciones entre un montón de opciones diferentes? Por favor, comparte en los comentarios porque me gustaría saber! 

Ah, y si quieres ver cómo se ve al animar una baraja completa de cartas, puedes visitar mi sitio y jugar un juego de solitario. Diviértete!