Anime.js - Una biblioteca ligera de animación en JavaScript

La animación web ha recorrido un largo camino. Los desarrolladores no solo pueden hacer animaciones con un combo de CSS / SVG / JS, sino que también hay docenas de bibliotecas gratuitas para ahorrar tiempo en el proceso.

Uno de mis favoritos es Anime.js, una biblioteca de animación de JavaScript de código abierto completamente gratuita.

Esta biblioteca puede hacerlo todo . Se basa en JavaScript pero también depende en gran medida de las animaciones CSS . Puede orientar elementos de página individuales a través del DOM o incluso puede orientar SVG personalizados .

Toda la documentación está alojada en GitHub, por lo que puede necesitar desplazarse para encontrar exactamente lo que está buscando. Pero cada función de animación viene con algunos parámetros, como el retraso, la duración y la aceleración.

Tenga en cuenta que esta biblioteca no viene con muchos estilos de animación predeterminados. Anime.js está hecho para desarrolladores que desean personalizar sus animaciones sin escribir código detallado .

Para ver un ejemplo en vivo, consulte el bolígrafo Codepen a continuación. El código es extremadamente simple, pero se obtiene una animación creíble con squash y stretch plus anticipación, ambos fundamentos de la animación.

Una advertencia justa: la biblioteca de Anime.js es densa . No es tan difícil crear una animación personalizada, pero es necesario que comprenda algunos conceptos básicos como la simplificación y la sintaxis común de JavaScript para las devoluciones de llamada y las opciones.

Pero toda la información que necesita está en la página de repositorio, incluidas muchas muestras de código y tablas de documentación detalladas . Y puede navegar a través de abrir informes de errores o consultar el soporte del navegador que actualmente incluye todos los principales navegadores e IE 10+ .

Esta es fácilmente una de las mejores bibliotecas de animación para desarrolladores web y debería ser su solución de búsqueda para cualquier animación web compleja .

Para ver un montón de ejemplos en vivo, mira esta colección de demos de Anime.js alojadas en CodePen. A continuación, incrustó mi favorito que anima todo el logotipo desde cero, con verdadera vivacidad.

Una mirada a: comercialización de productos con código de respuesta rápida (QR)

El código QR, o código de respuesta rápida, es un tipo de código legible utilizado originalmente para rastrear piezas de automóviles. En su mayoría está limitado en Japón y Corea del Sur durante varios años, pero ahora está ganando atención en todo el mundo . Actualmente, el código QR se utiliza principalmente para anunciar el sitio / producto fuera de línea .Con los telé

(Consejos de tecnología y diseño)

MagBolt: El único cable para gobernarlos a todos

Tener dispositivos Apple y Android puede ser un problema cuando llega el momento de cargarlos. Como ambos dispositivos vienen con su propio conjunto de puertos de carga, puede ser una molestia separar los cables de Apple de los de Android.Sin embargo, una empresa tiene una idea que podría simplificar la experiencia de carga del dispositivo : MagBolt.

(Consejos de tecnología y diseño)