[MUSIC]
Cerchiamo di ottenere una breve panoramica del supporto di animazione in angolare prima di andare e
provare la nostra mano a implementare effettivamente alcune animazioni nella nostra applicazione angolare.
Come ti rendi conto,
le animazioni stesse non si aggiungono alla funzionalità dell'applicazione Angular.
Quindi sorge la domanda, perché usare le animazioni?
Ora, se lo guardi dall'esperienza utente, o dalla
prospettiva di progettazione dell'interfaccia utente, allora inizi a vedere che le animazioni
hanno un significato e uno scopo per il loro uso in un'applicazione.
Il dare un feedback visivo all'utente sulle
cose che stanno accadendo all'interno della tua applicazione angolare.
Quindi puoi avere un'applicazione completamente priva di animazioni e
che fornisca ancora lo stesso insieme di funzionalità.
Quindi questo è qualcosa che dobbiamo tenere a mente
quando stiamo introducendo animazioni nella nostra applicazione angolare.
Le animazioni non sono necessarie o richieste, ma
aggiungono quella piccola spezia alla tua applicazione angolare, se mantieni quella vista nella
tua mente, ti avvicinerai all'animazione da una prospettiva completamente diversa.
È come non aggiungere troppo sale nei tuoi piatti solo perché il sale aggiunge gusto.
Per gran parte del sale rovina anche il tuo piatto.
La stessa cosa anche con le animazioni.
Troppe animazioni e finisci con un utente confuso.
Ma le animazioni, aggiunte sottilmente per dare suggerimenti agli utenti, o
dare un feedback visivo agli utenti, aggiungono un sacco di valore alla tua applicazione angolare.
Fortunatamente, il quadro materiale angolare che stiamo già utilizzando all'interno della
nostra applicazione angolare, viene fornito con il proprio set integrato di animazioni.
In effetti, questo è il motivo per cui abbiamo incluso il modulo di animazione del browser.
Nella nostra applicazione angolare proprio all'inizio perché il
materiale angolare sfrutta già il supporto dell'animazione che
angolare fornisce attraverso o la sua animazione.
Quindi la libreria dei materiali angolare
utilizza le animazioni suggerite fornite con il design del materiale.
Cose come, ad esempio, quando si fa clic su un pulsante,
gli effetti di ondulazione che si vedono sul pulsante e il sottile ingrandimento,
e il restringimento di diverse parti della vista, e così via.
Questi sono già suggeriti dall'approccio al design dei materiali, e
quindi il materiale angolare adotta già molte di queste cose.
Quindi, anche senza impegnarsi esplicitamente,
ottieni automaticamente alcune delle animazioni richieste nella
tua applicazione angolare semplicemente usando materiale angolare.
Ma supponiamo di voler aggiungere la tua spezia al mix.
Quindi, come ti avvicini alle animazioni in angolare?
Questo è ciò che vedremo rapidamente in questa lezione.
E poi passare all'esercizio in cui implementeremo fu e vedere se abbiamo
senso o se fanno la differenza nel modo in cui percepisci la tua applicazione angolare.
L' idea alla base del supporto di Angular per
le animazioni è che consente di creare animazioni con
prestazioni quasi native di ciò che otterrai con animazioni CSS pure.
Ora potresti immediatamente chiederti nella tua mente,
perché non usare solo animazioni CSS pure?
In effetti, puoi farlo anche tu, ma non c'è nulla che ti impedisca di usare
animazioni CSS pure all'interno della tua applicazione Angular.
Ma il vantaggio di utilizzare l'
approccio angolare per introdurre le animazioni è che angolare,
prima di tutto, sfrutta il supporto dell'API web-animations
supportata nelle versioni più moderne di tutti i browser.
Ora, quindi se la tua versione del browser supporta già l'API Web Animations,
Angular semplicemente sfrutta un inizio per
supportare le animazioni che includerai all'interno dell'applicazione Angular.
In caso contrario, è necessario utilizzare un polyfill
chiamato web-animations.min.js nella propria applicazione Angular.
Negli esercizi, inizieremo con l'ipotesi che stiamo prendendo di mira
i browser moderni, quindi non includo esplicitamente il polyfill.
Se decidi di farlo, la documentazione delle animazioni angolari
ti dice esplicitamente come compilarlo per indirizzare i browser più vecchi.
Quindi di nuovo, tornando alla domanda,
perché non usare l'animazione CSS pura piuttosto che usare l'animazione angolare?
Ora è qui che
il vantaggio di utilizzare l'animazione angolare all'interno dell'applicazione viene alla ribalta.
Il fatto che le animazioni angolari siano strettamente accoppiate
con il codice che scrivi per l'applicazione Angular.
E quindi, puoi attivare molte di queste animazioni legate
direttamente al modo in cui la tua applicazione angolare si sta evolvendo e
cosa sta succedendo all'interno della tua applicazione angolare.
Così puoi legarlo al ciclo di vita dei tuoi componenti.
Puoi legarlo nelle varie fasi di come la vista cambia se stessa
mentre stai eseguendo il rendering della vista.
E quindi quel vantaggio che si ottiene utilizzando la libreria di animazioni Angular,
invece di animazioni CSS pure, è qualcosa che vale la pena considerare.
Come ci avviciniamo alle animazioni in Angular?
Le animazioni stesse sono costruite intorno a stati e
transizioni tra stati nel quadro angolare, quindi
definiamo stati diversi, lo stato potrebbe essere qualsiasi cosa, ma
si desidera definire come uno stato dal punto di vista dell'animazione.
Qualsiasi cambiamento di stato che si desidera causare
può attivare l'effetto di animazione per entrare in immagine.
Quindi le transizioni lungo gli stati attiveranno il comportamento di animazione
all'interno dell'applicazione angolare.
Come vedremo nella prossima diapositiva dove vi mostrerò un esempio di
come è possibile utilizzare nastri e transizioni per attivare l'animazione.
Quindi l'aspetto di animazione della tua applicazione angolare
è definito all'interno del decoratore di componenti che usi all'interno dei tuoi componenti.
Quindi il decoratore del componente ha una proprietà colori animazioni che
userai per definire i valori trigger per le tue animazioni.
Quindi ho usato la parola grilletto.
Negli esercizi, vedrai come implementeremo i trigger per
le animazioni e come applicheremo i trigger a vari elementi del modello
e quindi attiveremo tali animazioni in determinate circostanze.
Inoltre, quando è necessario utilizzare le animazioni all'interno
dell'applicazione Angular, prima di tutto, è necessario importare il modulo di animazioni del browser.
Lo abbiamo già fatto nel nostro primo esercizio perché
il modulo di animazione del browser era richiesto per supportare il materiale angolare.
Ora, inoltre, quando stai implementando animazioni all'interno dei tuoi componenti.
Quindi avresti bisogno dell'aiuto di classi di raggio come trigger, stato,
stile, animate,
transizione, che devono essere importate dalla libreria di animazioni angolari.
E lo faremo all'interno di ogni componente che richiede l'uso di animazioni.
Come accennato nella diapositiva precedente, il comportamento di animazione nell'
applicazione Angular ruota attorno agli stati e alle transizioni tra gli stati.
Gli stati possono essere tutto ciò che si definisce come uno stato.
Come vedrete nell'esempio che segue nel primo esercizio dopo questa
lezione, siete stati definiti 2 stati chiamati mostrati e nascosti.
Dal nome dello stato
inizi automaticamente a indovinare cosa implicano questi due stati.
Ora, quando ci si sposta dallo stato mostrato allo stato nascosto, la transizione
dallo stato mostrato allo stato nascosto attiverà una sorta di animazione.
Quindi forse nasconderai un elemento all'interno della tua
vista cambiando l'opacità dell'elemento,
opacità che significa quanto è trasparente l'elemento e l'opacità di
uno significa che l'elemento è completamente opaco e visibile sullo schermo.
Se si imposta l'opacità su zero, l'elemento scompare completamente dallo schermo.
Non stiamo rimuovendo quell'elemento
dal semplicemente nascondendo quell'elemento cambiando la sua opacità.
Quindi, in questo modo sarebbe qualcosa che puoi innescare.
Allo stesso modo, è possibile modificare la dimensione di un elemento.
È possibile espandere o contrassegnare la dimensione di un elemento applicando una trasformazione a
tale proprietà utilizzando la trasformazione in scala per l'elemento.
Vedremo esempi come ho detto nell'esercizio che segue.
Quindi tutte le animazioni che descrivi all'interno dell'applicazione Angular
all'interno della direttiva componente utilizzando la proprietà animazioni
ruoteranno attorno agli stati e alle transizioni tra gli stati.
Quando si parla di stati e transizioni, ci sono alcuni
stati speciali che dobbiamo considerare quando definiamo queste transizioni.
Uno di questi stati è chiamato come uno stato vuoto.
E elemento che non è sullo schermo.
Un elemento o una vista particellare che non è collegato alla vista
sarà considerato nello stato vuoto.
Quindi, quando l'elemento appare nella vista,
che se è collegato ad esempio, l'elemento transizioni
dallo stato vuoto in uno degli stati esistenti di quell'elemento.
Quindi, in tal caso,
puoi definire una transizione dal passaggio dal vuoto a un dato stato.
Allo stesso modo, hai anche un altro stato chiamato come uno stato jolly o
è definito da stella, il che significa che non ti interessa quale stato è.
Quindi, se hai bisogno di definire una transizione puoi dire,
se stai passando da uno stato vuoto allo stato stella, il che significa da stato vuoto a qualsiasi
altro stato che stai passando, puoi applicare una particolare trasformazione.
Quindi questi sono i due modi speciali per definire determinati stati
quando definisci la tua animazione all'interno del decoratore del componente.
Quindi, in particolare, ci sono un paio di modi per
descrivere le transizioni che sono di particolare interesse per il corso.
Una transizione dallo stato vuoto a qualsiasi stato può essere descritta semplicemente usando i
due punti enter, invece di dire nullo freccia stella.
Quindi vedrete che useremo la freccia
per descrivere le transizioni tra lo stato.
Quindi questa è la sintassi che mi vedrai usare quando costruisco le transizioni.
Allo stesso modo, quindi
un vuoto per qualsiasi altro stato può essere descritto semplicemente usando i due punti enter.
Quindi il che significa che questa vista sta entrando
nella vista che viene disposta sullo schermo.
Allo stesso modo, una transizione da qualsiasi stato allo stato vuoto, il
che significa che stai rimuovendo quell'elemento dalla vista.
Questo sarebbe anche, potrebbe essere specificato come congedo di due punti,
il che significa che questo elemento sta partendo da quella particolare vista.
Così mi vedrete usare due punti entrare e due punti lasciare anche dove ho descritto
le transizioni nel secondo esercizio che vedrete in questa lezione.
Quindi, con questa rapida comprensione delle animazioni in angolare.
Diamo un'occhiata a come scriviamo effettivamente il codice.
E per farlo, passeremo agli esercizi in cui vi illustriamo,
come usiamo questa conoscenza che abbiamo appena acquisito su come
le animazioni sono descritte in angolare per scrivere il codice di salto di tipo per la
costruzione e l'applicazione delle animazioni per
vari elementi all'interno delle nostre viste di i nostri componenti.
[ MUSIC]