Motion design

Design d'animation de morphing d'interface

Un film de 14 secondes entièrement en code où une forme se transforme en lecteur, onglets et palette de commandes, chaque changement étant provoqué par un curseur à 120 BPM.

OpenDesignAdaptation en code et production

Officiel

Design d'animation de morphing d'interface14s · Motion design

Télécharger OpenDesign Rejoindre Discord

Une carte noire de lecteur de musique avec une vignette d'album en dégradé, une barre de progression et des symboles de lecture.

Une image issue du motion design

Conçu pour

Teasers animés de produitBoucles courtes qui montrent plusieurs états d'interface sans coupe entre les écrans.
Showreels de micro-interactionsSéquences qui présentent interrupteurs, curseurs, onglets et palettes comme une histoire continue.
Animation d'interface synchronisée à la musiquePièces où les actions du curseur tombent sur une grille rythmique fixe.

Points forts de l'animation

Une forme qui ne se coupe jamaisChaque état est une déformation du même conteneur, pas un changement de scène.
Changements provoqués par le curseurChaque transition commence par une action visible du pointeur.
Une boucle qui se refermeL'image finale correspond à la première, la lecture se répète donc proprement.

Aperçu de l'animation de morphing d'interface

Une vidéo animée de 14 secondes avec musique, adaptée par OpenDesign. Modèle OpenDesign ↗ · Original de @twoclipping ↗

Afficher l'aperçu Partager

Comment une seule forme porte tout le film

Le film dure 14 secondes à 120 BPM, ce que les notes sources découpent en 7 mesures. Une forme unique commence comme un bouton Generate, puis devient un loader, une coche, une dynamic island, un lecteur de musique, un curseur de volume, un interrupteur, un indicateur d'onglet, un graphique, une palette de commandes et un toast avant de revenir au bouton.

Le compromis est que chaque état doit être atteignable depuis le précédent en redimensionnant et en rarrondissant le même corps. Le contenu qui ne tient pas dans ce changement de forme doit être supprimé ou repensé.

Étapes de la grille rythmique et ce que chacune montre
Étape	Changement visible	Implication de design
Bouton, loader, coche	Le bouton Generate devient un état de progression, puis une confirmation.	Une requête, une attente et un résultat se lisent comme un seul objet plutôt que trois écrans.
Dynamic island vers lecteur de musique	Une pilule compacte s'étend en carte sombre avec vignette d'album, titre, barre de progression et commandes de lecture.	La croissance de la pilule à la carte montre comment un même conteneur peut porter un état d'aperçu et un état détaillé.
Curseur, interrupteur, onglets	Un curseur de volume s'étire au-delà de son maximum, puis un interrupteur et une pilule d'onglets Day / Week / Month suivent.	Les petits contrôles reprennent le même langage arrondi : le changement se ressent davantage dans le mouvement que dans le style.
Graphique, palette, toast	Un graphique se dessine, une palette tape « frame », et un toast referme la boucle.	Les états les plus denses arrivent tard, une fois que le spectateur a compris la logique de la forme.

Lire les images du lecteur, des onglets et de la palette

Trois images capturées montrent à quel point la même forme peut changer d'aspect. Dans le lecteur, une carte noire arrondie porte une vignette en dégradé, « motion study 02 », une barre de progression à 0:49 avec −2:09 restantes, et les icônes précédent, lecture et suivant. Dans l'image des onglets, une pilule blanche contient Day, Week et Month, avec un indicateur noir derrière Day.

Dans la palette, le mot tapé « frame » mène à deux résultats, « Frame rate · 60fps » et « Every frame is code », le premier étant mis en évidence.

L'état du lecteur de musique : le temps écoulé et restant se trouve sous la barre de progression, le curseur s'approchant des commandes.

Des états de lecture lisibles

Les libellés de temps écoulé et restant sont placés sous la barre de progression. Ce sont des contenus d'interface illustratifs dans un film de 14 secondes, et non la durée de la vidéo du showcase. Gardez ces deux libellés lisibles si vous adaptez le lecteur à un canevas plus petit.

L'indicateur d'onglet est un objet en mouvement

La pilule noire Day est posée dans une piste blanche pendant que le curseur survole Month. Comme l'indicateur est une forme distincte, il peut glisser et s'étirer entre les libellés au lieu de simplement changer de surbrillance.

Le texte de la palette fait écho au film

Les résultats « Frame rate · 60fps » et « Every frame is code » parlent de la pièce elle-même. Reprenez cette idée, mais remplacez les textes par le vocabulaire de votre propre produit.

Construction pilotée par le temps et ses compromis

Les notes sources décrivent une seule fonction render(t) qui dessine l'image entière à partir du temps de la timeline principale. Chaque valeur visible est une fonction pure de t, utilisant des courbes d'accélération, des ressorts ou des keyframes, et aucun état ne passe d'une image à l'autre. Les retours en arrière reproduisent donc des images identiques.

Cela rend l'export prévisible, mais exige davantage de l'auteur. Les interactions triviales avec des gestionnaires d'événements, comme le survol ou la saisie, doivent être écrites sous forme de keyframes temporisées.

Garder une seule horloge
La timeline principale GSAP est la seule horloge. Les calques lisent son temps courant au lieu de lancer leurs propres minuteurs.
Additionner les ressorts pour chaque changement
Les notes d'adaptation demandent des ressorts additionnés pour chaque changement, afin que les mouvements qui se chevauchent se fondent au lieu de redémarrer.
Laisser le curseur tout provoquer
Chaque changement d'état doit être précédé d'une action du pointeur. Sans cette règle, les morphings se lisent comme de la décoration plutôt que comme de l'interaction.

Source et périmètre

Il s'agit d'une refonte et adaptation en code officielle OpenDesign d'une animation publiée à l'origine par @twoclipping sur X. Elle est reconstruite en code à partir de la pièce publiée, et la bande-son de 14 secondes est une composition originale, non un audio de la source. Le crédit est une référence factuelle et n'implique aucune approbation de l'auteur original.

Il s'agit d'une étude animée rendue, non d'un produit d'interface utilisable. Le lecteur, le graphique et la palette dans le film ne répondent à aucune saisie. Le modèle provient d'un workflow vidéo OpenDesign proposé ; sa disponibilité dépend de la version installée.

Adapter le morphing à votre propre produit

Les notes suggèrent de remplacer les états dans la définition SHAPE et leurs contenus tout en gardant les trois règles : une forme qui ne se coupe jamais, des ressorts additionnés pour chaque changement, et un curseur derrière chaque changement. Commencez par lister les cinq états de produit que vous devez le plus montrer, puis ordonnez-les du plus petit au plus grand conteneur.

Gardez le premier et le dernier état identiques si vous voulez une boucle. Si vos états diffèrent beaucoup en taille, attendez-vous à des images intermédiaires étirées et ralentissez le tempo en conséquence.

Choisir moins d'états, mais plus forts

Le film montre une dizaine d'états en 14 secondes. Un teaser de produit avec quatre états laisse à chacun plus de temps à l'écran.

Changer le thème en un seul endroit

Les textes, la palette et le timing sont des constantes en haut de la référence : modifier le canevas gris chaud ou les composants noirs est donc une petite retouche.

Éviter les effets canvas lourds

Les notes avertissent que les grands dégradés et le bruit par pixel rendent chaque image capturée coûteuse, ce qui ralentit l'export MP4.

Comment créer une animation de morphing d'interface dans OpenDesign

Télécharger et installer OpenDesign
Téléchargez l'application de bureau, installez-la et finalisez la configuration. Créez un projet pour votre design.
Télécharger OpenDesign
Définir la forme et ses états
Listez les états que votre conteneur unique doit traverser, du bouton compact à sa forme la plus grande. Décidez quelle action du pointeur déclenche chaque changement et fixez le tempo avant de dessiner quoi que ce soit.

Invite suggérée

Crée un film d'animation d'interface en boucle de 14 secondes sur un canevas gris clair chaud de 1920x1080. Utilise une seule forme arrondie noire et blanche qui ne subit jamais de coupe. À 120 BPM, fais-la passer d'un bouton Generate à un loader, une coche, un lecteur de musique avec barre de progression, une pilule d'onglets Day / Week / Month, puis une palette de commandes qui tape un mot court. Un curseur visible doit provoquer chaque changement. Fais en sorte que la dernière image corresponde à la première pour que la boucle soit parfaite. Utilise uniquement du texte d'exemple, sans données réelles ni commandes fonctionnelles.
Tout piloter par le temps
Demandez que chaque valeur visible soit calculée à partir du temps de la timeline, afin qu'un retour en arrière produise des images identiques. Gardez textes, palette et timing sous forme de constantes modifiables en un seul endroit.
Vérifier le son, la boucle et le rythme
Vérifiez que l'image finale est égale à la première, que les actions du curseur tombent sur les temps et que les états denses ne sont pas précipités. Utilisez uniquement un audio dont vous avez le droit de vous servir, ou gardez le film silencieux.
Exporter et obtenir un lien de partage
Exportez votre design finalisé, puis utilisez Partager dans OpenDesign pour obtenir un lien de partage. Ouvrez le lien dans une fenêtre de navigateur distincte et vérifiez que la version souhaitée ainsi que ses ressources sont disponibles avant de l'envoyer.