Zum Inhalt springen
Fieldbook
Menü
Anmelden
DE

Animation

Archetype morph shape

Archetype morph shape: Eine 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.

Archetype morph shape verwenden

Archetype morph shape 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.

EinstellungTypStandardwertVorschaugrenzen
accentcolor#1F45FFKeine weitere Grenze in den Metadaten.
detailcolor#EEEAE2Keine weitere Grenze in den Metadaten.
holdnumber1.1Von 0.4 bis 4; Schrittweite 0.1
morphnumber0.9Von 0.3 bis 2.5; Schrittweite 0.1
readoutsbooleantrueKeine weitere Grenze in den Metadaten.
autoplaybooleantrueKeine weitere Grenze in den Metadaten.
Für welche Frameworks ist Archetype morph shape verfügbar?

Archetype morph shape 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 Archetype morph shape?

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

Welche Details zur Barrierefreiheit sind in Archetype morph shape erkennbar?

Der React-Quellcode von Archetype morph shape enthält: Attribute und Ereignisbehandler (aria-hidden, aria-label, aria-readonly, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, tabIndex); explizite Rollen (slider). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Archetype morph shape reduzierte Bewegung?

Archetype morph shape 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 Easing curve lab von Fieldbook aus der Kategorie Animation.
2918Easing curve labAnimationSechs 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.
Standbild der UI-Komponente Morphing icon toggle von Fieldbook aus der Kategorie Animation.
2193Morphing icon toggleAnimationEin kleines Symbol verändert seinen Umriss in einer stetigen Schleife kontinuierlich zwischen zwei Formen und zwei Farben.
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 Composable Reveal von Fieldbook aus der Kategorie Animation.
1676Composable RevealAnimationEin Reveal-Wrapper, dessen Schiebe-, Fade-, Zoom- und Defokussierungsteile jeweils eingeschaltet und zu einem einzigen Federübergang kombiniert werden können.
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 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.