Anime.js es una biblioteca de JavaScript pequeña y liviana con una API simple y pequeña y poderosa. Funciona con elemento DOM, CSS y objeto JavaScript. Animación con propiedades CSS podemos animar cualquier propiedad CSS. A continuación se describen algunos de los ejemplos con diferentes propiedades CSS:
Ejemplo 1: Primero tenemos que establecer un objetivo, el div o elemento puede ser clase o id, que queremos animar. El color de fondo de CSS es una de las propiedades de CSS que estamos cambiando aquí de azul a #F75 . El radio del borde de CSS es otra propiedad de CSS que estamos cambiando aquí. Usaremos Easing, EaseInOutQuad significa simplemente desvanecerse y mostrarse, después de eso usaremos el bucle, verdadero para seguir repitiendo la animación. Puede animar cualquier propiedad css aquí, mostramos backgroundColor y borderRadius.
html
<!DOCTYPE html>
<html>
<head>
<title>animejs</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js">
</script>
</head>
<body>
<center>
<h1 style="color: green;">GeeksforGeeks</h1>
<b>
Animation on background
color and border radius.
</b>
<br><br>
<div style="background: blue;
height: 80px;
width: 80px;">
</div>
</center>
<script>
let animation = anime({
targets: "div",
backgroundColor: "#F75",
borderRadius: "50px",
easing: "easeInOutQuad",
loop: true,
});
</script>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, animaremos con transformación CSS. Primero, tenemos que establecer un objetivo, el div o el elemento puede ser clase o id, que queremos animar. La función CSS translateX() se establecerá en 450 para mover 450 al eje x positivo). Usaremos la función de rotate() de CSS para rotar – 720 grados. El color de fondo de CSS es propiedad de CSS, pero no es parte de la traducción de CSS, pero podemos usarlo para cambiar el color. La propiedad de dirección CSS está configurada para alternar (mover hacia atrás y cuarto). Luego, la duración de CSS se establece en 2000 veces para la animación en ms). después de eso usaremos el loop – true para seguir repitiendo la animación.
html
<!DOCTYPE html>
<html>
<head>
<title>animejs</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js">
</script>
</head>
<body>
<center>
<h1 style="color: green;">GeeksforGeeks</h1>
<b>
Animation on background
color and border radius.
</b>
<br><br>
</center>
<div style="background: blue;
height: 80px;
width: 80px;">
</div>
<script>
let animation = anime({
targets: "div",
// Move 250 into positive x-axis
translateX: 450,
// Degree you want to rotate
rotate: "720",
backgroundColor: "#f75",
direction: "alternate",
duration: "2000",
loop: true,
});
</script>
</body>
</html>
Producción:
Ejemplo 3: se puede animar cualquier propiedad de objeto que contenga un valor numérico. Aquí solo cambiamos el valor de la propiedad del objeto y actualizamos el dom y la aceleración: linear se usa para animarlo linealmente y puede cambiar el valor redondo para ver para qué se usa.
html
<!DOCTYPE html>
<html>
<head>
<title>animejs</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js">
</script>
</head>
<body>
<div></div>
<script>
var div = document.querySelector("div");
var object = {
prop1: 10,
prop2: "0%",
};
let animation = anime({
targets: object,
prop1: 70,
prop2: "96%",
easing: "linear",
round: 1,
update: function () {
div.innerHTML = JSON.stringify(object);
},
});
</script>
</body>
</html>
Producción:
Ejemplo 4: Aquí, los valores contendrán de valor a valor (Atributo Dom). Como valor dentro del campo de entrada (numérico)
html
<!DOCTYPE html>
<html>
<head>
<title>animejs</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js">
</script>
</head>
<body>
<input style="text-align: center;" type="text" />
<script>
let animation = anime({
targets: "input",
value: [0, 100],
round: 1,
easing: "easeInOutExpo",
});
</script>
</body>
</html>
Producción:
Ejemplo 5: En este ejemplo animaremos el atributo SVG. Creamos un círculo de radio 50 con centro en la posición 150, 150, luego aplicamos anime en el círculo, movimos el centro a 200, 200 e hicimos un radio de 60.
html
<!DOCTYPE html>
<html>
<head>
<title>animejs</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js">
</script>
</head>
<body>
<center>
<h1 style="color: green;">GeeksforGeeks</h1>
<b>
SVG Attribute
</b>
<br><br>
<svg height="400" width="400">
<circle cx="50" cy="50" r="40"
stroke="black" stroke-width="2"
fill="green"/>
</svg>
</center>
<script>
let animation = anime({
targets: ["circle"],
cx: "300",
cy: "300",
r: "60",
baseFrequency: 0,
scale: 1,
loop: true,
direction: "alternate",
easing: "easeInOutExpo",
});
</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