Animazioni: controllo e modifica degli effetti di animazione CSS

Kayce Basques

Sofia Emelianova

Ispeziona e modifica le animazioni con la scheda del riquadro a scomparsa Animazioni di Chrome DevTools.

Panoramica

Per acquisire le animazioni, apri la scheda Animazioni. Rileva automaticamente le animazioni e le ordina in gruppi.

La scheda Animazioni ha due scopi principali:

• Controllare le animazioni. Rallenta, riproduci di nuovo o esamina il codice sorgente di un gruppo di animazione.
• Modificare le animazioni. Modifica di temporizzazione, ritardo, durata o offset dei fotogrammi chiave di un gruppo di animazione. La modifica di fotogrammi chiave e Bézier non è supportata.

Punto chiave: puoi modificare i tempi di transizione CSS e dell'easing delle animazioni, nonché configurare curve di Bézier personalizzate con l'Easing Editor nel riquadro Elementi > Stili.

La scheda Animazioni supporta le animazioni CSS, le transizioni CSS, le animazioni web e l'API View Transizione. Le animazioni requestAnimationFrame non sono ancora supportate.

Che cos'è un gruppo di animazione?

Un gruppo di animazioni è un insieme di animazioni che sembrano correlate tra loro.

Per ora, sul web non esiste un vero concetto di animazione di gruppo, quindi i designer e gli sviluppatori del movimento compongono e cronometrano le singole animazioni affinché appaiano come un unico effetto visivo coerente. La scheda Animazioni prevede le animazioni correlate in base all'ora di inizio (esclusi i ritardi) e le raggruppa una accanto all'altra.

In altre parole, la scheda Animazioni raggruppa le animazioni attivate nello stesso blocco di script ma, se sono asincrone, finiscono in gruppi diversi.

Inizia

Esistono due modi per aprire la scheda Animazioni:

• Seleziona Personalizza e controlla DevTools > Altri strumenti > Animazioni.

• Apri il menu dei comandi premendo una delle seguenti opzioni:

  • In macOS: Comando+Maiusc+P
  • Su Windows, Linux o ChromeOS: Ctrl+Maiusc+P

  Poi inizia a digitare Show Animations e seleziona il riquadro a scomparsa corrispondente.

Per impostazione predefinita, la scheda Animazioni si apre in una scheda accanto al riquadro a scomparsa Console. Come scheda del riquadro a scomparsa, puoi utilizzarla con qualsiasi riquadro o spostarla nella parte superiore di DevTools.

La scheda Animazioni contiene quattro sezioni principali:

1. Controlli. Da qui, puoi bloccare Cancella tutti i gruppi di animazioni acquisiti, mettere in pausa Metti in pausa o play_arrow Riprendere le animazioni oppure modificare la velocità del gruppo di animazioni selezionato.

2. Panoramica. Mostra i gruppi di animazioni acquisite di due tipi contrassegnati con icone: tramite scorrimento del mouse e pianificazione normale (basata sul tempo).

   Seleziona un gruppo di animazioni qui per esaminarlo e modificarlo nel riquadro Dettagli.

3. Spostamenti. A seconda del tipo di gruppo di animazione, la sequenza temporale può essere:

   • In pixel per le animazioni con scorrimento del mouse.
   • In millisecondi per la pianificazione delle animazioni basate sul tempo.

   Nella sequenza temporale puoi riprodurre ripetere un'animazione, eseguire lo scrubbing o passare a un punto specifico.

4. Ulteriori dettagli. Ispeziona e modifica il gruppo di animazione selezionato.

Per acquisire un'animazione, attivala mentre è aperta la scheda Animazioni. Se un'animazione viene attivata al caricamento della pagina, ricaricala.

Ispezionare le animazioni

Dopo aver acquisito un'animazione, esistono alcuni modi per ripeterla:

• Passa il mouse sopra la miniatura nel riquadro Panoramica per visualizzarne un'anteprima.
• Trascina la testina di riproduzione (barra verticale rossa) per eseguire lo scrubbing dell'animazione dell'area visibile oppure fai clic su un punto qualsiasi della sequenza temporale per impostare la testina di riproduzione su un punto specifico. La riproduzione dell'animazione continua se era già in corso e si interrompe in caso contrario.
• Seleziona il gruppo di animazione dal riquadro Panoramica (in modo che venga visualizzato nel riquadro Dettagli) e premi il pulsante Riproduci . L'animazione viene riprodotta nell'area visibile.

Fai clic sui pulsanti Velocità animazione nella barra Controlli per modificare la velocità di anteprima del gruppo di animazione selezionato.

Visualizza i dettagli dell'animazione

Dopo aver acquisito un gruppo di animazione, fai clic sul gruppo Panoramica per visualizzarne i dettagli.

Nel riquadro Dettagli, ogni singola animazione ha una propria riga. Per visualizzare il nome completo dell'elemento corrispondente, ridimensiona la colonna del nome.

Passa il mouse sopra un'animazione per evidenziarla nell'area visibile. Fai clic sull'animazione per selezionarla nel riquadro Elementi.

Alcune animazioni si ripetono all'infinito se la loro proprietà animation-iteration-count è impostata su infinite. Nella scheda Animazioni vengono visualizzate le relative definizioni e iterazioni.

La sezione più a sinistra e più scura di un'animazione è la sua definizione. Le sezioni a destra, più sbiadite, rappresentano le iterazioni.

Ad esempio, nello screenshot successivo, le sezioni due e tre rappresentano iterazioni della prima sezione.

Se a due elementi è applicata la stessa animazione, la scheda Animazioni assegna loro lo stesso colore. Il colore in sé è casuale e non ha alcun significato. Ad esempio, nello screenshot sotto i due elementi div.eye.left::after e div.eye.right::after viene applicata la stessa animazione (eyes), così come gli elementi div.feet::before e div.feet::after.

Modifica animazioni

Esistono tre modi per modificare un'animazione con la scheda Animazioni:

• Durata dell'animazione.
• Tempi dei fotogrammi chiave.
• Ritardo all'inizio.

Punto chiave: qualsiasi modifica apportata nella scheda Animazioni applica gli stili incorporati agli elementi corrispondenti, in modo da poter vedere e riprodurre immediatamente le animazioni risultanti.

Per questa sezione, supponi che lo screenshot successivo rappresenti l'animazione originale:

Per modificare la durata di un'animazione, trascina il primo o l'ultimo cerchio.

Se l'animazione definisce delle regole per i fotogrammi chiave, queste vengono rappresentate come cerchi interni bianchi. Trascina uno di questi elementi per modificare la tempistica del fotogramma chiave.

Per aggiungere un ritardo a un'animazione, fai clic sull'animazione stessa, non sui cerchi, quindi trascinala in un punto qualsiasi.

Modifica gli pseudo-elementi ::view-transition durante un'animazione

Con l'API View Transiziones, puoi modificare il DOM in un singolo passaggio, creando al contempo una transizione animata tra i due stati. Durante un'animazione, l'API crea uno pseudo albero con la seguente struttura:

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

Per modificare questa struttura in Elementi > Stili:

1. Apri DevTools ed esamina una pagina che utilizza l'API View Transiziones. Ad esempio, questa pagina demo.
2. In Animazioni, fai clic su Metti in pausa Metti in pausa.

3. Attiva un'animazione nella pagina. Il riquadro Animazioni la acquisisce e mette in pausa immediatamente. Ora puoi trovare la struttura ::view-transition nel DOM, sopra l'elemento <head>.

   

4. In Elementi > Stili, modifica il CSS di ::view-transition pseudo-elementi.

5. Riprendi l'animazione e riproducila per vedere il risultato.

Per ulteriori informazioni, vedi Transizioni fluide e semplici con l'API View Transiziones.