Anime.js - Una biblioteca de animación ligera de JavaScript
Animación web ha recorrido un largo camino No solo los desarrolladores pueden hacer ninguna animación utilizando un combo de CSS / SVG / JS, sino que hay docenas de bibliotecas gratuitas para ahorrar tiempo en el proceso.
Uno de mis favoritos es Anime.js, Un código abierto totalmente gratuito. Biblioteca de animacion de JavaScript.
Esta biblioteca puede Hazlo todo. Sus construido en JavaScript pero tambien se basa en gran medida en las animaciones CSS. Puede orientar elementos de página individuales a través del DOM o incluso puedes apuntar SVG personalizados.
Toda la documentación es auto alojado en GitHub, por lo que es posible que deba 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 relajación.
Nota esta biblioteca no viene con muchos estilos de animación por defecto. Anime.js es hecho para desarrolladores Quien quiera personalizar sus animaciones. sin escribir código detallado.
Para ejemplo vivo, Echa un vistazo a la pluma de Codepen a continuación. El codigo es extremadamente simple pero obtienes una animación creíble con calabaza y estiramiento más anticipación, Ambos fundamentos de la animación..
Una advertencia justa: la biblioteca de anime.js es denso. No es tan difícil crear una animación personalizada, pero sí es necesario entender algunos conceptos básicos como la aceleración y la sintaxis de JavaScript común para las devoluciones de llamada y las opciones.
Pero Toda la información que necesitas esta en página de repo, incluso muchas muestras de código y tablas de documentación detallada. Y puede navegar a través de informes de errores abiertos 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 debe ser su solución de acceso para cualquier animación web compleja.
Para ver un montón de ejemplos vivos, Echa un vistazo a esta colección de demostraciones de Anime.js alojadas en CodePen. A continuación, incrusté mi favorito que anima todo el logo desde cero, con verdadera vivacidad.
