1
00:00:00,000 --> 00:00:04,763
[MUSIC]

2
00:00:04,763 --> 00:00:07,931
Come abbiamo appreso nella lezione precedente,

3
00:00:07,931 --> 00:00:12,927
le animazioni aggiungono un sacco di valore intrinseco alla tua applicazione.

4
00:00:12,927 --> 00:00:16,080
Si aggiunge ad una migliore esperienza utente.

5
00:00:16,080 --> 00:00:19,990
Ora, ovviamente, questo non significa che si gettano animazioni dappertutto

6
00:00:19,990 --> 00:00:22,730
solo per il gusto di fare animazioni.

7
00:00:22,730 --> 00:00:29,480
Metti le animazioni in atto per rendere l'esperienza dell'utente migliore.

8
00:00:30,680 --> 00:00:34,130
In questo esercizio faremo la nostra prima animazione

9
00:00:34,130 --> 00:00:37,006
all'interno della nostra applicazione Angular che abbiamo sviluppato finora.

10
00:00:37,006 --> 00:00:38,425
E lungo la strada,

11
00:00:38,425 --> 00:00:44,190
impara come le animazioni possono essere implementate in un'applicazione Angular.

12
00:00:44,190 --> 00:00:49,127
Continueremo questo thread nella seconda parte dell'esercizio dove

13
00:00:49,127 --> 00:00:53,206
aggiungeremo altre animazioni alla nostra applicazione Angular.

14
00:00:53,206 --> 00:00:58,720
Quando abbiamo iniziato questo corso, nel primo esercizio con Angular,

15
00:00:58,720 --> 00:01:04,147
avevamo già aggiunto il modulo di animazione nella nostra applicazione Angular

16
00:01:04,147 --> 00:01:10,299
in app.module.ts5, quindi abbiamo importato il modulo di animazione proprio lì.

17
00:01:10,299 --> 00:01:13,551
Ora il passo successivo è quello di andare ai componenti e

18
00:01:13,551 --> 00:01:17,240
quindi aggiungere l'animazione ovunque sia richiesto.

19
00:01:17,240 --> 00:01:24,336
La prima animazione che stiamo per aggiungere è nel componente dishdetail qui.

20
00:01:24,336 --> 00:01:28,758
Quindi, andando al componente dishdetail,

21
00:01:28,758 --> 00:01:32,790
fammi importare alcune classi qui.

22
00:01:32,790 --> 00:01:38,271
Importerò trigger, stato

23
00:01:38,271 --> 00:01:45,382
, stile, animazione e transizione da.

24
00:01:50,250 --> 00:01:53,120
@angular /animations.

25
00:01:56,695 --> 00:02:02,460
Ora, una volta importate queste possiamo fare uso di queste per costruire la nostra animazione.

26
00:02:02,460 --> 00:02:06,390
Quindi, come si aggiunge l'animazione a un componente?

27
00:02:06,390 --> 00:02:12,360
Aggiungeremo i trigger di animazione nel decoratore componente qui.

28
00:02:12,360 --> 00:02:19,247
Quindi andando nel decoratore del componente dopo gli URL degli stili

29
00:02:19,247 --> 00:02:25,217
e aggiungi le animazioni come proprietà all'interno di lì.

30
00:02:25,217 --> 00:02:30,140
E poi qui dentro, definirò un trigger,

31
00:02:30,140 --> 00:02:34,126
che chiamo come trigger di visibilità, e

32
00:02:34,126 --> 00:02:39,888
definirò il trigger di visibilità qui dentro.

33
00:02:39,888 --> 00:02:43,942
Ora, per questo trigger di visibilità,

34
00:02:43,942 --> 00:02:48,972
definirò due stati, definirò uno

35
00:02:48,972 --> 00:02:54,282
stato come mostrato e definirò un secondo stato

36
00:02:54,282 --> 00:03:00,932
come, Nascosto.

37
00:03:00,932 --> 00:03:04,930
Quindi ho la flessibilità di definire i miei stati in questo modo.

38
00:03:04,930 --> 00:03:09,670
Quindi, per lo stato mostrato, cos'è che voglio applicare?

39
00:03:09,670 --> 00:03:16,565
Quindi, per lo stato mostrato, applicherò lo stile come segue,

40
00:03:16,565 --> 00:03:21,350
quindi gli stili che applicherò per

41
00:03:21,350 --> 00:03:26,416
lo stato mostrato, farò la trasformazione e

42
00:03:26,416 --> 00:03:33,240
la trasformazione che applicherò è una scala di 1.0.

43
00:03:33,240 --> 00:03:38,170
Quindi voglio mostrarlo nella

44
00:03:38,170 --> 00:03:42,810
sua dimensione normale e

45
00:03:42,810 --> 00:03:47,167
un'opacità di 0.

46
00:03:47,167 --> 00:03:50,929
Quindi questo è il modo in cui definisco lo stile mostrato.

47
00:03:50,929 --> 00:03:57,884
Quindi, e lo stato nascosto definisco lo stile come,

48
00:04:03,816 --> 00:04:09,659
Trasforma, dirò scala (0.5).

49
00:04:09,659 --> 00:04:13,002
Puoi giocare con questi numeri

50
00:04:13,002 --> 00:04:17,294
per vedere se l'animazione è ciò che desideri.

51
00:04:17,294 --> 00:04:21,194
Ho anche giocato con questi numeri fino a quando ho ottenuto qualcosa di cui ero

52
00:04:21,194 --> 00:04:22,194
soddisfatto.

53
00:04:22,194 --> 00:04:29,457
E 0, o per il loro ulteriore stato mostrato, metterò l'opacità come 1.

54
00:04:29,457 --> 00:04:31,929
Opacità 1 significa che è completamente visibile.

55
00:04:31,929 --> 00:04:34,942
Opacità 0 significa che è completamente nascosto.

56
00:04:34,942 --> 00:04:38,555
Ora, ho definito due stati qui, mostrati e qui nello stato.

57
00:04:38,555 --> 00:04:43,481
Ora, la transizione tra questi due stati,

58
00:04:43,481 --> 00:04:50,931
definirò qui come, ogni volta che mi sposto da qualsiasi stato a qualsiasi stato,

59
00:04:50,931 --> 00:04:56,339
non importa quale stato in quale stato mi muovo,

60
00:04:56,339 --> 00:05:02,108
la trasformazione viene eseguita con animazione di 0,5 secondi,

61
00:05:02,108 --> 00:05:04,780
o 500 millisecondi.

62
00:05:04,780 --> 00:05:08,522
E io mi allenterò.

63
00:05:08,522 --> 00:05:13,323
Quindi qui, quello che sto specificando è che se mi sposto dallo stato mostrato allo stato

64
00:05:13,323 --> 00:05:19,140
nascosto o dallo stato nascosto allo stato mostrato, mi muoverò entro 0,5 secondi o 500 millisecondi.

65
00:05:19,140 --> 00:05:23,278
E poi, farò la transizione allentando dentro e fuori,

66
00:05:23,278 --> 00:05:27,755
quindi non sarà una transizione lineare, entrerà lentamente e

67
00:05:27,755 --> 00:05:31,218
poi entrerà e poi faciliterà la transizione, in modo

68
00:05:31,218 --> 00:05:35,383
che non sarà una transizione a scatti da una all'altra.

69
00:05:35,383 --> 00:05:40,411
In questo modo è possibile utilizzare questa facilità di inserimento o facilità di uscita o ease-in-out

70
00:05:40,411 --> 00:05:45,125
per specificare come si desidera che la transizione avvenga.

71
00:05:45,125 --> 00:05:49,625
Quindi ora per questa animazione, ho specificato

72
00:05:49,625 --> 00:05:54,861
la visibilità come trigger per questa animazione.

73
00:05:54,861 --> 00:05:58,911
Ora per abilitare questa animazione per funzionare correttamente,

74
00:05:58,911 --> 00:06:04,344
entrerò nel mio DishDetailComponent e quindi specificherò,

75
00:06:04,344 --> 00:06:09,412
all'interno di questo componente, il valore iniziale per la visibilità.

76
00:06:09,412 --> 00:06:13,444
Quindi, dirò che la visibilità è

77
00:06:13,444 --> 00:06:18,484
inizialmente impostata su mostrata, e poi,

78
00:06:18,484 --> 00:06:25,379
ogni volta che sto cambiando da un piatto all'altro.

79
00:06:25,379 --> 00:06:28,649
E questo succede ogni volta che prendo il piatto qui.

80
00:06:28,649 --> 00:06:32,117
Quindi ogni volta che cambio il piatto da un piatto all'altro,

81
00:06:32,117 --> 00:06:35,249
questo è causato ogni volta che cambia il parametro del percorso.

82
00:06:35,249 --> 00:06:37,942
Quindi, a quel punto, ho intenzione di applicare l'animazione.

83
00:06:37,942 --> 00:06:42,649
Farò passare il grilletto dallo stato mostrato allo stato nascosto e

84
00:06:42,649 --> 00:06:48,520
poi di nuovo dallo stato nascosto allo stato mostrato quando il piatto è disponibile.

85
00:06:48,520 --> 00:06:53,330
Quindi per applicare quella trasformazione.

86
00:06:53,330 --> 00:06:58,720
Quindi ho intenzione di racchiudere questa dichiarazione all'interno di

87
00:06:58,720 --> 00:07:03,330
un blocco qui in questa funzione freccia.

88
00:07:03,330 --> 00:07:11,806
E poi definire anche questa visibilità qui come.

89
00:07:11,806 --> 00:07:16,845
Quindi, quando sto passando da uno stato all'altro, così

90
00:07:16,845 --> 00:07:22,421
come comincio a recuperare le informazioni del piatto dal lato server,

91
00:07:22,421 --> 00:07:27,784
prima nasconderò il piatto corrente impostando il

92
00:07:27,784 --> 00:07:32,503
valore di visibilità su nascosto, il che significa che il piatto corrente che

93
00:07:32,503 --> 00:07:37,265
viene visualizzato sarà nascosto dalla vista.

94
00:07:37,265 --> 00:07:42,085
E poi, quando il nuovo piatto sarà disponibile, tornerà alla vista.

95
00:07:42,085 --> 00:07:48,147
Quindi, per farlo, quando il mio piatto diventa disponibile nella seconda parte,

96
00:07:48,147 --> 00:07:54,651
nella parte di sottoscrizione, dirò come ultima affermazione in quel blocco,

97
00:07:54,651 --> 00:07:59,299
dirò che questa visibilità è uguale a quella mostrata qui.

98
00:07:59,299 --> 00:08:04,513
Quindi la mia visione diventa visibile a quel punto.

99
00:08:04,513 --> 00:08:09,229
Ora non sto applicando questo al messaggio di errore perché

100
00:08:09,229 --> 00:08:13,654
applicherò questa visibilità solo a quelle parti del mio

101
00:08:13,654 --> 00:08:17,616
modello in cui viene effettivamente mostrato il mio piatto.

102
00:08:17,616 --> 00:08:20,910
Ora, se c'è un errore, allora voglio solo nascondere il piatto corretto.

103
00:08:20,910 --> 00:08:24,751
Quindi, mostra solo il messaggio di errore nella vista lì.

104
00:08:24,751 --> 00:08:29,021
Quindi, con queste modifiche al mio DishDetailComponent.

105
00:08:29,021 --> 00:08:34,092
Quindi, puoi vedere di nuovo, spiegando questo in esso un'altra volta.

106
00:08:34,092 --> 00:08:40,072
Quando inizierò il recupero del nuovo piatto dopo la modifica dei parametri del percorso,

107
00:08:40,072 --> 00:08:42,924
imposterò la visibilità su nascosta in modo

108
00:08:42,924 --> 00:08:48,445
che il piatto corrente che viene visualizzato nella vista si nasconda da solo.

109
00:08:48,445 --> 00:08:52,427
E poi quando il nuovo piatto diventa disponibile, in modo che accadrà quando

110
00:08:52,427 --> 00:08:56,221
l'abbonamento viene chiamato quando quell'osservabile diventa disponibile.

111
00:08:56,221 --> 00:09:00,001
E poi, quando il piatto diventa disponibile e poi,

112
00:09:00,001 --> 00:09:04,455
ho impostato questo piatto al piatto che è tornato dall'osservabile.

113
00:09:04,455 --> 00:09:08,181
A quel punto, ripristinerò la visibilità a quello stato mostrato.

114
00:09:08,181 --> 00:09:13,476
Quindi, che il mio nuovo piatto che ho recuperato può essere mostrato sullo schermo.

115
00:09:13,476 --> 00:09:18,150
Con questa modifica, ora vado al file modello

116
00:09:18,150 --> 00:09:22,710
e all'interno del file modello applicherò

117
00:09:22,710 --> 00:09:26,366
la visibilità a entrambi i piatti qui.

118
00:09:26,366 --> 00:09:31,160
Quindi il primo div in cui sto visualizzando il piatto

119
00:09:31,160 --> 00:09:35,948
applicherò il trigger, Visibilità al piatto.

120
00:09:35,948 --> 00:09:39,417
E poi lo imposterò uguale a,

121
00:09:42,937 --> 00:09:49,060
Visibility, che è la variabile che ho definito nel codice lì.

122
00:09:49,060 --> 00:09:54,450
Ora, applico questo al piatto qui, e applico anche la stessa cosa

123
00:09:54,450 --> 00:09:58,530
al secondo div, dove sto visualizzando i commenti.

124
00:09:59,700 --> 00:10:00,837
E questo è tutto.

125
00:10:00,837 --> 00:10:05,902
Quindi lasciami salvare tutte le modifiche, e poi andremo a

126
00:10:05,902 --> 00:10:11,213
dare un'occhiata a come funziona questa animazione nel nostro esempio.

127
00:10:11,213 --> 00:10:15,015
Andando al browser, ora sto visualizzando loro il menu.

128
00:10:15,015 --> 00:10:19,618
Permettetemi di selezionare uno dei piatti e poi passare nella vista dei piatti qui.

129
00:10:19,618 --> 00:10:24,336
Quindi, quando viene visualizzato il piatto, si noti che ogni volta che mi sposto da

130
00:10:24,336 --> 00:10:28,432
questo piatto al piatto successivo, quindi facendo clic sul pulsante destro.

131
00:10:28,432 --> 00:10:33,349
Poi quel piatto scompare, e poi quando il nuovo piatto diventa disponibile,

132
00:10:33,349 --> 00:10:37,900
la vista diventa nuovamente visibile e poi viene mostrato il nuovo piatto.

133
00:10:37,900 --> 00:10:42,210
Allo stesso modo, posso fare un altro e poi notare che il nuovo piatto,

134
00:10:42,210 --> 00:10:46,070
non appena le informazioni diventano disponibili, diventa di nuovo visibile.

135
00:10:46,070 --> 00:10:51,890
Quindi questa è la transizione che sto applicando in questo esempio qui.

136
00:10:51,890 --> 00:10:58,860
Quindi, tornando indietro, puoi vedere lo stesso comportamento ripetendosi di nuovo.

137
00:10:58,860 --> 00:11:02,730
Questo piccolo cambiamento dell'interfaccia utente

138
00:11:02,730 --> 00:11:08,310
aggiunge un sacco di valore al modo in cui l'utente percepisce la tua applicazione.

139
00:11:08,310 --> 00:11:13,520
Come ti rendi conto, questo non aggiunge molto alla funzionalità della tua applicazione

140
00:11:13,520 --> 00:11:18,690
stessa, ma aggiunge a una migliore esperienza utente.

141
00:11:18,690 --> 00:11:23,625
Ed è qui che applichiamo animazioni giudiziosamente all'interno della nostra

142
00:11:23,625 --> 00:11:28,658
applicazione per rendere certa esperienza utente più significativa

143
00:11:28,658 --> 00:11:33,302
per l'utente che sta visualizzando la tua applicazione angolare, o

144
00:11:33,302 --> 00:11:39,421
visualizzando la tua applicazione mobile, che vedremo nei corsi successivi.

145
00:11:39,421 --> 00:11:43,957
In questo modo viene completato questo esercizio sulle animazioni.

146
00:11:43,957 --> 00:11:48,939
Continueremo le esplorazioni delle animazioni in quella seconda

147
00:11:48,939 --> 00:11:53,082
parte dell'esercizio che si presenta subito dopo.

148
00:11:53,082 --> 00:11:57,513
Questo è un buon momento per fare un commento Git con le animazioni dei messaggi,

149
00:11:57,513 --> 00:11:58,164
parte prima.

150
00:11:58,164 --> 00:12:03,927
[ MUSIC]