Creación de animaciones con Anime.js

Anime.js es una biblioteca de animación de JavaScript liviana con una API simple pero poderosa.

Instalación

Puedes incluir Anime.js en tu proyecto usando npm:

npm install animejs

O puedes utilizar un CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

Animación básica

A continuación se muestra un ejemplo sencillo del uso de Anime.js para animar un elemento:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animación Anime.js</title>
</head>
<body>
    <div id="box" style="width:100px; height:100px; background-color:red;"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <script>
        anime({
            targets: '#box',
            translateX: 250,
            duration: 1000
        });
    </script>
</body>
</html>

Animación avanzada

Anime.js proporciona varias funciones para animaciones avanzadas, como fotogramas clave, línea de tiempo y suavizado.

  • Fotogramas clave: Los fotogramas clave permiten definir varias etapas de una animación. A continuación, se muestra un ejemplo:
anime({
    targets: '#box',
    keyframes: [
        {translateX: 100},
        {translateY: 100},
        {translateX: 0},
        {translateY: 0}
    ],
    duration: 4000
});
  • Línea de tiempo: Las líneas de tiempo permiten secuenciar animaciones. A continuación, se muestra un ejemplo:
var tl = anime.timeline({
    easing: 'easeOutExpo',
    duration: 750
});

tl.add({
    targets: '#box',
    translateX: 250
}).add({
    targets: '#box',
    translateY: 250
}, '-=500'); // Comienza 500 ms antes de que finalice la animación anterior.
  • Suavizado: Anime.js ofrece una variedad de opciones de suavizado para que las animaciones se vean más naturales. A continuación, se muestra un ejemplo:
anime({
    targets: '#box',
    translateX: 250,
    duration: 1000,
    easing: 'easeInOutQuad'
});

Para obtener más detalles y ejemplos, consulte la documentación de Anime.js.

results matching ""

    No results matching ""