Cómo elegí una biblioteca de animación para mi proyecto | consejos CSS

Hay 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. Esta es la situación a la que me enfrenté cuando decidí crear un juego de solitario en línea. Sabía que necesitaría una biblioteca de animaciones, pero ¿cuál era la correcta para elegir?

En este artículo, repasaré las consideraciones que he hecho, qué buscar y le presentaré algunas de las bibliotecas más populares disponibles. Repasaré algunos ejemplos de la vida real con usted para ilustrar mi punto y, al final, espero que esté mejor equipado que cuando tuve que elegir una biblioteca de animación por primera vez.

Su kilometraje con estos consejos 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 tener una cuenta de primera mano de cómo pensar como un desarrollador front-end con un objetivo particular.

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

aquí está el objetivo

Antes de entrar en la toma de decisiones, echemos un vistazo a los tipos de animaciones que necesitaba crear en esta versión del juego con trucos CSS:

loco, ¿verdad? No hay nada realmente 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 antes de tomar 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.
  • Rendimiento: Adoptar cualquier biblioteca agregará peso a un proyecto y quería que mi juego fuera lo más ligero posible.
  • Conveniencia: Quería una sintaxis agradable y limpia que facilitara la escritura y administración de animaciones. Cambiaría incluso un poco más de conveniencia por un pequeño costo de rendimiento si me permitiera 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.
  • Compatibilidad con navegador: Por supuesto, quería que mi juego funcionara en cualquier navegador moderno utilizando algún tipo de mejora progresiva para evitar que los navegadores antiguos fueran completamente aburridos. Además, realmente quería sustentabilidad.

Esto es lo que me llevé 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 optar por una biblioteca basada en CSS o JavaScript. Existen muchas bibliotecas CSS de calidad, muchas de las cuales brindan un rendimiento excelente, lo cual era una prioridad para mí. Estaba buscando hacer una animación pesada, como poder secuenciar animaciones y recibir devoluciones de llamada cuando finaliza la animación. Todo esto es totalmente posible con CSS puro. Sin embargo, 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 debemos 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 realmente confuso una vez que las cosas se vuelven un poco más complejas.

Compare esto con cómo se hace 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 un solo lugar, lo que simplifica las cosas si las animaciones se vuelven más complejas en el futuro.

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

Elección de una biblioteca de animación de JavaScript

Rápidamente me di cuenta de que no había escasez de bibliotecas de animación JavaScript y nuevas tecnologías emocionantes. Todos tienen pros y contras, así que repasemos algunos de los que consideré y por qué.

La 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 de pasos complejos 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.

los <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 una trama, lo que significa que podemos crear 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 interesado en el diseño, esto fue un factor decisivo para mí.

Necesitaba algo probado, así que sabía que probablemente tenía que usar una de las muchas bibliotecas de JavaScript. Empecé a buscar en las bibliotecas y reduje mis opciones a Anime.js y GSAP. Ambos parecían manejar bien las animaciones complejas y tenían excelentes índices 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 comprobada con una comunidad próspera.

Una comunidad activa era esencial para mí porque necesitaba un lugar donde 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 una carta que se mueve a algún lugar y luego se da la vuelta, así que veamos cómo se ve:

Ambas animaciones son geniales! Son fluidos y su implementación fue bastante sencilla. Ambas bibliotecas tenían una función de línea de tiempo que facilitaba la creación de secuencias. 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
})

animado timeline() La función está integrada con devoluciones de llamada al principio y al final de la animación, y crear la secuencia es tan fácil como agregar las animaciones de la secuencia. Primero muevo el mapa, luego giro la imagen trasera 90 grados para que desaparezca, luego giro la imagen frontal 90 grados para que aparezca.

La misma implementación usando GSAP timeline() la función se parece mucho a:

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 Animado GSAP
animaciones suaves
Rendimiento
Conveniencia
Compatibilidad con navegador

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

Estaba muy preocupado por cómo actuaría la biblioteca bajo presión. Tener animaciones peculiares en un juego como Solitaire puede tener un gran impacto en el disfrute de jugar. Sabía que no sería capaz de ver completamente cómo funcionaba la biblioteca hasta que creé el juego. Afortunadamente, GSAP había realizado una prueba de esfuerzo que comparaba diferentes bibliotecas de animación entre sí, incluido Anime.

Mirando esto, GSAP ciertamente parecía ser la biblioteca superior para manejar muchas animaciones complejas. GSAP me estaba dando más de 26 fps en una animación locamente pesada que Anime solo pudo superar en 19. Después de leer más sobre GSAP y revisar sus foros, quedó claro que el rendimiento era de la más alta prioridad para los muchachos detrás de GSAP.

Y a pesar de que GSAP y Anime han existido por un tiempo, el repositorio de Anime ha estado algo inactivo durante algunos años, ya que GSAP ha estado realizando compromisos durante los últimos dos meses.

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

¿Y tu? ¿Algo de esto encaja 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? Siéntase libre de compartir en los comentarios porque me gustaría saber!

Ah, y si quieres ver cómo se ve cuando estás animando una baraja completa de cartas, puedes visitar mi sitio y jugar un juego de Solitario. ¡Disfrutar!

Si quieres conocer otros artículos parecidos a Cómo elegí una biblioteca de animación para mi proyecto | consejos CSS puedes visitar la categoría Estilo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas