0:00:03.285,0:00:03.910
NATALIE: Ciao.

0:00:03.910,0:00:06.490
Mi chiamo Natalie e sono[br]uno degli ingegneri che lavora

0:00:06.490,0:00:07.960
allo sviluppo di Google Web Designer.

0:00:07.960,0:00:09.460
In questo video, descriveremo

0:00:09.460,0:00:11.418
dettagliatamente come[br]creare animazioni usando

0:00:11.418,0:00:14.470
la sequenza temporale[br]in modalità avanzata.

0:00:14.470,0:00:17.170
La sequenza temporale si trova[br]in basso per impostazione predefinita.

0:00:17.170,0:00:19.630
Ci sono due modalità[br]di sequenza temporale.

0:00:19.630,0:00:22.480
L'altra è la sequenza temporale[br]in modalità veloce.

0:00:22.480,0:00:24.580
Molti file si aprono in modalità[br]veloce per impostazione predefinita.

0:00:24.580,0:00:26.892
Puoi cambiare modalità[br]premendo questo pulsante

0:00:26.892,0:00:28.100
nell'angolo in alto a destra.

0:00:28.100,0:00:31.480
Questa è la modalità veloce[br]e questa è la modalità avanzata.

0:00:31.480,0:00:33.480
Esiste un altro tutorial[br]per la modalità veloce.

0:00:33.480,0:00:36.010
In questo parleremo solo[br]della modalità avanzata, che

0:00:36.010,0:00:38.230
è lo strumento più complesso, ma anche

0:00:38.230,0:00:39.850
il più potente dei due.

0:00:39.850,0:00:44.020
Come esercizio per il tutorial[br]ho questo breve annuncio animato

0:00:44.020,0:00:46.300
che ha un'immagine scorrevole,[br]due caselle di testo

0:00:46.300,0:00:49.570
con dissolvenza in entrata e in[br]uscita e un logo alla fine.

0:00:49.570,0:00:51.820
In questo video, analizzeremo come creare

0:00:51.820,0:00:54.760
l'annuncio in Google Web Designer.

0:00:54.760,0:00:57.430
Partiamo dall'animazione[br]dell'immagine scorrevole.

0:00:57.430,0:01:01.260
Il primo passaggio è[br]trascinarla sullo stage

0:01:01.260,0:01:02.760
nella posizione in cui deve essere

0:01:02.760,0:01:04.800
visualizzata all'inizio dell'animazione.

0:01:04.800,0:01:05.530
Così.

0:01:05.530,0:01:07.488
Poi la faremo scorrere in questo modo.

0:01:10.974,0:01:13.640
Nella sequenza temporale[br]è apparsa una piccola traccia.

0:01:13.640,0:01:15.160
Questo è un livello della sequenza

0:01:15.160,0:01:18.460
e questa è l'UI per gestire l'animazione

0:01:18.460,0:01:20.772
dell'oggetto nel tempo.

0:01:20.772,0:01:22.480
L'idea di base per creare animazioni

0:01:22.480,0:01:24.396
è definire fotogrammi[br]chiave, cioè punti intermedi

0:01:24.396,0:01:27.490
nel tempo, in cui un elemento[br]ha valori di proprietà specifici,

0:01:27.490,0:01:30.490
e definire le modalità[br]e la lunghezza della transizione

0:01:30.490,0:01:32.180
tra tali valori.

0:01:32.180,0:01:36.067
Per far scorrere l'immagine,[br]creeremo vari fotogrammi chiave.

0:01:36.067,0:01:38.150
Vogliamo che rimanga[br]in posizione per circa un secondo.

0:01:38.150,0:01:39.850
Posiziono un fotogramma chiave a 1 secondo

0:01:39.850,0:01:43.570
facendo clic con il pulsante destro e[br]selezionando Inserisci fotogramma chiave

0:01:43.570,0:01:45.400
e ripeto l'operazione mezzo secondo dopo.

0:01:45.400,0:01:47.170
Poi, in questo fotogramma chiave

0:01:47.170,0:01:48.880
faccio scorrere l'immagine

0:01:48.880,0:01:51.767
dove voglio che[br]si trovi in questo momento.

0:01:51.767,0:01:54.350
Faccio rimanere l'immagine[br]in posizione per un altro secondo.

0:01:54.350,0:01:56.660
Infine, mezzo secondo dopo,

0:01:56.660,0:02:00.820
voglio che esca completamente[br]dal campo visivo.

0:02:00.820,0:02:03.430
Trascinando la testina,[br]puoi far scorrere la sequenza temporale

0:02:03.430,0:02:05.860
e visualizzare un'anteprima[br]dell'animazione.

0:02:05.860,0:02:09.160
Puoi anche premere il pulsante[br]Riproduci nell'angolo in basso a sinistra

0:02:09.160,0:02:11.530
per guardare un'anteprima[br]direttamente sullo stage.

0:02:14.152,0:02:15.555
Sembra che vada bene.

0:02:15.555,0:02:16.830
Procediamo.

0:02:16.830,0:02:19.710
Nell'esempio, l'immagine[br]entra in dissolvenza

0:02:19.710,0:02:21.570
all'inizio, per poi scorrere

0:02:21.570,0:02:23.010
in un secondo momento.

0:02:23.010,0:02:25.710
Pertanto, dobbiamo creare[br]l'animazione della dissolvenza.

0:02:29.400,0:02:31.872
Seleziono tutti i fotogrammi chiave[br]con lo strumento

0:02:31.872,0:02:33.330
Testo scorrevole e li sposto

0:02:33.330,0:02:36.150
per fare posto alla dissolvenza[br]iniziale, poi inserisco

0:02:36.150,0:02:37.950
un fotogramma chiave al minuto zero.

0:02:37.950,0:02:43.170
In questo fotogramma,[br]impostiamo l'opacità dell'elemento

0:02:43.170,0:02:43.720
su zero.

0:02:48.680,0:02:52.966
In tutti gli altri fotogrammi[br]deve essere 100%.

0:03:02.020,0:03:03.310
Ora aggiungiamo il testo.

0:03:03.310,0:03:06.880
Come abbiamo visto,[br]ci sono due caselle di testo,

0:03:06.880,0:03:11.990
che entrano in dissolvenza una dopo[br]l'altra, mentre l'immagine scorre.

0:03:11.990,0:03:14.080
Creiamo la prima casella di testo.

0:03:32.030,0:03:34.460
La prima casella di testo[br]deve entrare in dissolvenza

0:03:34.460,0:03:38.000
poi rimanere in posizione[br]per questo periodo

0:03:38.000,0:03:39.580
e uscire in dissolvenza.

0:03:39.580,0:03:41.330
Per prima cosa impostiamo l'opacità

0:03:41.330,0:03:45.820
di questa casella su zero,[br]perché è lo stato iniziale.

0:03:45.820,0:03:50.220
Quindi, possiamo creare un[br]fotogramma chiave a mezzo secondo

0:03:50.220,0:03:52.170
e impostare l'opacità su 100%.

0:03:52.170,0:03:54.690
A un secondo e mezzo,[br]deve ancora essere 100%.

0:03:54.690,0:03:58.397
Poi, a due secondi,[br]deve tornare a essere 0%.

0:03:58.397,0:04:00.480
Basta inserire un fotogramma chiave

0:04:00.480,0:04:01.860
come abbiamo fatto prima.

0:04:01.860,0:04:04.500
In alternativa, puoi usare[br]la duplicazione del fotogramma.

0:04:04.600,0:04:08.700
Se tieni premuto ALT,[br]puoi creare un clone del fotogramma

0:04:08.700,0:04:09.800
e trascinarlo in un momento diverso.

0:04:10.100,0:04:13.700
Quest'operazione può[br]aiutarti a risparmiare tempo.

0:04:14.500,0:04:18.399
Aggiungiamo l'ultimo dove[br]la casella di testo esce completamente

0:04:18.399,0:04:19.000
in dissolvenza.

0:04:19.200,0:04:20.100
Vediamo l'anteprima.

0:04:23.500,0:04:24.000
Perfetto.

0:04:24.100,0:04:24.600
Ok.

0:04:25.000,0:04:27.900
La procedura per la seconda[br]casella di testo è identica

0:04:27.900,0:04:30.000
a quella della prima, solo[br]che il testo è diverso

0:04:30.000,0:04:32.500
e la casella appare dopo[br]la dissolvenza della prima.

0:04:32.600,0:04:35.300
Quindi, per risparmiare[br]un po' di tempo

0:04:35.400,0:04:37.000
duplico questo livello[br]insieme all'animazione

0:04:37.000,0:04:38.200
con un clic con il pulsante destro

0:04:38.400,0:04:40.000
e selezionando Duplica livello.

0:04:41.600,0:04:45.700
Quindi, uso ancora lo strumento[br]Testo scorrevole

0:04:45.700,0:04:48.000
per selezionare i fotogrammi[br]e spostarli nella posizione

0:04:48.000,0:04:49.500
desiderata per l'animazione.

0:04:51.700,0:04:54.500
Posiziono i fotogrammi[br]dove la prima casella di testo

0:04:54.500,0:04:56.500
esce in dissolvenza e la[br]seconda entra in dissolvenza

0:04:56.500,0:04:58.000
in modo che non si sovrappongano.

0:04:58.200,0:05:00.000
Se i fotogrammi sono troppo vicini

0:05:00.000,0:05:03.000
puoi utilizzare lo slider[br]dello zoom per una vista

0:05:03.000,0:05:04.800
a maggiore risoluzione dell'animazione.

0:05:12.400,0:05:14.600
Adesso, possiamo anche[br]aggiornare il testo.

0:05:15.000,0:05:17.000
In questo momento, le due caselle di testo

0:05:17.000,0:05:18.000
sono sovrapposte.

0:05:18.200,0:05:20.500
Quindi se faccio clic qui posso modificare

0:05:20.500,0:05:21.500
per errore la prima.

0:05:21.700,0:05:22.500
Quindi la blocco

0:05:22.500,0:05:24.100
così non la attivo per sbaglio.

0:05:24.800,0:05:27.200
Così, posso modificare quella sottostante.

0:05:44.000,0:05:46.000
L'animazione è praticamente pronta.

0:05:46.500,0:05:47.400
Osserviamo

0:05:47.400,0:05:49.700
cosa succede tra i fotogrammi chiave.

0:05:49.900,0:05:52.900
Tra ogni coppia di fotogrammi[br]appare la scritta Lineare

0:05:53.100,0:05:55.500
che si riferisce[br]alla funzione easing di CSS

0:05:55.600,0:05:57.900
utilizzata per calcolare[br]i valori intermedi

0:05:57.900,0:05:58.800
tra ogni coppia.

0:05:58.900,0:06:02.200
Lineare significa che[br]i valori cambiano in modo costante.

0:06:03.000,0:06:04.300
Ecco altre opzioni.

0:06:04.500,0:06:06.500
Facendo clic con il pulsante[br]destro puoi vedere

0:06:06.500,0:06:08.600
le funzioni di easing standard indicate

0:06:08.600,0:06:09.900
nelle specifiche CSS.

0:06:10.600,0:06:13.500
In particolare, per questa transizione

0:06:13.500,0:06:16.800
in cui l'immagine scorre[br]da una metà alla successiva

0:06:16.900,0:06:19.000
è utile scegliere una[br]funzione di easing diversa

0:06:19.000,0:06:22.200
in modo che il movimento[br]acceleri leggermente

0:06:22.200,0:06:23.800
all'inizio e poi rallenti

0:06:23.800,0:06:26.200
per simulare il movimento

0:06:26.200,0:06:28.300
in modo più realistico.

0:06:30.000,0:06:32.500
Limito l'area di anteprima[br]solo alla transizione

0:06:32.500,0:06:38.000
trascinando i punti di[br]manipolazione gialli.

0:06:38.000,0:06:41.600
Ora, imposto l'anteprima su Loop

0:06:41.600,0:06:43.900
e avvio l'anteprima[br]solo per quest'area

0:06:43.900,0:06:45.900
per risolvere i problemi[br]della transizione.

0:06:46.800,0:06:48.300
Sembra che vada bene.

0:06:48.400,0:06:49.700
Invece di utilizzare

0:06:49.700,0:06:51.600
una delle funzioni predefinite

0:06:51.600,0:06:52.900
creiamone una personalizzata.

0:06:52.900,0:06:55.000
Fai clic con il pulsante destro[br]e seleziona Opzioni di easing...

0:06:55.000,0:06:56.600
per personalizzare la curva di Bezier

0:06:56.600,0:07:00.900
nel modo desiderato, salvarla[br]come impostazione personalizzata

0:07:04.300,0:07:05.700
e fare clic su OK per applicarla.

0:07:09.000,0:07:10.900
Con questo termina il nostro tutorial.

0:07:11.300,0:07:12.900
Sono disponibili altri tutorial

0:07:12.900,0:07:15.900
più approfonditi su altri temi[br]relativi alle animazioni.

0:07:16.000,0:07:16.800
È tutto per ora.

0:07:16.800,0:07:17.500
Grazie per l'attenzione.