Share
La prossima volta che creerai alcune animazioni basate su CSS3 potresti trovare utile passare agli Strumenti per sviluppatori di Chrome e trarre vantaggio dalle ispezioni di animazione e dalle funzionalità di ottimizzazione. In questo suggerimento rapido ti forniremo una panoramica di quali strumenti di animazione sono disponibili in Chrome, come accedervi e cosa possono fare per te.
Mentre procedete, se volete che alcune animazioni CSS3 testino ciascuno degli strumenti su di voi potete usare questa penna dal nostro corso 10 Progetti CSS3: UI e Layout:
Ecco la versione a pagina intera.
In una pagina con un'animazione CSS3 in esecuzione, innanzitutto apri gli Strumenti per sviluppatori di Chrome andando Visualizza> Sviluppatore> Strumenti di sviluppo. In alternativa puoi anche usare una scorciatoia da tastiera F12 o CTRL + MAIUSCOLO + I.
Una volta aperti gli strumenti di sviluppo, vai al menu rappresentato da tre punti verticali nell'angolo in alto a destra, quindi scegli Altri strumenti> Animazioni come mostrato di seguito:
Quando apri per la prima volta la scheda Animazione non vedrai alcun contenuto correlato alle tue animazioni, vedrai solo un messaggio che dice Ascoltando le animazioni ... . La ragione di questo è, per funzionare, la scheda deve essere già aperta quando la pagina viene caricata per la prima volta.
Per consentire al pannello di acquisire informazioni sulle animazioni, aggiorna la pagina e vedrai questo:
L'icona del piccolo grafico colorato in alto a sinistra rappresenta le animazioni della tua pagina. Fai clic su quell'icona per aprire gli strumenti di controllo dell'animazione:
Mentre le animazioni giocano vedrai la testina rossa muoversi sulla timeline. Questo indicatore di riproduzione può essere afferrato con il mouse e rimosso manualmente o posizionato in un punto specifico.
Ogni riga dell'interfaccia rappresenta una singola animazione nella pagina. Noterai che ogni linea ha una parte con un colore più scuro e più saturo. Questo indica la lunghezza dell'animazione, ei segmenti più chiari che vengono dopo rappresentano l'animazione che si ripete.
Vedrai anche diversi piccoli cerchi lungo ogni linea di animazione. Questi corrispondono ai fotogrammi chiave dell'animazione. I cerchi di colore scuro rappresentano l'inizio e la fine dell'animazione e rappresentano i cerchi vuoti interstiziale fotogrammi chiave ovunque.
I fotogrammi chiave interstiziali (i fotogrammi chiave tra l'inizio e la fine di ogni ciclo di animazione) su ogni riga possono essere trascinati in posizioni diverse e mentre li sposti vedrai l'animazione nella finestra del browser cambiare i tempi. Questo può essere utile per sperimentare esattamente in quale punto percentuale dovrebbe cadere un fotogramma chiave interstiziale.
La parte difficile, tuttavia, è che non vedrete alcun aggiornamento al codice in stili scheda mentre conduci questi esperimenti. Invece, quando i fotogrammi chiave interstiziali vengono posizionati nel punto giusto, è possibile determinare manualmente quale valore percentuale deve essere impostato per utilizzare un fotogramma chiave.
Posiziona l'indicatore di riproduzione direttamente sopra il fotogramma chiave in questione e vedrai un timestamp in alto a sinistra del pannello che ti dirà fino a che punto dell'animazione sei in pochi secondi. È quindi possibile capire quale percentuale questa volta è della durata complessiva dell'animazione. Nell'esempio seguente l'indicatore di riproduzione è a circa 1s di un'animazione 2s, quindi sappiamo che questo keyframe è al 50%.
Ci sono altri cambiamenti che puoi fare in animazioni tab che volontà aggiorna il tuo codice nel stili scheda in modo da poter vedere esattamente quali valori trapiantare nel CSS. Il primo di questi è il ritardo prima che inizi l'animazione, e il secondo è la sua durata.
Per regolare il ritardo prima che un'animazione venga riprodotta, passa con il mouse sulla sua linea finché non vedi un cursore a forma di mano, quindi trascina orizzontalmente. Vedrai l'aggiornamento del valore di ritardo nel stili tab:
Per modificare la durata dell'animazione, passa con il mouse sul suo ultimo fotogramma chiave finché non vedi un cursore a freccia a doppio cursore, quindi trascina orizzontalmente. Ancora una volta, il valore sarà visto aggiornando nel stili linguetta.
Puoi anche utilizzare gli strumenti di sviluppo di Chrome per modificare la curva di velocità che controlla i tempi di un'animazione. Inizia esaminando un elemento a cui è stata applicata un'animazione. A sinistra della funzione di temporizzazione attualmente specificata vedrai una piccola scatola con un "ghirigoro" al suo interno. Fare clic per aprire l'editor cubico di bezier:
Si apre una finestra che mostra una curva più bezier che illustra la funzione di cronometraggio corrente. Da qui puoi scegliere un preset esistente facendo clic su una delle miniature a sinistra, oppure puoi trascinare le maniglie dell'immagine della curva principale intorno per creare un valore cubico-bezier personalizzato che puoi successivamente copiare nel tuo CSS:
Mentre vai avanti vedrai una piccola sfera viola animare da sinistra a destra in cima all'editor, dandoti un'anteprima della tua funzione di cronometraggio in azione.
Scopri di più sulle curve di Bezier e le funzioni di cronometraggio in questo corso di coffee break:
Un'altra caratteristica utile è la possibilità di visualizzare i livelli utilizzati nell'animazione, inclusa l'opzione per ruotare detta visualizzazione e guardarla da varie angolazioni per capire meglio come funzionano le cose.
Per aprire il Livelli pannello, vai al menu Strumenti di Chrome Dev e scegli Altri strumenti> Livelli.
Una volta il Livelli scheda è aperta, scegliere il Ruota modalità strumento in alto a sinistra:
Ora puoi utilizzare questo strumento per ruotare la visualizzazione dei livelli su qualsiasi angolo di cui hai bisogno per vedere meglio come funzionano le parti dell'animazione:
Diamo un rapido riepilogo degli strumenti di sviluppo dell'animazione di Chrome:
A volte, creare un'animazione giusta può essere un processo molto preciso e pignolo. Questi strumenti possono fornire molte informazioni necessarie sulle animazioni e un feedback in tempo reale per aiutarti a ottenere tutto ciò che è perfetto.
Accentsconagua