Animation

Morphing icon loop

Une seule icône remplie se remodèle continuellement en icône suivante dans une courte liste, son contour s'écoulant doucement d'une silhouette à l'autre tandis que sa couleur de remplissage change pour correspondre.

Syncing changes

Utiliser Morphing icon loop

Testez l’aperçu avec la souris et le clavier, puis vérifiez la visibilité du focus et la mise en page sur un écran étroit. Indiquez le numéro ou l’identifiant du composant à votre agent de programmation.

Propriétés: intervalSeconds, morphSeconds, size, advanceOnClick

Quels frameworks sont disponibles ?

Le catalogue propose ces versions : react, vue, svelte, astro, html. L’aperçu de cette page utilise React.

Comment accéder à l’implémentation ?

Le code, les versions et les commandes d’installation sont disponibles dans le panneau ci-dessus.

Connectez votre agent

Composants proches

2227Shape toggle morph iconAnimationUne seule icône remplie bascule entre deux formes uniquement lorsque vous cliquez dessus, son contour passant directement d'une silhouette à l'autre et sa couleur se fondant pour correspondre, puis maintenue jusqu'à ce que vous cliquiez à nouveau.

1766Color blend compareAnimationDeux échantillons bouclent entre la même paire de couleurs, l'un mélangé avec des valeurs de canal brutes et l'autre avec une lumière linéaire, montrant le creux provoqué par une transition simple.

1782Keyframe morph loopAnimationUn carré qui exécute une routine en boucle consistant à grandir, tourner et arrondir en cercle, en se tenant à chaque pose car les arrêts de timing sont inégaux.

2193Morphing icon toggleAnimationUne petite icône transforme continuellement son contour entre deux formes et deux couleurs sur une boucle régulière.

1791Orbiting badgesAnimationPetits badges répartis uniformément autour d'une ou deux pistes circulaires, chaque anneau tournant à sa propre vitesse et direction tandis que les badges restent droits.

1792Path followerAnimationUne tuile arrondie qui parcourt une piste en spirale enroulée tandis que la piste elle-même passe devant elle, puis revient au début.