-
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.
