NATALIE: Ciao.
Mi chiamo Natalie e sono uno degli ingegneri che lavora
allo sviluppo di Google Web Designer.
In questo video, descriveremo
dettagliatamente come creare animazioni usando
la sequenza temporale in modalità avanzata.
La sequenza temporale si trova in basso per impostazione predefinita.
Ci sono due modalità di sequenza temporale.
L'altra è la sequenza temporale in modalità veloce.
Molti file si aprono in modalità veloce per impostazione predefinita.
Puoi cambiare modalità premendo questo pulsante
nell'angolo in alto a destra.
Questa è la modalità veloce e questa è la modalità avanzata.
Esiste un altro tutorial per la modalità veloce.
In questo parleremo solo della modalità avanzata, che
è lo strumento più complesso, ma anche
il più potente dei due.
Come esercizio per il tutorial ho questo breve annuncio animato
che ha un'immagine scorrevole, due caselle di testo
con dissolvenza in entrata e in uscita e un logo alla fine.
In questo video, analizzeremo come creare
l'annuncio in Google Web Designer.
Partiamo dall'animazione dell'immagine scorrevole.
Il primo passaggio è trascinarla sullo stage
nella posizione in cui deve essere
visualizzata all'inizio dell'animazione.
Così.
Poi la faremo scorrere in questo modo.
Nella sequenza temporale è apparsa una piccola traccia.
Questo è un livello della sequenza
e questa è l'UI per gestire l'animazione
dell'oggetto nel tempo.
L'idea di base per creare animazioni
è definire fotogrammi chiave, cioè punti intermedi
nel tempo, in cui un elemento ha valori di proprietà specifici,
e definire le modalità e la lunghezza della transizione
tra tali valori.
Per far scorrere l'immagine, creeremo vari fotogrammi chiave.
Vogliamo che rimanga in posizione per circa un secondo.
Posiziono un fotogramma chiave a 1 secondo
facendo clic con il pulsante destro e selezionando Inserisci fotogramma chiave
e ripeto l'operazione mezzo secondo dopo.
Poi, in questo fotogramma chiave
faccio scorrere l'immagine
dove voglio che si trovi in questo momento.
Faccio rimanere l'immagine in posizione per un altro secondo.
Infine, mezzo secondo dopo,
voglio che esca completamente dal campo visivo.
Trascinando la testina, puoi far scorrere la sequenza temporale
e visualizzare un'anteprima dell'animazione.
Puoi anche premere il pulsante Riproduci nell'angolo in basso a sinistra
per guardare un'anteprima direttamente sullo stage.
Sembra che vada bene.
Procediamo.
Nell'esempio, l'immagine entra in dissolvenza
all'inizio, per poi scorrere
in un secondo momento.
Pertanto, dobbiamo creare l'animazione della dissolvenza.
Seleziono tutti i fotogrammi chiave con lo strumento
Testo scorrevole e li sposto
per fare posto alla dissolvenza iniziale, poi inserisco
un fotogramma chiave al minuto zero.
In questo fotogramma, impostiamo l'opacità dell'elemento
su zero.
In tutti gli altri fotogrammi deve essere 100%.
Ora aggiungiamo il testo.
Come abbiamo visto, ci sono due caselle di testo,
che entrano in dissolvenza una dopo l'altra, mentre l'immagine scorre.
Creiamo la prima casella di testo.
La prima casella di testo deve entrare in dissolvenza
poi rimanere in posizione per questo periodo
e uscire in dissolvenza.
Per prima cosa impostiamo l'opacità
di questa casella su zero, perché è lo stato iniziale.
Quindi, possiamo creare un fotogramma chiave a mezzo secondo
e impostare l'opacità su 100%.
A un secondo e mezzo, deve ancora essere 100%.
Poi, a due secondi, deve tornare a essere 0%.
Basta inserire un fotogramma chiave
come abbiamo fatto prima.
In alternativa, puoi usare la duplicazione del fotogramma.
Se tieni premuto ALT, puoi creare un clone del fotogramma
e trascinarlo in un momento diverso.
Quest'operazione può aiutarti a risparmiare tempo.
Aggiungiamo l'ultimo dove la casella di testo esce completamente
in dissolvenza.
Vediamo l'anteprima.
Perfetto.
Ok.
La procedura per la seconda casella di testo è identica
a quella della prima, solo che il testo è diverso
e la casella appare dopo la dissolvenza della prima.
Quindi, per risparmiare un po' di tempo
duplico questo livello insieme all'animazione
con un clic con il pulsante destro
e selezionando Duplica livello.
Quindi, uso ancora lo strumento Testo scorrevole
per selezionare i fotogrammi e spostarli nella posizione
desiderata per l'animazione.
Posiziono i fotogrammi dove la prima casella di testo
esce in dissolvenza e la seconda entra in dissolvenza
in modo che non si sovrappongano.
Se i fotogrammi sono troppo vicini
puoi utilizzare lo slider dello zoom per una vista
a maggiore risoluzione dell'animazione.
Adesso, possiamo anche aggiornare il testo.
In questo momento, le due caselle di testo
sono sovrapposte.
Quindi se faccio clic qui posso modificare
per errore la prima.
Quindi la blocco
così non la attivo per sbaglio.
Così, posso modificare quella sottostante.
L'animazione è praticamente pronta.
Osserviamo
cosa succede tra i fotogrammi chiave.
Tra ogni coppia di fotogrammi appare la scritta Lineare
che si riferisce alla funzione easing di CSS
utilizzata per calcolare i valori intermedi
tra ogni coppia.
Lineare significa che i valori cambiano in modo costante.
Ecco altre opzioni.
Facendo clic con il pulsante destro puoi vedere
le funzioni di easing standard indicate
nelle specifiche CSS.
In particolare, per questa transizione
in cui l'immagine scorre da una metà alla successiva
è utile scegliere una funzione di easing diversa
in modo che il movimento acceleri leggermente
all'inizio e poi rallenti
per simulare il movimento
in modo più realistico.
Limito l'area di anteprima solo alla transizione
trascinando i punti di manipolazione gialli.
Ora, imposto l'anteprima su Loop
e avvio l'anteprima solo per quest'area
per risolvere i problemi della transizione.
Sembra che vada bene.
Invece di utilizzare
una delle funzioni predefinite
creiamone una personalizzata.
Fai clic con il pulsante destro e seleziona Opzioni di easing...
per personalizzare la curva di Bezier
nel modo desiderato, salvarla come impostazione personalizzata
e fare clic su OK per applicarla.
Con questo termina il nostro tutorial.
Sono disponibili altri tutorial
più approfonditi su altri temi relativi alle animazioni.
È tutto per ora.
Grazie per l'attenzione.