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.
usamos una biblioteca para hacer nuestro trabajo simple y fácil. Una biblioteca es un documento de JavaScript que contiene muchas funciones, y esas funciones logran algunas tareas útiles para su página web.
Enlace CDN:
<script src=”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”></script>
Ejemplo: en CSS simple, si queremos animar cualquier objeto, debemos agregar la propiedad de animación a esa etiqueta o clase HTML, o id. Podemos lograr la animación usando CSS simple.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Below is the cdn for anime.js -->
<script
src=
"https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"
integrity=
"sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q=="
crossorigin="anonymous">
</script>
<style>
/* Adding basic CSS */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgb(29, 29, 29);
flex-wrap: wrap;
}
.container {
flex-direction: row;
display: flex;
align-content: center;
justify-content: center;
}
.circle {
width: 60px;
height: 60px;
background: crimson;
border-radius: 50%;
margin: 1rem;
clip-path: circle(100%);
animation: animation 1.5s forwards infinite;
}
@keyframes animation {
100% {
clip-path: circle(0);
}
}
</style>
</head>
<body>
<div class="container">
<div class="circle"></div>
</div>
</body>
</html>
</html>
Producción:
Para transponer las animaciones de fotogramas clave CSS de Clippath a la animación anime.js , seguiremos el siguiente enfoque .
Enfoque: Primero, eliminaremos los fotogramas clave y la animación del archivo CSS. Ahora escribiremos nuestro JavaScript.
En anime.js, tenemos que especificar cuál será el cuadro inicial y el cuadro final porque si agregamos solo un cuadro, permanecerá estacionario y la animación no tendrá lugar.
Nuestro marco de partida es
clip-path: circle(100%);
Nuestro cuadro final es
clip-path:circle(0);
Entonces, lograr la animación anterior usando anime.js es muy simple y requerirá solo unas pocas líneas de código.
JavaScript: lo siguiente demuestra la parte de JavaScript del código.
Javascript
anime({
targets: ".circle",
easing: "easeInOutExpo",
keyframes: [
{ clipPath: "circle(100%)" },
{ clipPath: "circle(0%)" },
],
direction: "alternate",
duration: 1500,
loop: true
});
Solución completa: seleccionamos nuestros objetivos, por lo que seleccionamos nuestra etiqueta div de círculo . En la segunda línea, declaramos nuestra moción. Lo moveremos con facilidadInOutExpo , hará que nuestra animación sea fluida. Luego, declaramos nuestros fotogramas clave , en los que la primera línea será el fotograma inicial y la segunda línea contendrá el fotograma final.
Declararemos la dirección en la que se animará como retroceso, avance o alterna . Luego le daremos el tiempo de duración para que se lleve a cabo la animación. Y la última línea incluye si queremos hacer la animación infinitas veces dando valor verdadero al bucle o solo una vez dando valor falso .
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"
integrity=
"sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q=="
crossorigin="anonymous">
</script>
<style>
/* Adding basic CSS */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgb(29, 29, 29);
flex-wrap: wrap;
}
.container {
flex-direction: row;
display: flex;
align-content: center;
justify-content: center;
}
.circle {
width: 60px;
height: 60px;
background: crimson;
border-radius: 50%;
margin: 1rem;
}
</style>
</head>
<body>
<div class="container">
<div class="circle"></div>
</div>
<script>
anime({
// Selecting our target
targets: ".circle",
// Adding easing attribute for smooth animation
easing: "easeInOutExpo",
keyframes: [ //Frame start and End
{ clipPath: "circle(100%)" },
{ clipPath: "circle(0%)" },
],
direction: "alternate",
duration: 1500,
loop: true,
});
</script>
</body>
</html>
Salida: de esta manera, podemos transponer animaciones de fotogramas clave CSS de Clippath en animaciones anime.js.
Publicación traducida automáticamente
Artículo escrito por mohammedhamza y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA