Animation

Morphing icon loop

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

Syncing changes

Morphing icon loop verwenden

Teste die Vorschau mit Maus und Tastatur. Prüfe den sichtbaren Fokus und das Layout auf schmalen Bildschirmen in deiner eigenen Seite. Nenne deinem Agenten die Nummer oder den Bezeichner, um diese Komponente abzurufen.

Eigenschaften: intervalSeconds, morphSeconds, size, advanceOnClick

Welche Frameworks sind verfügbar?

Der Katalog enthält diese Versionen: react, vue, svelte, astro, html. Die Vorschau auf dieser Seite verwendet React.

Wie greife ich auf die Implementierung zu?

Code, Framework-Versionen und Installationsbefehle sind im Arbeitsbereich oben verfügbar.

Verbinde deinen Agenten

Ähnliche Komponenten

2227Shape toggle morph iconAnimationEin einzelnes gefülltes Symbol wechselt nur dann zwischen zwei Formen, wenn darauf geklickt wird, wobei seine Umrisse direkt von einer Silhouette in die andere übergehen und seine Farbe entsprechend überblendet und dann gehalten wird, bis erneut geklickt wird.

1766Color blend compareAnimationZwei Farbfelder durchlaufen dasselbe Farbpaar, eines gemischt mit rohen Kanalwerten und eines mit linearem Licht, und zeigen den Rückgang, den ein einfacher Übergang verursacht.

1782Keyframe morph loopAnimationEin Quadrat, das eine Schleifenroutine aus Wachsen, Drehen und Runden zu einem Kreis durchführt und dabei jede Pose beibehält, da die Timing-Stopps ungleichmäßig sind.

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

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.

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.