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

2
00:00:04,660 --> 00:00:09,853
Cerchiamo di ottenere una breve panoramica del supporto di animazione in angolare prima di andare e

3
00:00:09,853 --> 00:00:15,820
provare la nostra mano a implementare effettivamente alcune animazioni nella nostra applicazione angolare.

4
00:00:17,010 --> 00:00:18,290
Come ti rendi conto,

5
00:00:18,290 --> 00:00:23,800
le animazioni stesse non si aggiungono alla funzionalità dell'applicazione Angular.

6
00:00:23,800 --> 00:00:27,210
Quindi sorge la domanda, perché usare le animazioni?

7
00:00:27,210 --> 00:00:31,420
Ora, se lo guardi dall'esperienza utente, o dalla

8
00:00:31,420 --> 00:00:36,250
prospettiva di progettazione dell'interfaccia utente, allora inizi a vedere che le animazioni

9
00:00:36,250 --> 00:00:40,860
hanno un significato e uno scopo per il loro uso in un'applicazione.

10
00:00:41,860 --> 00:00:46,360
Il dare un feedback visivo all'utente sulle

11
00:00:46,360 --> 00:00:49,560
cose che stanno accadendo all'interno della tua applicazione angolare.

12
00:00:49,560 --> 00:00:54,920
Quindi puoi avere un'applicazione completamente priva di animazioni e

13
00:00:54,920 --> 00:00:58,050
che fornisca ancora lo stesso insieme di funzionalità.

14
00:00:58,050 --> 00:01:00,710
Quindi questo è qualcosa che dobbiamo tenere a mente

15
00:01:00,710 --> 00:01:05,280
quando stiamo introducendo animazioni nella nostra applicazione angolare.

16
00:01:05,280 --> 00:01:12,150
Le animazioni non sono necessarie o richieste, ma

17
00:01:12,150 --> 00:01:18,940
aggiungono quella piccola spezia alla tua applicazione angolare, se mantieni quella vista nella

18
00:01:18,940 --> 00:01:24,090
tua mente, ti avvicinerai all'animazione da una prospettiva completamente diversa.

19
00:01:25,380 --> 00:01:31,890
È come non aggiungere troppo sale nei tuoi piatti solo perché il sale aggiunge gusto.

20
00:01:33,030 --> 00:01:36,340
Per gran parte del sale rovina anche il tuo piatto.

21
00:01:36,340 --> 00:01:38,630
La stessa cosa anche con le animazioni.

22
00:01:38,630 --> 00:01:42,370
Troppe animazioni e finisci con un utente confuso.

23
00:01:43,400 --> 00:01:48,790
Ma le animazioni, aggiunte sottilmente per dare suggerimenti agli utenti, o

24
00:01:48,790 --> 00:01:55,545
dare un feedback visivo agli utenti, aggiungono un sacco di valore alla tua applicazione angolare.

25
00:01:55,545 --> 00:02:00,295
Fortunatamente, il quadro materiale angolare che stiamo già utilizzando all'interno della

26
00:02:00,295 --> 00:02:05,825
nostra applicazione angolare, viene fornito con il proprio set integrato di animazioni.

27
00:02:05,825 --> 00:02:10,074
In effetti, questo è il motivo per cui abbiamo incluso il modulo di animazione del browser.

28
00:02:10,074 --> 00:02:15,060
Nella nostra applicazione angolare proprio all'inizio perché il

29
00:02:15,060 --> 00:02:19,950
materiale angolare sfrutta già il supporto dell'animazione che

30
00:02:21,350 --> 00:02:25,445
angolare fornisce attraverso o la sua animazione.

31
00:02:25,445 --> 00:02:30,135
Quindi la libreria dei materiali angolare

32
00:02:30,135 --> 00:02:35,840
utilizza le animazioni suggerite fornite con il design del materiale.

33
00:02:35,840 --> 00:02:38,700
Cose come, ad esempio, quando si fa clic su un pulsante,

34
00:02:38,700 --> 00:02:43,980
gli effetti di ondulazione che si vedono sul pulsante e il sottile ingrandimento,

35
00:02:43,980 --> 00:02:50,220
e il restringimento di diverse parti della vista, e così via.

36
00:02:50,220 --> 00:02:55,010
Questi sono già suggeriti dall'approccio al design dei materiali, e

37
00:02:55,010 --> 00:02:58,840
quindi il materiale angolare adotta già molte di queste cose.

38
00:02:58,840 --> 00:03:03,140
Quindi, anche senza impegnarsi esplicitamente,

39
00:03:03,140 --> 00:03:08,100
ottieni automaticamente alcune delle animazioni richieste nella

40
00:03:08,100 --> 00:03:11,950
tua applicazione angolare semplicemente usando materiale angolare.

41
00:03:11,950 --> 00:03:17,640
Ma supponiamo di voler aggiungere la tua spezia al mix.

42
00:03:17,640 --> 00:03:21,030
Quindi, come ti avvicini alle animazioni in angolare?

43
00:03:21,030 --> 00:03:25,510
Questo è ciò che vedremo rapidamente in questa lezione.

44
00:03:25,510 --> 00:03:31,091
E poi passare all'esercizio in cui implementeremo fu e vedere se abbiamo

45
00:03:31,091 --> 00:03:37,402
senso o se fanno la differenza nel modo in cui percepisci la tua applicazione angolare.

46
00:03:39,145 --> 00:03:42,053
L' idea alla base del supporto di Angular per

47
00:03:42,053 --> 00:03:46,723
le animazioni è che consente di creare animazioni con

48
00:03:46,723 --> 00:03:52,270
prestazioni quasi native di ciò che otterrai con animazioni CSS pure.

49
00:03:52,270 --> 00:03:55,300
Ora potresti immediatamente chiederti nella tua mente,

50
00:03:55,300 --> 00:03:57,690
perché non usare solo animazioni CSS pure?

51
00:03:57,690 --> 00:04:01,810
In effetti, puoi farlo anche tu, ma non c'è nulla che ti impedisca di usare

52
00:04:01,810 --> 00:04:04,930
animazioni CSS pure all'interno della tua applicazione Angular.

53
00:04:04,930 --> 00:04:09,880
Ma il vantaggio di utilizzare l'

54
00:04:09,880 --> 00:04:14,660
approccio angolare per introdurre le animazioni è che angolare,

55
00:04:14,660 --> 00:04:19,280
prima di tutto, sfrutta il supporto dell'API web-animations

56
00:04:19,280 --> 00:04:24,620
supportata nelle versioni più moderne di tutti i browser.

57
00:04:24,620 --> 00:04:29,540
Ora, quindi se la tua versione del browser supporta già l'API Web Animations,

58
00:04:29,540 --> 00:04:32,380
Angular semplicemente sfrutta un inizio per

59
00:04:32,380 --> 00:04:36,640
supportare le animazioni che includerai all'interno dell'applicazione Angular.

60
00:04:36,640 --> 00:04:39,970
In caso contrario, è necessario utilizzare un polyfill

61
00:04:39,970 --> 00:04:45,270
chiamato web-animations.min.js nella propria applicazione Angular.

62
00:04:45,270 --> 00:04:49,190
Negli esercizi, inizieremo con l'ipotesi che stiamo prendendo di mira

63
00:04:49,190 --> 00:04:53,355
i browser moderni, quindi non includo esplicitamente il polyfill.

64
00:04:53,355 --> 00:04:59,625
Se decidi di farlo, la documentazione delle animazioni angolari

65
00:04:59,625 --> 00:05:05,395
ti dice esplicitamente come compilarlo per indirizzare i browser più vecchi.

66
00:05:05,395 --> 00:05:07,425
Quindi di nuovo, tornando alla domanda,

67
00:05:07,425 --> 00:05:13,440
perché non usare l'animazione CSS pura piuttosto che usare l'animazione angolare?

68
00:05:13,440 --> 00:05:15,850
Ora è qui che

69
00:05:15,850 --> 00:05:20,560
il vantaggio di utilizzare l'animazione angolare all'interno dell'applicazione viene alla ribalta.

70
00:05:20,560 --> 00:05:24,710
Il fatto che le animazioni angolari siano strettamente accoppiate

71
00:05:24,710 --> 00:05:28,710
con il codice che scrivi per l'applicazione Angular.

72
00:05:28,710 --> 00:05:32,740
E quindi, puoi attivare molte di queste animazioni legate

73
00:05:32,740 --> 00:05:37,330
direttamente al modo in cui la tua applicazione angolare si sta evolvendo e

74
00:05:37,330 --> 00:05:40,560
cosa sta succedendo all'interno della tua applicazione angolare.

75
00:05:40,560 --> 00:05:45,610
Così puoi legarlo al ciclo di vita dei tuoi componenti.

76
00:05:45,610 --> 00:05:50,356
Puoi legarlo nelle varie fasi di come la vista cambia se stessa

77
00:05:50,356 --> 00:05:53,290
mentre stai eseguendo il rendering della vista.

78
00:05:53,290 --> 00:06:00,130
E quindi quel vantaggio che si ottiene utilizzando la libreria di animazioni Angular,

79
00:06:00,130 --> 00:06:05,870
invece di animazioni CSS pure, è qualcosa che vale la pena considerare.

80
00:06:05,870 --> 00:06:09,140
Come ci avviciniamo alle animazioni in Angular?

81
00:06:09,140 --> 00:06:12,730
Le animazioni stesse sono costruite intorno a stati e

82
00:06:12,730 --> 00:06:17,850
transizioni tra stati nel quadro angolare, quindi

83
00:06:17,850 --> 00:06:22,440
definiamo stati diversi, lo stato potrebbe essere qualsiasi cosa, ma

84
00:06:22,440 --> 00:06:27,500
si desidera definire come uno stato dal punto di vista dell'animazione.

85
00:06:27,500 --> 00:06:31,290
Qualsiasi cambiamento di stato che si desidera causare

86
00:06:31,290 --> 00:06:35,330
può attivare l'effetto di animazione per entrare in immagine.

87
00:06:35,330 --> 00:06:39,840
Quindi le transizioni lungo gli stati attiveranno il comportamento di animazione

88
00:06:39,840 --> 00:06:41,550
all'interno dell'applicazione angolare.

89
00:06:41,550 --> 00:06:46,080
Come vedremo nella prossima diapositiva dove vi mostrerò un esempio di

90
00:06:46,080 --> 00:06:50,468
come è possibile utilizzare nastri e transizioni per attivare l'animazione.

91
00:06:50,468 --> 00:06:56,260
Quindi l'aspetto di animazione della tua applicazione angolare

92
00:06:56,260 --> 00:07:01,420
è definito all'interno del decoratore di componenti che usi all'interno dei tuoi componenti.

93
00:07:01,420 --> 00:07:06,140
Quindi il decoratore del componente ha una proprietà colori animazioni che

94
00:07:06,140 --> 00:07:11,600
userai per definire i valori trigger per le tue animazioni.

95
00:07:11,600 --> 00:07:13,650
Quindi ho usato la parola grilletto.

96
00:07:13,650 --> 00:07:17,400
Negli esercizi, vedrai come implementeremo i trigger per

97
00:07:17,400 --> 00:07:22,370
le animazioni e come applicheremo i trigger a vari elementi del modello

98
00:07:22,370 --> 00:07:27,520
e quindi attiveremo tali animazioni in determinate circostanze.

99
00:07:27,520 --> 00:07:31,680
Inoltre, quando è necessario utilizzare le animazioni all'interno

100
00:07:31,680 --> 00:07:36,550
dell'applicazione Angular, prima di tutto, è necessario importare il modulo di animazioni del browser.

101
00:07:36,550 --> 00:07:41,330
Lo abbiamo già fatto nel nostro primo esercizio perché

102
00:07:41,330 --> 00:07:45,840
il modulo di animazione del browser era richiesto per supportare il materiale angolare.

103
00:07:45,840 --> 00:07:50,269
Ora, inoltre, quando stai implementando animazioni all'interno dei tuoi componenti.

104
00:07:51,280 --> 00:07:55,840
Quindi avresti bisogno dell'aiuto di classi di raggio come trigger, stato,

105
00:07:55,840 --> 00:07:56,610
stile, animate,

106
00:07:56,610 --> 00:08:01,550
transizione, che devono essere importate dalla libreria di animazioni angolari.

107
00:08:01,550 --> 00:08:08,010
E lo faremo all'interno di ogni componente che richiede l'uso di animazioni.

108
00:08:08,010 --> 00:08:12,930
Come accennato nella diapositiva precedente, il comportamento di animazione nell'

109
00:08:12,930 --> 00:08:17,960
applicazione Angular ruota attorno agli stati e alle transizioni tra gli stati.

110
00:08:17,960 --> 00:08:21,470
Gli stati possono essere tutto ciò che si definisce come uno stato.

111
00:08:21,470 --> 00:08:26,280
Come vedrete nell'esempio che segue nel primo esercizio dopo questa

112
00:08:26,280 --> 00:08:30,650
lezione, siete stati definiti 2 stati chiamati mostrati e nascosti.

113
00:08:30,650 --> 00:08:33,600
Dal nome dello stato

114
00:08:33,600 --> 00:08:37,920
inizi automaticamente a indovinare cosa implicano questi due stati.

115
00:08:37,920 --> 00:08:42,800
Ora, quando ci si sposta dallo stato mostrato allo stato nascosto, la transizione

116
00:08:42,800 --> 00:08:46,970
dallo stato mostrato allo stato nascosto attiverà una sorta di animazione.

117
00:08:46,970 --> 00:08:50,780
Quindi forse nasconderai un elemento all'interno della tua

118
00:08:52,170 --> 00:08:56,360
vista cambiando l'opacità dell'elemento,

119
00:08:56,360 --> 00:09:00,240
opacità che significa quanto è trasparente l'elemento e l'opacità di

120
00:09:00,240 --> 00:09:05,260
uno significa che l'elemento è completamente opaco e visibile sullo schermo.

121
00:09:05,260 --> 00:09:10,360
Se si imposta l'opacità su zero, l'elemento scompare completamente dallo schermo.

122
00:09:10,360 --> 00:09:13,260
Non stiamo rimuovendo quell'elemento

123
00:09:13,260 --> 00:09:18,110
dal semplicemente nascondendo quell'elemento cambiando la sua opacità.

124
00:09:18,110 --> 00:09:21,350
Quindi, in questo modo sarebbe qualcosa che puoi innescare.

125
00:09:21,350 --> 00:09:24,070
Allo stesso modo, è possibile modificare la dimensione di un elemento.

126
00:09:24,070 --> 00:09:30,740
È possibile espandere o contrassegnare la dimensione di un elemento applicando una trasformazione a

127
00:09:30,740 --> 00:09:36,470
tale proprietà utilizzando la trasformazione in scala per l'elemento.

128
00:09:36,470 --> 00:09:41,190
Vedremo esempi come ho detto nell'esercizio che segue.

129
00:09:41,190 --> 00:09:45,670
Quindi tutte le animazioni che descrivi all'interno dell'applicazione Angular

130
00:09:45,670 --> 00:09:49,590
all'interno della direttiva componente utilizzando la proprietà animazioni

131
00:09:49,590 --> 00:09:54,620
ruoteranno attorno agli stati e alle transizioni tra gli stati.

132
00:09:54,620 --> 00:09:58,350
Quando si parla di stati e transizioni, ci sono alcuni

133
00:09:58,350 --> 00:10:03,400
stati speciali che dobbiamo considerare quando definiamo queste transizioni.

134
00:10:03,400 --> 00:10:06,810
Uno di questi stati è chiamato come uno stato vuoto.

135
00:10:06,810 --> 00:10:09,580
E elemento che non è sullo schermo.

136
00:10:09,580 --> 00:10:13,240
Un elemento o una vista particellare che non è collegato alla vista

137
00:10:13,240 --> 00:10:15,880
sarà considerato nello stato vuoto.

138
00:10:15,880 --> 00:10:18,510
Quindi, quando l'elemento appare nella vista,

139
00:10:18,510 --> 00:10:23,940
che se è collegato ad esempio, l'elemento transizioni

140
00:10:23,940 --> 00:10:29,590
dallo stato vuoto in uno degli stati esistenti di quell'elemento.

141
00:10:29,590 --> 00:10:30,410
Quindi, in tal caso,

142
00:10:30,410 --> 00:10:35,680
puoi definire una transizione dal passaggio dal vuoto a un dato stato.

143
00:10:35,680 --> 00:10:40,580
Allo stesso modo, hai anche un altro stato chiamato come uno stato jolly o

144
00:10:40,580 --> 00:10:45,870
è definito da stella, il che significa che non ti interessa quale stato è.

145
00:10:45,870 --> 00:10:48,464
Quindi, se hai bisogno di definire una transizione puoi dire,

146
00:10:48,464 --> 00:10:52,832
se stai passando da uno stato vuoto allo stato stella, il che significa da stato vuoto a qualsiasi

147
00:10:52,832 --> 00:10:58,260
altro stato che stai passando, puoi applicare una particolare trasformazione.

148
00:10:58,260 --> 00:11:02,970
Quindi questi sono i due modi speciali per definire determinati stati

149
00:11:02,970 --> 00:11:07,130
quando definisci la tua animazione all'interno del decoratore del componente.

150
00:11:08,570 --> 00:11:13,430
Quindi, in particolare, ci sono un paio di modi per

151
00:11:13,430 --> 00:11:18,410
descrivere le transizioni che sono di particolare interesse per il corso.

152
00:11:18,410 --> 00:11:23,050
Una transizione dallo stato vuoto a qualsiasi stato può essere descritta semplicemente usando i

153
00:11:23,050 --> 00:11:27,876
due punti enter, invece di dire nullo freccia stella.

154
00:11:27,876 --> 00:11:32,520
Quindi vedrete che useremo la freccia

155
00:11:32,520 --> 00:11:34,610
per descrivere le transizioni tra lo stato.

156
00:11:34,610 --> 00:11:40,540
Quindi questa è la sintassi che mi vedrai usare quando costruisco le transizioni.

157
00:11:40,540 --> 00:11:41,260
Allo stesso modo, quindi

158
00:11:41,260 --> 00:11:46,700
un vuoto per qualsiasi altro stato può essere descritto semplicemente usando i due punti enter.

159
00:11:46,700 --> 00:11:50,060
Quindi il che significa che questa vista sta entrando

160
00:11:50,060 --> 00:11:52,760
nella vista che viene disposta sullo schermo.

161
00:11:52,760 --> 00:11:56,190
Allo stesso modo, una transizione da qualsiasi stato allo stato vuoto, il

162
00:11:56,190 --> 00:12:00,130
che significa che stai rimuovendo quell'elemento dalla vista.

163
00:12:00,130 --> 00:12:05,510
Questo sarebbe anche, potrebbe essere specificato come congedo di due punti,

164
00:12:05,510 --> 00:12:09,400
il che significa che questo elemento sta partendo da quella particolare vista.

165
00:12:09,400 --> 00:12:13,860
Così mi vedrete usare due punti entrare e due punti lasciare anche dove ho descritto

166
00:12:14,970 --> 00:12:21,130
le transizioni nel secondo esercizio che vedrete in questa lezione.

167
00:12:21,130 --> 00:12:26,945
Quindi, con questa rapida comprensione delle animazioni in angolare.

168
00:12:26,945 --> 00:12:29,935
Diamo un'occhiata a come scriviamo effettivamente il codice.

169
00:12:29,935 --> 00:12:35,873
E per farlo, passeremo agli esercizi in cui vi illustriamo,

170
00:12:35,873 --> 00:12:40,494
come usiamo questa conoscenza che abbiamo appena acquisito su come

171
00:12:40,494 --> 00:12:45,777
le animazioni sono descritte in angolare per scrivere il codice di salto di tipo per la

172
00:12:45,777 --> 00:12:49,458
costruzione e l'applicazione delle animazioni per

173
00:12:49,458 --> 00:12:53,830
vari elementi all'interno delle nostre viste di i nostri componenti.

174
00:12:53,830 --> 00:13:00,309
[ MUSIC]