Keyframe e animazioni sfalsate
Creare animazioni complesse e sfalsate
Keyframe e animazioni sfalsate è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.
Animazioni in più passaggi
Le transizioni semplici passano da A a B. Per i movimenti in più passaggi, come rimbalzi, pulsazioni e variazioni graduali di colore, Angular offre keyframes; per animare molti elementi in sequenza offre invece stagger.
La funzione keyframes
keyframes accetta un array di passaggi style, ciascuno con un offset da 0 a 1 che ne indica la posizione lungo la durata.
animate('1s', keyframes([
style({ opacity: 0, offset: 0 }),
style({ opacity: 0.5, offset: 0.3 }),
style({ opacity: 1, offset: 1 })
]))Capire offset
offset è la frazione della durata totale. 0 indica l'inizio, 1 la fine. Gli offset devono aumentare lungo l'array.
Un effetto rimbalzo
I keyframe permettono di superare temporaneamente la posizione finale e poi stabilizzarsi, creando un effetto rimbalzo.
keyframes([
style({ transform: 'translateY(0)', offset: 0 }),
style({ transform: 'translateY(-20px)', offset: 0.5 }),
style({ transform: 'translateY(0)', offset: 1 })
])Omettere gli offset
Se omette offset, Angular distribuisce uniformemente i keyframe lungo la durata.
keyframes([
style({ opacity: 0 }),
style({ opacity: 1 })
])La funzione query
Per animare i figli di un host, utilizzi query per selezionarli all'interno di una transizione.
transition('* => *', [
query(':enter', [
style({ opacity: 0 })
])
])La funzione stagger
stagger applica uno scarto temporale tra l'animazione di ciascun elemento selezionato, creando un effetto a cascata.
query(':enter', [
style({ opacity: 0 }),
stagger(100, [
animate('300ms', style({ opacity: 1 }))
])
])Applicare stagger a un elenco
Combini query e stagger in un trigger sul contenitore dell'elenco, così gli elementi appaiono gradualmente uno dopo l'altro.
trigger('listAnim', [
transition('* => *', [
query(':enter', [
style({ opacity: 0 }),
stagger(80, animate('250ms', style({ opacity: 1 })))
], { optional: true })
])
])Il flag opzionale
Passi { optional: true } a query per evitare errori quando non esistono elementi corrispondenti.
Stagger negativo
Un valore negativo in stagger inverte l'ordine, animando prima gli ultimi elementi; è utile per le cascate in uscita.
stagger(-50, animate('200ms', style({ opacity: 0 })))Nota sulle prestazioni
Applicare stagger a molti elementi può essere oneroso. Mantenga brevi le durate dei singoli elementi e preferisca transform/opacity per mantenere le animazioni sulla GPU.
Controllo rapido
Verifichi la Sua comprensione dei keyframe e dello stagger.
Riepilogo
Ha imparato che keyframes definisce movimenti in più passaggi usando valori offset, mentre query + stagger animano molti elementi a cascata. Utilizzi { optional: true } per maggiore sicurezza e preferisca proprietà adatte alla GPU.
Domande Frequenti
La lezione «Keyframe e animazioni sfalsate» è gratuita?
Sì — il testo completo di «Keyframe e animazioni sfalsate» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.
Cosa imparerò in «Keyframe e animazioni sfalsate»?
Creare animazioni complesse e sfalsate Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Angular Academy?
Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Keyframe e animazioni sfalsate»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Angular Academy?
Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Nozioni di base sulle animazioni: trigger e state
- Transizioni e temporizzazione
- Animazioni di entrata e uscita
- Keyframe e animazioni sfalsate