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