¿Cómo elegí una biblioteca de animación para mi proyecto? trucos CSS

Hay muchas bibliotecas CSS y JavaScript para bibliotecas de animación. De hecho, tanto que elegir el adecuado para tu proyecto puede parecer imposible. Esta es la situación que enfrenté cuando decidí crear solitario juego en lineaSabía que necesitaría una biblioteca de animación, pero ¿cuál era la adecuada para elegir?

En este artículo, revisaré las consideraciones que hice, qué buscar y le presentaré algunas de las bibliotecas más populares disponibles. Revisaré algunos ejemplos del mundo real con usted para ilustrar mis puntos y, finalmente, espero que esté mejor equipado que 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 es bueno. Creo que lo importante aquí es obtener una cuenta de primera mano de cómo piensa un desarrollador front-end con un propósito específico.

Hablando de eso, me considero un desarrollador de primera línea, 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 esto, porque la experiencia sin duda puede influir en la decisión final.

Aquí está el objetivo

Antes de entrar en la toma de decisiones, veamos los tipos de animaciones que tuve que hacer en esta versión del juego desarrollada con trucos CSS:

Loco, ¿no? No hay nada bastante trivial en estas animaciones. Hay muchas cosas que suceden, a veces al mismo tiempo, y mucho sobre la orquestación. Además, la mayoría de las animaciones se desencadenan por las interacciones del usuario. Así que esto me dejó con varias prioridades en 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 muestran un poco de fragmentación.
• Productividad: Aceptar cualquier biblioteca agregará peso al proyecto y quería que mi juego fuera lo más débil posible.
• Conveniencia: Quería una sintaxis agradable y limpia que hiciera más fácil escribir y administrar animaciones. Incluso reemplazaría un poco de conveniencia adicional con un pequeño costo de rendimiento si me permite escribir un código mejor y más compatible. Una vez más, esto es bueno para un diseñador que se ha convertido en desarrollador.
• Compatibilidad con navegador: Por supuesto, quería que mi juego se ejecutara en cualquier navegador moderno, utilizando algún tipo de mejora progresiva para evitar navegadores heredados completamente aburridos. Además, definitivamente quería algo de credibilidad para el futuro.

Llevé esto conmigo mientras buscaba la herramienta adecuada para este trabajo en particular.

Elige entre CSS o JavaScript bibliotecas de animación

Lo primero que consideré al elegir una biblioteca de animación fue si usar una biblioteca basada en CSS o JavaScript. Hay muchas bibliotecas de CSS geniales, muchas de ellas con un rendimiento excelente, lo cual era una gran prioridad para mí. Estaba buscando hacer algunas animaciones pesadas, como la capacidad de secuenciar animaciones y recibir llamadas cuando la animación está completa Todo esto es completamente posible con CSS puro: aún es mucho menos fluido que la mayoría de las bibliotecas de JavaScript que ofrecen.

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

Las animaciones se ven iguales, pero se crean de manera diferente. Para hacer la animación CSS, primero debemos definir la animación del fotograma clave en nuestro CSS y adjuntarlo 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 la devolución de llamada CSS del 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);

El hecho de que las cosas sucedan en diferentes lugares puede ser bueno en un ejemplo simple como este, pero puede volverse muy confuso a medida que las cosas se vuelven un poco más complicadas.

Compare esto con cómo se realiza la animación 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 si las animaciones se vuelven más complejas en el futuro.

Parecía claro que la biblioteca de JavaScript era el camino correcto, pero ¿cuál era el correcto para elegir para mi juego de Solitario? Quiero decir, jQuery también es genial todavía se usa ampliamente hoy en díapero esto no es algo por lo que quiera apostar. Hay muchas bibliotecas de animación de JavaScript, así que quería considerar algo creado específicamente para manejar el tipo de animación pesada que tenía en mente.

Seleccione una biblioteca de animación de JavaScript

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

EN API de animación 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 distribuidas complejas sin cargar bibliotecas externas y con el mismo rendimiento que las animaciones CSS. El único inconveniente es que no todo todavía los navegadores lo admiten.

EN <canvas> el elemento ofrece otra oportunidad emocionante. En él podemos animar cosas con JavaScript, como lo haríamos con DOM, pero la animación se muestra como un ráster, 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 en píxeles, es posible que no tengamos suerte. Como alguien que está en sintonía con el diseño, esto fue un obstáculo para mí. .

Necesitaba probar algo, así que sabía que probablemente debería usar una de las muchas bibliotecas de JavaScript. Empecé a buscar bibliotecas y reduje mis opciones a Anime.js y GSAPAmbos parecían hacerlo bien con las animaciones complejas y tenían excelentes notas de rendimiento. Anime es una biblioteca bien mantenida con más de 42 000 estrellas en GitHub, mientras que GSAP es una biblioteca súper popular y probada en batalla con una comunidad próspera.

La comunidad activa fue crucial para mí porque necesitaba un lugar para pedir ayuda y no quería usar una biblioteca que pudiera ser abandonada más tarde. Consideré esto como parte de mis requisitos de comodidad.

Secuencia de animaciones y callbacks

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

¡Ambas animaciones se ven geniales! Son suaves y la aplicación de ambos es bastante fácil. Ambas bibliotecas tenían función de línea de tiempo lo que facilitó la creación de secuencias. Así es como se ve una conversión de 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
})

Animado timeline() función viene con devoluciones de llamada integradas al principio y al final de la animación y crear la secuencia es tan fácil como agregar animaciones secuenciales. Primero, muevo el mapa, luego giro la imagen trasera 90 grados para que desaparezca y luego giro la imagen frontal 90 grados para que sea visible.

La misma implementación usando GSAP 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
})

Hora de tomar una decisión

La principal diferencia entre Anime y GSAP parece ser la sintaxis, donde GSAP puede ser un poco más complejo. Me quedé con dos grandes bibliotecas que tenían una funcionalidad muy similar, podían manejar animaciones complejas y tenía una comunidad próspera. como si tuviera una carrera por un empate!

Prioridad	animado	GSAP
animaciones suaves	✅	✅
productividad	✅	✅
Conveniencia	✅	✅
Compatibilidad con navegador	✅	✅

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

Estaba muy preocupado por cómo funcionaría la biblioteca bajo tensión. Tener animaciones retrasadas en un juego como Solitaire puede afectar significativamente la diversión que es jugar. Sabía que no podría ver completamente cómo funcionaba la biblioteca antes de crear el juego. Afortunadamente, GSAP hizo un prueba de estrés que comparan diferentes bibliotecas de animación entre sí, incluido el anime.

Mirando esto, GSAP definitivamente parecía una gran biblioteca para manejar muchas animaciones complejas. GSAP me dio más de 26 fotogramas por segundo de animación loca y pesada, que Anime solo logró alcanzar a los 19. Después de leer más sobre GSAP y mirar sus foros, quedó claro que el rendimiento era una prioridad principal para los muchachos detrás de GSAP.

Y aunque tanto GSAP como Anime existen desde hace algún tiempo, el repositorio de Anime ha estado algo inactivo durante varios años, mientras que GSAP se ha comprometido en los últimos meses.

terminé usando GSAP y no me arrepiento de mi decisión.

¿Y usted? ¿Hay algo sobre cómo evalúas y comparas las herramientas front-end? ¿Hay otras prioridades que haya considerado (p. ej., accesibilidad, etc.) en un proyecto como este? ¿O tiene un proyecto en el que tuvo que acortar su elección 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 cuando animas una baraja completa de cartas, puedes ir a mi sitio y jugar al solitario. ¡Que te diviertas!