Anime.js es una biblioteca de JavaScript pequeña y liviana con una API simple y pequeña y poderosa. Funciona con el elemento DOM, CSS y objeto JavaScript.
Requisito previo:
- HTML , CSS , JavaScript
- Básico de Animación
Instalación de anime.js:
- Puede descargar el archivo anime.min.js y usarlo directamente.
- Simplemente busque en Google anime.js CDN y obtendrá el enlace y simplemente póngalo en su etiqueta de secuencia de comandos.
<script src=”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”></script>
Hablemos de un poco de animación básica. Entonces, hay muchas propiedades diferentes que debemos conocer cuando estamos tratando con eso.
- Objetivos: el objetivo incluye una referencia a la parte que queremos animar que puede ser una etiqueta HTML, una clase o un elemento de identificación y mucho más que veremos en otro artículo.
- Propiedades: estas son aquellas propiedades que se pueden animar cuando se trata de CSS, JS, SVG.
- Parámetros de propiedades: Esto incluye parámetros de propiedades como duración, retraso, retraso final, aceleración, ronda y muchos más.
- Parámetro de animación: esto incluye parámetros relacionados con la animación, como dirección, bucle, reproducción automática
Y hay otras cosas como fotogramas clave, línea de tiempo, etc.
Ahora veamos un ejemplo para mostrar lo fácil que es animar cosas usando Anime.js .
Ejemplo: Creamos un div con algo de alto, ancho y color de fondo que es CSS básico. La parte de JavaScript. Primero, tenemos que escribir todo en función de anime y pasar objetos de propiedades. La parte de destino es donde queremos animar (aquí es div) y translateX es (si sabe acerca de la animación, significa) 150 hacia el eje x desde la posición actual. La altura y el ancho son lo que queremos lograr a 150 hacia el eje x. La aceleración lineal significa traducirlo literalmente al tamaño aumentando y disminuyendo en este caso. la duraciónes el tiempo de animación (en ms).
html
<!DOCTYPE html>
<html>
<head>
<title>First animation of animejs</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js">
</script>
</head>
<body>
<div style="background: blue;
height: 40px;
width: 40px;">
</div>
<script>
let animation = anime({
targets: "div",
translateX: 150,
height: "80px",
width: "80px",
duration: 2000,
easing: "linear",
direction: "alternate",
loop: true,
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por iamsahil1910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA