Animation

Easing curve lab

Easing curve lab: Six courbes d’accélération font courir des points de A à B face à une horloge régulière, avec des traînées et des valeurs en direct qui montrent accélérations, ralentissements et dépassements ; choisissez une courbe pour la rejouer.

How should it land?

t 0.00 · 1100 ms · expo-out

linear

ease-in-out

expo-out

back-out

bounce

elastic

Pick a curve to replay it. Drag along a track to scrub time.

Utiliser Easing curve lab

Easing curve lab utilise le format d’aperçu « large » avec le thème « clair/sombre ».

Personnaliser l’aperçu

Ces réglages sont transmis à la démo. Les valeurs et limites décrivent l’aperçu ; consultez l’implémentation pour connaître l’ensemble des props.

Réglage	Type	Valeur initiale	Limites de l’aperçu
`title`	`text`	`How should it land?`	Jusqu’à 48 caractères
`selected`	`select`	`expo-out`	Options : linear, ease-in-out, expo-out, back-out, bounce, elastic
`duration`	`number`	`1100`	De 300 à 2400 ; pas de 50
`accent`	`color`	`#1F45FF`	Aucune autre limite dans les métadonnées.
`trails`	`boolean`	`true`	Aucune autre limite dans les métadonnées.
`loop`	`boolean`	`true`	Aucune autre limite dans les métadonnées.

Quels frameworks sont disponibles pour Easing curve lab ?

Easing curve lab est disponible pour React, Vue, Svelte, Astro, HTML. L’aperçu utilise React ; les observations sur le code concernent index.tsx. Vérifiez les interactions dans le portage choisi avant de vous y fier.

Quelles sont les dépendances de Easing curve lab ?

Les métadonnées React n’indiquent aucune dépendance npm supplémentaire à React.

Quels détails d’accessibilité sont visibles dans Easing curve lab ?

Le code React de Easing curve lab contient : éléments natifs (button); attributs et gestionnaires (aria-checked, aria-hidden, aria-label, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, tabIndex); rôles explicites (radio, radiogroup, slider). Il s’agit d’observations du code. Vérifiez les noms accessibles, l’ordre du focus et le comportement au clavier dans la page assemblée.

Comment Easing curve lab gère-t-il la réduction des animations ?

Easing curve lab lit la préférence de mouvement dans son code React via matchMedia(prefers-reduced-motion). Vérifiez l’implémentation complète, les styles partagés et le portage choisi avec la réduction des animations activée ; ces observations ne garantissent pas l’arrêt de toutes les animations.

Connectez votre agent

Composants ouverts similaires

Image fixe du composant Archetype morph shape de Fieldbook, dans la catégorie Animation.

2917Archetype morph shapeAnimationUne forme se transforme en bouton, interrupteur, curseur, carte et case à cocher, avec des mesures en direct de sa largeur, de sa hauteur, du rayon de ses angles et de ses éléments pendant la transformation.

Image fixe du composant Easing preview tile de Fieldbook, dans la catégorie Animation.

1772Easing preview tileAnimationUne tuile qui joue la même échelle sous n'importe quelle courbe d'assouplissement que vous choisissez, avec la courbe dessinée à côté et un marqueur qui la chevauche de manière synchronisée.

Image fixe du composant Spring easing toggle de Fieldbook, dans la catégorie Animation.

1808Spring easing toggleAnimationUne tuile qui glisse entre deux arrêts sur une courbe à ressort cuite dans une transition simple CSS, avec la courbe générée tracée à côté.

Image fixe du composant Interruptible hover swell de Fieldbook, dans la catégorie Animation.

1780Interruptible hover swellAnimationUne tuile dont le gonflement en deux étapes commence toujours à partir de sa taille actuelle, donc l'activation et la désactivation du pointeur ne la font jamais se casser.

Image fixe du composant Resonant sand plate de Fieldbook, dans la catégorie Animation.

2916Resonant sand plateAnimationDu sable fin sur une plaque d'acier qui vibre saute hors des zones agitées et se dépose le long des lignes immobiles, redessinant une nouvelle figure à chaque changement de note.

Image fixe du composant Burst particle emitter de Fieldbook, dans la catégorie Animation.

1672Burst particle emitterAnimationEnveloppe n'importe quel élément et déclenche un éventail décalé de petites taches à partir d'un bord choisi, lors d'un clic, sur une boucle ou la première fois qu'il défile dans la vue.