Animation

Burst particle emitter

Burst particle emitter: Umhü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.

Click to fire. Click again mid flight for a fresh fan.

Burst particle emitter verwenden

Burst particle emitter verwendet das Vorschauformat „Karte“ 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
`count`	`number`	`8`	Von 2 bis 20; Schrittweite 1
`radius`	`number`	`34`	Von 10 bis 90; Schrittweite 2
`spread`	`number`	`180`	Von 30 bis 360; Schrittweite 10
`duration`	`number`	`0.8`	Von 0.2 bis 2; Schrittweite 0.05
`accent`	`color`	`#F5C542`	Keine weitere Grenze in den Metadaten.
`side`	`select`	`top`	Optionen: top, bottom, left, right

Für welche Frameworks ist Burst particle emitter verfügbar?

Burst particle emitter 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 Burst particle emitter?

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

Welche Details zur Barrierefreiheit sind in Burst particle emitter erkennbar?

Der React-Quellcode von Burst particle emitter 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 Burst particle emitter reduzierte Bewegung?

Burst particle emitter 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 Directional Slide In von Fieldbook aus der Kategorie Animation.

1684Directional Slide InAnimationEine Enthüllung, die den Inhalt von einer der vier Seiten um einen festgelegten Abstand nach innen schiebt und es einer Feder ermöglicht, den ankommenden Inhalt aufzufangen.

Standbild der UI-Komponente Particle spray von Fieldbook aus der Kategorie Animation.

1728Particle sprayAnimationHalten Sie den Zeiger auf ein Bedienelement gedrückt, und überall dort, wo sich der Zeiger befindet, werden kleine Partikel versprüht, die sich jeweils in einem Bogen nach oben bewegen, sich drehen, dann abfallen und sich von selbst entfernen.

Standbild der UI-Komponente Ring bloom von Fieldbook aus der Kategorie Animation.

2211Ring bloomAnimationKonzentrische Lichtringe entstehen in der Mitte, schwellen nach außen an und verblassen, wobei jeder einzelne dem letzten hinterherhinkt und beim Klicken einen Ausbruch auslöst.

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 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 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.