Animation

Easing curve lab

Easing curve lab: Sechs Bewegungskurven lassen Punkte von A nach B gegen einen gleichmäßig laufenden Takt antreten; Spuren und Livewerte zeigen Beschleunigung, Abbremsen und Überschwingen. Eine gewählte Kurve spielt erneut ab.

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.

Easing curve lab verwenden

Easing curve lab verwendet das Vorschauformat „breit“ mit der Theme-Einstellung „hell/dunkel“.

Vorschau anpassen

Diese Einstellungen werden an die Demo übergeben. Standardwerte und Grenzen gelten für die Vorschau; die vollständige Props-API steht in der Implementierung.

Einstellung	Typ	Standardwert	Vorschaugrenzen
`title`	`text`	`How should it land?`	Bis zu 48 Zeichen
`selected`	`select`	`expo-out`	Optionen: linear, ease-in-out, expo-out, back-out, bounce, elastic
`duration`	`number`	`1100`	Von 300 bis 2400; Schrittweite 50
`accent`	`color`	`#1F45FF`	Keine weitere Grenze in den Metadaten.
`trails`	`boolean`	`true`	Keine weitere Grenze in den Metadaten.
`loop`	`boolean`	`true`	Keine weitere Grenze in den Metadaten.

Für welche Frameworks ist Easing curve lab verfügbar?

Easing curve lab ist für React, Vue, Svelte, Astro, HTML verfügbar. Die Live-Vorschau verwendet React; die folgenden Quellcode-Beobachtungen beziehen sich auf index.tsx. Prüfe die gewählte Portierung auf die benötigten Interaktionen.

Welche Abhängigkeiten hat Easing curve lab?

Die React-Metadaten nennen keine zusätzlichen npm-Abhängigkeiten neben React.

Welche Details zur Barrierefreiheit sind in Easing curve lab erkennbar?

Der React-Quellcode von Easing curve lab enthält: native Elemente (button); Attribute und Ereignisbehandler (aria-checked, aria-hidden, aria-label, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, tabIndex); explizite Rollen (radio, radiogroup, slider). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Easing curve lab reduzierte Bewegung?

Easing curve lab liest die Bewegungseinstellung im React-Quellcode über matchMedia(prefers-reduced-motion). Prüfe die vollständige Implementierung, gemeinsame Stile und die gewählte Portierung mit aktivierter Bewegungsreduktion; diese Beobachtungen belegen keinen vollständigen Animationsstopp.

Verbinde deinen Agenten

Verwandte offene Komponenten

Standbild der UI-Komponente Archetype morph shape von Fieldbook aus der Kategorie Animation.

2917Archetype morph shapeAnimationEine Form verwandelt sich in einen Button, Schalter, Schieberegler, eine Karte und ein Kontrollkästchen, während Liveanzeigen ihre Breite, Höhe, ihren Eckenradius und ihre Bestandteile wiedergeben.

Standbild der UI-Komponente Easing preview tile von Fieldbook aus der Kategorie Animation.

1772Easing preview tileAnimationEine Kachel, die unter jeder von Ihnen ausgewählten Beschleunigungskurve die gleiche Skalierung abspielt, wobei die Kurve daneben gezeichnet wird und eine Markierung synchron darauf verläuft.

Standbild der UI-Komponente Spring easing toggle von Fieldbook aus der Kategorie Animation.

1808Spring easing toggleAnimationEine Kachel, die zwischen zwei Stopps auf einer Federkurve gleitet, die in einen einfachen CSS-Übergang eingebettet ist, wobei die generierte Kurve daneben dargestellt wird.

Standbild der UI-Komponente Interruptible hover swell von Fieldbook aus der Kategorie Animation.

1780Interruptible hover swellAnimationEine Kachel, deren zweistufiges Hover-Anschwellen immer bei ihrer aktuellen Größe beginnt, sodass sie beim Ein- und Ausschalten des Zeigers niemals einrastet.

Standbild der UI-Komponente Resonant sand plate von Fieldbook aus der Kategorie Animation.

2916Resonant sand plateAnimationFeiner Sand auf einer schwingenden Stahlplatte springt aus den bewegten Bereichen und sammelt sich entlang der ruhigen Linien, sodass bei jedem Tonwechsel eine neue Figur entsteht.

Standbild der UI-Komponente Burst particle emitter von Fieldbook aus der Kategorie Animation.

1672Burst particle emitterAnimationUmhüllt jedes Element und feuert einen gestaffelten Fächer kleiner Flecken von einer ausgewählten Kante ab, beim Klicken, in einer Schleife oder beim ersten Scrollen in die Ansicht.