Guida · Lo stato
Le animazioni
Una ricetta con un nome, tre stili e un momento. Settantanove ricette, dieci famiglie, otto direzioni — e l’animazione non è una proprietà del blocco: è una cosa che gli si fa fare.
Dove siamo
Sai far scattare qualcosa quando un nodo entra nello schermo. Alla fine di questo capitolo quel qualcosa sarà un’animazione dichiarata, non una classe messa a mano.
Il gesto
Apri db.animations.json. Ogni ricetta ha name, type, target, e tre nomi di stile: initial, ending, behavior.
Nel uiState.effects di un blocco metti animate con il nome della ricetta e un trigger.
Salva, ricarica, scorri.
// db.animations.json — una ricetta
{
"name": "animate:fadeB",
"type": "animate",
"target": "self",
"initial": "fadeBStart",
"ending": "fadeEnd",
"behavior": "fadeBehaviour"
}I tre momenti
initial è come sta prima, ending è come sta dopo, behavior è come ci arriva — la transizione. Sono tre nomi di stili, quindi le animazioni non introducono un linguaggio nuovo: riusano il vocabolario che hai già.
La conseguenza è che una ricetta si modifica dove si modificano gli stili, e che un tema può cambiare come si muove una cosa senza toccare nessuna ricetta.
Una ricetta, in tre momenti
{
"name": "animate:fadeB",
"type": "animate",
"target": "self",
"initial": "fadeBStart",
"ending": "fadeEnd",
"behavior": "fadeBehaviour"
}Come la si aggancia
{ trigger: 'on:viewportEnter', animate: 'animate:fadeB' }La rosa dei venti
Le ricette non sono una manciata: sono settantanove. Dieci famiglie — fade, slide, reveal, zoom, flip, rotate, blur, skew, wipe, desaturate — nove delle quali per gli otto punti cardinali, più le varianti che una direzione non ce l’hanno.
Il nome dice DA DOVE si entra, non dove si va: animate:fadeBR entra da in basso a destra. La sigla è quella della rosa: T TR R BR B BL L TL.
Solo la partenza cambia con la direzione: arrivo e comportamento sono comuni alla famiglia. È il motivo per cui otto direzioni costano otto stili e non ventiquattro — e per cui cambiando fadeBehaviour cambi il modo in cui si muovono tutte e otto insieme.
Stati e ricette nascono da un’unica tabella nel pacchetto, non scritti due volte. Una ricetta cita tre stili per nome, e un nome sbagliato non dà errore: l’animazione semplicemente non parte.
zoom la rosa non ce l’ha, ed è una scelta misurata: su un riquadro 736×248 le sue otto direzioni producevano la stessa identica figura, spostata di quindici pixel in verticale. Otto nomi che dicono la stessa cosa sono peggio di uno, perché chi compone crede di scegliere.
E ogni partenza è invisibile — opacità zero, o ritagliata via. Un elemento che prima del trigger è soltanto spostato è a tutti gli effetti visibile: non si vede un ingresso, si vede la pagina storta che poi si raddrizza.
Come si compone un nome
animate:fadeBR → fadeBRStart + fadeBehaviour + fadeEnd
da dove come dove arrivaLe varianti senza direzione
animate:fade // sola opacita, nessuno spostamento animate:zoomIn animate:zoomOut animate:rotateCw animate:rotateCcw animate:blur
L’hover non si anima così
on:hover esiste, e per le animazioni non va usato. Il passaggio del mouse il browser lo sa già fare con una pseudo-classe, e appenderci una reazione costa un listener e un giro di stato per ottenere lo stesso risultato.
C’è anche una ragione più concreta: mouseenter non ha il gemello che lo annulla. Un’animazione agganciata lì parte, e quando il mouse esce non torna indietro. Per il passaggio del mouse si compone uno stile di interazione, come hoverShade.
Il catalogo contiene solo animazioni
Le ricette hanno un type, e il resolver scarta quello che non è animate. Sembra una guardia inutile finché non si prova a toglierla: senza, una riga di tipo diverso passerebbe da «ignorata» a «animazione con classi vuote».
Emettere un evento o lanciare un effetto non sono animazioni: sono azioni con un payload, e si dichiarano sull’istanza — nel uiState del blocco — non nel catalogo.
Quando non funziona
Metti in animate un nome che non c’è nel catalogo. Il blocco compare e basta: il resolver non trova la ricetta e la scarta.
Stessa cosa se una ricetta cita uno stile che non esiste: le classi risultanti sono vuote, la transizione avviene fra due stati identici, e non si vede niente. È il caso più insidioso, perché tutto sembra collegato.
Avanti
Lo stato è coperto. Da qui in avanti si esce dal sistema e lo si estende: componenti tuoi, resolver tuoi, effetti tuoi.