Images clés et décalage progressif
Créez des animations complexes et décalées
Images clés et décalage progressif est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Animations en plusieurs étapes
Les transitions simples vont de A à B. Pour les mouvements en plusieurs étapes (rebond, pulsation, balayage de couleur), Angular propose keyframes ; pour animer de nombreux éléments les uns après les autres, il propose stagger.
La fonction keyframes
keyframes reçoit un tableau d’étapes style, chacune ayant un offset compris entre 0 et 1 qui indique sa position dans la durée.
animate('1s', keyframes([
style({ opacity: 0, offset: 0 }),
style({ opacity: 0.5, offset: 0.3 }),
style({ opacity: 1, offset: 1 })
]))Comprendre offset
offset représente la fraction de la durée totale. 0 correspond au début et 1 à la fin. Les valeurs de offset doivent augmenter dans le tableau.
Un effet de rebond
Les images clés vous permettent de dépasser légèrement la position finale, puis de vous y stabiliser pour créer un rebond.
keyframes([
style({ transform: 'translateY(0)', offset: 0 }),
style({ transform: 'translateY(-20px)', offset: 0.5 }),
style({ transform: 'translateY(0)', offset: 1 })
])Omettre les offsets
Si vous omettez offset, Angular répartit uniformément les images clés sur toute la durée.
keyframes([
style({ opacity: 0 }),
style({ opacity: 1 })
])La fonction query
Pour animer les enfants d’un hôte, utilisez query afin de les sélectionner dans une transition.
transition('* => *', [
query(':enter', [
style({ opacity: 0 })
])
])La fonction stagger
stagger applique un décalage temporel entre les animations de chaque élément sélectionné, ce qui crée un effet en cascade.
query(':enter', [
style({ opacity: 0 }),
stagger(100, [
animate('300ms', style({ opacity: 1 }))
])
])Échelonner une liste
Combinez query et stagger dans un déclencheur placé sur le conteneur de la liste afin que les éléments apparaissent progressivement, l’un après l’autre.
trigger('listAnim', [
transition('* => *', [
query(':enter', [
style({ opacity: 0 }),
stagger(80, animate('250ms', style({ opacity: 1 })))
], { optional: true })
])
])L’indicateur facultatif
Transmettez { optional: true } à query afin que l’animation ne génère pas d’erreur lorsqu’aucun élément correspondant n’existe.
Échelonnement négatif
Une valeur négative dans stagger inverse l’ordre : les derniers éléments sont animés en premier, ce qui est utile pour les sorties en cascade.
stagger(-50, animate('200ms', style({ opacity: 0 })))Remarque sur les performances
Échelonner de nombreux éléments peut être coûteux. Gardez les durées par élément courtes et privilégiez transform/opacity pour conserver les animations sur le GPU.
Vérification rapide
Vérifiez votre compréhension des images clés et de l’échelonnement.
Récapitulatif
Vous avez appris que keyframes définit des mouvements en plusieurs étapes à l’aide de valeurs offset, tandis que query et stagger animent de nombreux éléments en cascade. Utilisez { optional: true } par sécurité et privilégiez les propriétés adaptées au GPU.
Questions Fréquemment Posées
La leçon « Images clés et décalage progressif » est-elle gratuite ?
Oui — le texte complet de « Images clés et décalage progressif » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Images clés et décalage progressif » ?
Créez des animations complexes et décalées Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Images clés et décalage progressif » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Bases des animations : trigger et state
- Transitions et minutage
- Animations d’entrée et de sortie
- Images clés et décalage progressif