¿Cómo crear animaciones de línea de tiempo usando Anime.js?

Anime.js es una biblioteca de JavaScript liviana con una API simple y pequeña y poderosa. Funciona con el elemento DOM, CSS y objeto JavaScript.

requisitos previos:

  1. Conocimientos básicos de HTML
  2. Conocimientos básicos de CSS
  3. Conocimientos básicos de Javascript

Instalación de anime.js: hay dos formas de usar anime.js en su proyecto:

  • Puede descargar el archivo anime.min.js y usarlo directamente.
  • Simplemente busque en Google anime.js CDN y obtendrá el enlace y simplemente colóquelo en su etiqueta de secuencia de comandos como se muestra a continuación.

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

Propiedades básicas utilizadas en anime.js:

  • objetivos: los selectores Css para apuntar e identificar en qué animación se debe aplicar.
  • duración: Tiempo en milisegundos que debe durar la animación.
  • retraso: Tiempo en milisegundos después del cual comienza la animación.
  • translateX:  coloca el elemento en esa coordenada x.
  • translateY: coloca el elemento en la coordenada Y.
  • offset: Esto da retraso entre diferentes animaciones. es decir, para iniciar otra animación después de x segundos de la anterior.

Creación de una aplicación y estructura de proyecto: esta es una página web simple. Todo lo que tenemos que hacer es crear un proyecto y dentro de él crear un archivo HTML llamado index.html .

mkdir animation && cd animation
touch index.html 

Ejemplo 1:

índice.html

HTML

<!DOCTYPE html>
<html>
   <head>
      <title>A nice example for timeline</title>
      <script src=
"https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js">
      </script>
      <style>
         html{
         min-height: 200vh;
         }
         .ball {
         width: 60px;
         height: 60px;
         margin-top: 120px;
         margin-left:200px;
         border-radius: 50%;
         background-color: pink;
         float: left;
         }
      </style>
   </head>
   <body>
      <body>
         <div class="ball first"></div>
         <div class="ball second"></div>
         <div class="ball third"></div>
         <script>
            let animation = anime.timeline({
            duration: 500, 
            easing: 'easeInOutSine',
            direction: 'alternate',  
            autoplay:false,
            loop: true
            });           
              
            animation.add({
            targets: '.first',
            translateY: -50,
            backgroundColor: 'rgb(255, 0, 0)'
            }).add({
            targets: '.second',
            translateY: -50,
            backgroundColor: 'rgb(0, 255, 0)'
            }).add({
            targets: '.third',
            translateY: -50,
            backgroundColor: 'rgb(0, 0, 255)'
            });
            window.onscroll=()=>{
            animation.play();
            }
         </script>
   </body>
</html>

Salida: haga clic en index.html para abrirlo en el navegador:

Ejemplo 2: en este ejemplo, la propiedad translateX se vuelve más clara. Primero se traduce en -ve eje x y luego en +ve eje x.

índice.html

HTML

<!DOCTYPE html>
<html>
   <head>
      <title>A nice example for timeline</title>
      <script src=
"https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js">
      </script>
      <style>
         html{
         min-height:200vh;
         }
         .ball {
         width: 200px;
         height: 200px;
         margin-top: 120px;
         margin-left:200px;
         background-color: pink;
         float: left;
         }
      </style>
   </head>
   <body>
      <body>
         <div class="ball first"></div>
         <div class="ball second"></div>
         <div class="ball third"></div>
         <script>
            let animation = anime.timeline({
            duration: 400, 
            easing: 'easeInOutSine',
            direction: 'alternate',
            autoplay:false,  
            loop: true
            });           
              
            animation.add({
            targets: '.first',
            translateX: [-100,100],
            backgroundColor: 'rgb(255, 0, 0)',
              
            }).add({
            targets: '.second',
            translateX: [-100,100],
            backgroundColor: 'rgb(0, 255, 0)',
              
            }).add({
            targets: '.third',
            translateX: [-100,100],
            backgroundColor: 'rgb(0, 0, 255)',
            });
            window.onscroll=()=>{
            animation.play()
            }
         </script>
   </body>
</html>

Salida: Haga clic en el archivo index.html para abrirlo en el navegador.

Publicación traducida automáticamente

Artículo escrito por namancourses y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *