L’outil secret pour exploser ton chiffre d'affaires en 2025 !
Principes et mise en œuvre (partie 1)
Contrairement à basé sur la chronologie animations, qui racontent des histoires sur une séquence d’événements, ou interaction Animations qui sont déclenchées lorsque quelqu’un touche quelque chose, animations ambiantes sont le genre de mouvements passifs que vous pourriez ne pas remarquer au début. Mais, ils donnent à un design vivant de manière subtile.
Dans une animation ambiante, les éléments peuvent être subtilement transférés entre les couleurs, se déplacer lentement ou déplacer progressivement la position. Les éléments peuvent apparaître et disparaître, changer la taille, ou ils peuvent tourner lentement.
Les animations ambiantes ne sont pas intrusives; Ils ne demandent pas l’attention, ne sont pas distrayants et n’interfèrent pas avec ce que quelqu’un essaie de réaliser lorsqu’il utilise un produit ou un site Web. Ils peuvent également être ludiques, faire sourire quelqu’un lorsqu’ils les aperçoivent. De cette façon, des animations ambiantes Ajoutez de la profondeur à la personnalité d’une marque.
Pour illustrer le concept d’animations ambiantes, j’ai recréé la couverture d’un Dessiner rapidement McGraw bande dessinée (PDF) en tant qu’animation CSS / SVG. La bande dessinée a été publiée par Charlton Comics en 1971 et, étant imprimée, ces personnages n’ont pas bougé, ce qui en fait des candidats idéaux pour se transformer en animations ambiantes.
POUR VOTRE INFORMATION: Artiste de couverture original Rayon de rayon était surtout connu pour son travail dessinant des personnages Hanna-Barbera pour Charlton Comics dans les années 1970. Ray est décédé en 2000 à l’âge de 92 ans. Il a survécu à Charlton Comics, qui a fait faillite en 1986, et DC Comics a acquis ses personnages.
Conseil: Vous pouvez voir l’animation ambiante complète Code sur Codepen.
Choisir des éléments à animer
Tout sur une page ou dans un graphique ne doit pas bouger, et une partie de la conception d’une animation ambiante est Savoir quand s’arrêter. L’astuce consiste à choisir des éléments qui se prêtent naturellement à un mouvement subtil, plutôt que de forcer le mouvement dans des endroits où il n’appartient pas.
Indices de mouvement naturel
Lorsque je décide quoi animer, je cherche des indices de mouvement naturels et je pense à quand quelque chose bougerait naturellement dans le monde réel. Je me demande: «Cette chose a-t-elle du poids?», «Est-ce flexible?»et «Est-ce que ça bougerait dans la vraie vie?» Si la réponse est « Oui, » Cela se sentira probablement bien s’il bouge. Il y a plusieurs indices de mouvement dans les illustrations de la couverture de Ray Dirgo.
Par exemple, le tuyau de Peace Pipe qui souffle rapidement a deux plumes qui y sont suspendues. Ils se balancent légèrement à gauche et à droite par trois degrés à mesure que le tuyau se déplace, tout comme le ferait de vraies plumes.
#quick-draw-pipe {
animation: quick-draw-pipe-rotate 6s ease-in-out infinite alternate;
}
@keyframes quick-draw-pipe-rotate {
0% { transform: rotate(3deg); }
100% { transform: rotate(-3deg); }
}
#quick-draw-feather-1 {
animation: quick-draw-feather-1-rotate 3s ease-in-out infinite alternate;
}
#quick-draw-feather-2 {
animation: quick-draw-feather-2-rotate 3s ease-in-out infinite alternate;
}
@keyframes quick-draw-feather-1-rotate {
0% { transform: rotate(3deg); }
100% { transform: rotate(-3deg); }
}
@keyframes quick-draw-feather-2-rotate {
0% { transform: rotate(-3deg); }
100% { transform: rotate(3deg); }
}
Atmosphère, pas d’action
Je choisis souvent des éléments ou des détails décoratifs qui ajoutent à l’ambiance mais ne se battent pas pour l’attention.
Ici, le chef se lève lentement et subtilement alors qu’il souffle sur sa pipe.
#chief {
animation: chief-rise-fall 3s ease-in-out infinite alternate;
}
@keyframes chief-group-rise-fall {
0% { transform: translateY(0); }
100% { transform: translateY(-20px); }
}
Pour plus d’effet, la plume sur sa tête se déplace également dans le temps avec sa montée et sa chute:
#chief-feather-1 {
animation: chief-feather-1-rotate 3s ease-in-out infinite alternate;
}
#chief-feather-2 {
animation: chief-feather-2-rotate 3s ease-in-out infinite alternate;
}
@keyframes chief-feather-1-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(-9deg); }
}
@keyframes chief-feather-2-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(9deg); }
}
Effrayant et plaisir
L’une des choses que j’aime le plus dans les animations ambiantes est la façon dont elles apportent du plaisir dans un design. Ils sont l’occasion de démontrer la personnalité à travers des détails ludiques qui font sourire les gens lorsqu’ils les remarquent.
Regardez de plus près le chef, et vous pourriez apercevoir ses sourcils levant et ses yeux traversant alors qu’il gonfle durement sur sa pipe. Les sourcils du tirage rapide rebondissent également sur ce qui ressemble à des intervalles aléatoires.
#quick-draw-eyebrow {
animation: quick-draw-eyebrow-raise 5s ease-in-out infinite;
}
@keyframes quick-draw-eyebrow-raise {
0%, 20%, 60%, 100% { transform: translateY(0); }
10%, 50%, 80% { transform: translateY(-10px); }
}
Gardez à l’esprit la hiérarchie
Le mouvement attire l’œil, et même les mouvements subtils ont un poids visuel. Donc, je réserve les animations les plus évidentes pour les éléments dont j’ai besoin pour créer le plus grand impact.
Fumer sa pipe a clairement un grand effet sur McGraw à dessiner rapidement, donc pour le démontrer, j’ai enveloppé ses éléments – y compris sa pipe et ses plumes – dans un nouveau groupe SVG, puis j’ai fait l’oscillation.
#quick-draw-group {
animation: quick-draw-group-wobble 6s ease-in-out infinite;
}
@keyframes quick-draw-group-wobble {
0% { transform: rotate(0deg); }
15% { transform: rotate(2deg); }
30% { transform: rotate(-2deg); }
45% { transform: rotate(1deg); }
60% { transform: rotate(-1deg); }
75% { transform: rotate(0.5deg); }
100% { transform: rotate(0deg); }
}
Ensuite, pour souligner ce mouvement, j’ai reflété ces valeurs pour vaciller son ombre:
#quick-draw-shadow {
animation: quick-draw-shadow-wobble 6s ease-in-out infinite;
}
@keyframes quick-draw-shadow-wobble {
0% { transform: rotate(0deg); }
15% { transform: rotate(-2deg); }
30% { transform: rotate(2deg); }
45% { transform: rotate(-1deg); }
60% { transform: rotate(1deg); }
75% { transform: rotate(-0.5deg); }
100% { transform: rotate(0deg); }
}
Appliquer une retenue
Ce n’est pas parce que quelque chose peut être animé. Lors de la création d’une animation ambiante, j’étudie l’image et je note les éléments où un mouvement subtil pourrait ajouter la vie. Je garde à l’esprit les questions: «Quelle est l’histoire que je raconte? Où le mouvement aide-t-il et quand pourrait-il devenir distrayant?»
N’oubliez pas que la retenue ne fait pas seulement de faire moins; Il s’agit de faire les bonnes choses moins souvent.
Superposer des SVG pour l’exportation
Dans « Smashing Animations Part 4: Optimiser les SVG», J’ai écrit sur le processus sur lequel je compte « Préparez, optimisez et structurez des SVG pour l’animation. » Lorsque les éléments sont entassés dans un seul fichier SVG, ils peuvent être un cauchemar à naviguer. La localisation d’un chemin ou d’un groupe spécifique peut avoir l’impression de rechercher une aiguille dans une botte de foin.
C’est pourquoi je développe mes SVG en couches, exportant et optimisant un ensemble d’éléments à la fois – toujours dans l’ordre, ils apparaîtront dans le fichier final. Cela me permet de construire progressivement le maître SVG en le collant dans chaque section nettoyée.
Je commence par exporter des éléments d’arrière-plan, en les optimisant, en ajoutant des attributs de classe et d’ID et de collier leur code dans mon fichier SVG.
Ensuite, j’exporte des éléments qui restent souvent statiques ou se déplacent en tant que groupes, comme le chef et dessine rapidement McGraw.
Avant d’exporter, de nommer et d’ajouter des détails, comme le tuyau de Quick Draw, les yeux et ses étincelles lapidées.
Étant donné que j’exporte chaque couche à partir du plan d’art de même taille, je n’ai pas à m’inquiéter des problèmes d’alignement ou de positionnement car ils se mettent en place automatiquement.
Implémentation des animations ambiantes
Vous n’avez pas besoin d’un cadre d’animation ou d’une bibliothèque pour ajouter des animations ambiantes à un projet. La plupart du temps, tout ce dont vous aurez besoin est un SVG bien préparé et un CSS réfléchi.
Mais commençons par le SVG. La clé est de regrouper les éléments logiquement et de leur donner des attributs de classe ou d’identification significatifs, qui agissent comme des crochets d’animation dans le CSS. Pour cette animation, j’ai donné à chaque partie mobile son propre identifiant comme #quick-draw-tail ou #chief-smoke-2. De cette façon, je pourrais cibler exactement ce dont j’avais besoin sans creuser dans le Dom comme un raton laveur dans une poubelle.
Une fois le SVG configuré, CSS fait la plupart du travail. Je peux utiliser @keyframes pour un mouvement plus expressif, ou animation-delay pour simuler le hasard et déferler les horaires. L’astuce consiste à garder tout subtil et à me souvenir que je n’animant pas l’attention, je m’animant pour l’atmosphère.
N’oubliez pas que la plupart des animations ambiantes bouclent en continu, donc elles devraient être léger et adapté aux performances. Et bien sûr, C’est une bonne pratique de respecter les utilisateurs qui ont demandé moins de mouvement. Vous pouvez envelopper vos animations dans un @media prefers-reduced-motion requête donc ils ne courent que lorsqu’ils sont les bienvenus.
@media (prefers-reduced-motion: no-preference) {
#quick-draw-shadow {
animation: quick-draw-shadow-wobble 6s ease-in-out infinite;
}
}
C’est une petite touche facile à mettre en œuvre, et cela rend vos conceptions plus inclusives.
Principes de conception d’animation ambiante
Si vous voulez que vos animations se sentent ambiantes, plus comme l’atmosphère qu’avec l’action, cela aide à suivre quelques principes. Ce ne sont pas des règles difficiles et rapides, mais plutôt des choses que j’ai apprises tout en animant la fumée, les scintillement, les globes oculaires et les sourcils.
Gardez les animations lentes et lisses
Les animations ambiantes doivent se sentir détendues, alors utilisez durée plus longue et choisir Les courbes d’assouplissement qui se sentent biologiques. J’utilise souvent ease-in-outmais Courbes cubes de Bézier Peut également être utile lorsque vous voulez une sensation plus détendue et le type de mouvements que vous pourriez trouver dans la nature.
Faire boucle sans couture et éviter les changements brusques
Les réinitialisations durs ou les sauts soudains peuvent ruiner l’ambiance, donc si une animation boucle, assurez-vous qu’il se déroule en douceur. Vous pouvez faire cela par Les images clés de début et de fin correspondantou en définissant le animation-direction à alternate La valeur donc l’animation joue vers l’avant, puis retour.
Utilisez la superposition pour construire la complexité
Une seule animation pourrait être ennuyeuse. Cinq animations subtiles, chacune sur des couches séparées, peuvent se sentir riches et vivantes. Pensez-y comme construire un mélange de son – vous voulez Variation du rythme, du ton et du timing. Dans mon animation, scintille un scintillement à des intervalles variables, de la fumée se courbe vers le haut, des plumes se balancent et les yeux boggle. Rien ne domine, et chaque mouvement joue son petit rôle dans la scène.
Évitez les distractions
Le point d’une animation ambiante est qu’il ne domine pas. C’est un élément de fond et pas un appel à l’action. Si les yeux de quelqu’un sont attirés par un sourcil surélevé, c’est probablement trop, alors rendez l’animation jusqu’à ce que vous ayez quelque chose que vous n’attrapez que si vous cherchez vraiment.
Envisagez l’accessibilité et les performances
Vérifier prefers-reduced-motionet ne supposez pas que l’appareil de tout le monde peut gérer des animations complexes. SVG et CSS sont légers, mais des choses comme les filtres floues et les ombres de dépôt, et les animations CSS complexes peuvent toujours taxer des appareils à bas prix. Lorsqu’une animation est purement décorative, envisagez d’ajouter aria-hidden="true" Pour empêcher l’encombrement de l’arbre d’accessibilité.
Rapide sur le tirage
L’animation ambiante est comme l’assaisonnement sur un super plat. C’est la pincée de sel que vous remarquez à peine, mais vous manqueriez quand c’est parti. Il ne crie pas, il murmure. Cela ne mène pas, il persiste. C’est de la fumée flottante, des plumes qui balancent et que vous attrapez dans le coin de votre œil. Et quand c’est bien fait, animation ambiante ajoute de la personnalité à un design sans demander des applaudissements.
Maintenant, je me rends compte que tout le monde n’a pas besoin d’animer des personnages de dessins animés. Donc, dans la deuxième partie, je vais partager comment j’ai créé des animations pour plusieurs projets clients récents. Jusqu’à la prochaine fois, si vous créez une illustration ou travaillez avec SVG, demandez-vous: Qu’est-ce qui bougerait si c’était réel? Puis animer juste cela. Le rendre lent et doux. Gardez-le ambiant.
Vous pouvez voir l’animation ambiante complète Code sur Codepen.
(GG, YK)
Source link