Zum Inhalt springen
Fieldbook
Menü
Anmelden
DE

Animation

Morphing icon toggle

Morphing icon toggle: Ein kleines Symbol verändert seinen Umriss in einer stetigen Schleife kontinuierlich zwischen zwei Formen und zwei Farben.

Morphing icon toggle verwenden

Morphing icon toggle verwendet das Vorschauformat „Inline“ mit der Theme-Einstellung „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
intervalSecondsnumber1Von 0.4 bis 3; Schrittweite 0.1
colorOnecolor#FFD34DKeine weitere Grenze in den Metadaten.
colorTwocolor#FF4D8DKeine weitere Grenze in den Metadaten.
Für welche Frameworks ist Morphing icon toggle verfügbar?

Morphing icon toggle 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 Morphing icon toggle?

Die React-Metadaten nennen diese zusätzlichen npm-Abhängigkeiten: motion.

Welche Details zur Barrierefreiheit sind in Morphing icon toggle erkennbar?

Der React-Quellcode von Morphing icon toggle enthält: Attribute und Ereignisbehandler (aria-hidden). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Morphing icon toggle reduzierte Bewegung?

Morphing icon toggle liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). Von der Einstellung abhängige Ausdrücke in index.tsx: morphSeconds: reduce ? REDUCED_MORPH_SECONDS : MORPH_SECONDS. 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 Morphing icon loop von Fieldbook aus der Kategorie Animation.
2192Morphing icon loopAnimationEin einzelnes gefülltes Symbol formt sich kontinuierlich in das nächste Symbol in einer kurzen Liste um, wobei seine Umrisse fließend von einer Silhouette zur nächsten übergehen, während sich seine Füllfarbe entsprechend ändert.
Standbild der UI-Komponente Orbiting badges von Fieldbook aus der Kategorie Animation.
1791Orbiting badgesAnimationKleine Abzeichen, die gleichmäßig um eine oder zwei kreisförmige Schienen verteilt sind, wobei sich jeder Ring mit seiner eigenen Geschwindigkeit und Richtung dreht, während die Abzeichen aufrecht bleiben.
Standbild der UI-Komponente Path follower von Fieldbook aus der Kategorie Animation.
1792Path followerAnimationEine abgerundete Kachel, die sich entlang einer spiralförmigen Bahn bewegt, während die Bahn selbst vor ihr einfährt und dann rückwärts zum Start zurückfährt.
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.
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.