CodeGym/Corsi/Frontend SELF IT/Tecniche avanzate di animazione

Tecniche avanzate di animazione

Disponibile

10.1 Animazioni combinate

Le animazioni complesse possono migliorare notevolmente l'interfaccia utente, rendendola più interattiva e attraente. Per creare tali animazioni viene spesso utilizzata una combinazione di CSS e JavaScript. Vediamo delle tecniche avanzate di animazione, che includono scenari più complessi e interattività.

Combinare diverse animazioni usando CSS permette di creare effetti complessi. Consideriamo un esempio in cui un elemento cambia dimensione, ruota e si sposta allo stesso tempo.

Esempio: Animazioni combinate

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animazioni combinate</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        animation: combined 4s infinite alternate;
      }

      @keyframes combined {
        0% {
          transform: scale(1) rotate(0deg) translateX(0);
        }

        50% {
          transform: scale(1.5) rotate(45deg) translateX(100px);
        }

        100% {
          transform: scale(1) rotate(0deg) translateX(0);
        }
      }
    </style>
  </head>
  <body>
    <div style="min-height: 250px; padding: 20px 0;">
      <div class="box"></div>
    </div>
  </body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animazioni combinate</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        animation: combined 4s infinite alternate;
      }

      @keyframes combined {
        0% {
          transform: scale(1) rotate(0deg) translateX(0);
        }

        50% {
          transform: scale(1.5) rotate(45deg) translateX(100px);
        }

        100% {
          transform: scale(1) rotate(0deg) translateX(0);
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

Spiegazione del codice:

  • .box: l'elemento su cui viene applicata l'animazione combinata
  • @keyframes combined: definisce l'animazione che cambia scala, rotazione e posizione dell'elemento

10.2 Animazioni JavaScript

La funzione requestAnimationFrame permette di creare animazioni fluide con alte prestazioni. Sincronizza l'animazione con la frequenza di aggiornamento dello schermo, rendendola più fluida.

Esempio: Animazione di movimento con requestAnimationFrame

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animazione con requestAnimationFrame</title>
    <style>
      .ball {
        width: 50px;
        height: 50px;
        background-color: #e74c3c;
        border-radius: 50%;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div style="min-height: 60px; padding: 20px 0;">
      <div class="ball"></div>
    </div>
    <script>
      const ball = document.querySelector('.ball');

      let start = null;

      function animate(time) {
        if (!start) start = time;
        let progress = time - start;
        ball.style.left = Math.min(progress / 10, 200) + 'px';
        if (progress < 2000) {
          requestAnimationFrame(animate);
        }
      }

      requestAnimationFrame(animate);
    </script>
  </body>
</html>
HTML
<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Animazione con requestAnimationFrame</title>
        <style>
          .ball {
            width: 50px;
            height: 50px;
            background-color: #e74c3c;
            border-radius: 50%;
            position: absolute;
          }
        </style>
      </head>
      <body>
        <div class="ball"></div>
        <script>
// Seleziona l'elemento con classe "ball" e lo salva nella variabile ball
const ball = document.querySelector('.ball');

// Variabile per memorizzare il tempo d'inizio dell'animazione
let start = null;

// Funzione di animazione
function animate(time) {
  // Se l'animazione viene avviata per la prima volta, memorizza il tempo corrente
  if (!start) start = time;
  // Calcola il tempo trascorso dall'inizio dell'animazione
  let progress = time - start;
  // Imposta la posizione della palla sull'asse sinistra in base al tempo trascorso
  // Limita lo spostamento massimo a 200 pixel
  ball.style.left = Math.min(progress / 10, 200) + 'px';
  // Se sono trascorsi meno di 2000 millisecondi, continua l'animazione
  if (progress < 2000) {
    requestAnimationFrame(animate);
  }
}

// Avvia l'animazione
requestAnimationFrame(animate);
        </script>
      </body>
    </html>

Spiegazione del codice:

  • requestAnimationFrame: funzione che chiama animate per eseguire i fotogrammi dell'animazione
  • animate: funzione che sposta l'elemento .ball di 200 pixel a destra in 2 secondi

10.3 Controllo delle animazioni CSS con JavaScript

JavaScript può essere usato per controllare le animazioni CSS, cambiando classi o stili degli elementi.

Esempio: Inizio animazione CSS al clic di un pulsante

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inizio animazione al clic del pulsante</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #2ecc71;
        position: relative;
      }

      .box.animate {
        animation: moveAndRotate 3s forwards;
      }

      @keyframes moveAndRotate {
        0% {
          transform: translateX(0) rotate(0deg);
        }

        100% {
          transform: translateX(200px) rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div style="padding: 30px 0">
      <div class="box" id="box"></div>
    </div>
    <button id="startButton">Start Animation</button>
    <script>
      document.getElementById('startButton').addEventListener('click', function() {
        document.getElementById('box').classList.toggle('animate');
      });
    </script>
  </body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inizio animazione al clic del pulsante</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #2ecc71;
        position: relative;
      }

      .box.animate {
        animation: moveAndRotate 3s forwards;
      }

      @keyframes moveAndRotate {
        0% {
          transform: translateX(0) rotate(0deg);
        }

        100% {
          transform: translateX(200px) rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="box" id="box"></div>
    <button id="startButton">Start Animation</button>
    <script>
      document.getElementById('startButton').addEventListener('click', function() {
        document.getElementById('box').classList.toggle('animate');
      });
    </script>
  </body>
</html>

Spiegazione del codice:

  • .box.animate: classe che aggiunge l'animazione moveAndRotate all'elemento .box
  • JavaScript: l'evento click sul pulsante #startButton aggiunge o rimuove la classe animate all'elemento #box, avviando l'animazione

10.4 Interazione con le animazioni tramite eventi

Gli eventi di animazione come animationstart, animationend e animationiteration permettono di monitorare e gestire le animazioni.

Esempio: Monitoraggio degli eventi di animazione

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Monitoraggio degli eventi di animazione</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #9b59b6;
        animation: scaleUp 2s infinite;
      }

      @keyframes scaleUp {
        0% {
          transform: scale(1);
        }

        50% {
          transform: scale(1.5);
        }

        100% {
          transform: scale(1);
        }
      }
    </style>
  </head>
  <body>
    <div class="box" id="box"></div>
    <script>
      const box = document.getElementById('box');

      box.addEventListener('animationstart', () => {
        console.log('Animazione iniziata');
      });

      box.addEventListener('animationend', () => {
        console.log('Animazione terminata');
      });

      box.addEventListener('animationiteration', () => {
        console.log('Iterazione dell\'animazione');
      });
    </script>
  </body>
</html>

Spiegazione del codice:

  • animationstart: evento che viene attivato all'inizio dell'animazione
  • animationend: evento che viene attivato alla fine dell'animazione
  • animationiteration: evento che viene attivato ogni volta che l'animazione si ripete
1
Compito
Frontend SELF IT,  livello 24lezione 4
Bloccato
Animazioni complesse
Animazioni complesse
1
Compito
Frontend SELF IT,  livello 24lezione 4
Bloccato
Avvio dell'animazione
Avvio dell'animazione
Commenti
  • Popolari
  • Nuovi
  • Vecchi
Devi avere effettuato l'accesso per lasciare un commento
Questa pagina non ha ancora commenti