Animer un logo
Chronologie, interpolations, clé automatique et accélération, et un SVG qui s'anime tout seul dans le navigateur
Vous animez un logo : une barre sort en glissant de derrière un cercle et un point apparaît en fondu. Puis vous choisissez comment se déroule le mouvement et l'exportez dans un SVG qui s'anime tout seul dans n'importe quel navigateur.
1 · Le logo dans un groupe
Une chronologie appartient à un conteneur : une page ou un groupe. Mettez les parties du logo dans un groupe (⌘ G) — ici un cercle, une barre cachée derrière le cercle et un point blanc transparent — et ouvrez le panneau Timeline avec le bouton timeline de la barre en bas des inspecteurs.
2 · La première interpolation
Sélectionnez la barre et appuyez sur + dans l'en-tête de la Timeline : une interpolation vide naît, longue de 2 secondes, à la tête de lecture. Portez la tête de lecture à la fin de l'interpolation, à 2 s, en cliquant sur la règle, et faites glisser la barre vers la droite. Avec la tête de lecture sur un temps différent de zéro, déplacer un objet écrit l'arrivée de l'interpolation au lieu de modifier l'objet : c'est la clé automatique. La barre de l'interpolation indique ce qui change : transform.
3 · Le point qui apparaît
Sélectionnez le point et appuyez sur + : l'interpolation naît à la tête de lecture, de 2 à 4 s. Portez la tête de lecture à 4 s et, dans le panneau Fill & stroke, mettez Opacity à 100 : le point apparaîtra en fondu. Sa barre indique opacity.
4 · L'accélération
Cliquez sur la barre de la première interpolation : elle est en modification, et le panneau Tween apparaît. À la ligne Easing choisissez backEaseOut : la barre arrive, dépasse un peu et revient. Une nouvelle interpolation est linéaire ; vous avez le choix entre 38 équations.
5 · Regardez à mi-chemin
Cliquez sur la règle à 0,35 s : la toile montre le logo à cet instant, avec la barre à mi-chemin et le point encore transparent. play dans l'en-tête joue l'animation, et ⇧ + glisser sur la règle dessine une boucle.
6 · Exportez en SVG animé
Depuis le bouton open and save, Export SVG… : activez Animation et appuyez sur Export. Chronologies et interpolations entrent dans le fichier avec un petit script : ouvert dans un navigateur, le SVG s'anime tout seul, tourne en boucle, et un clic l'arrête et le relance. Dans un autre éditeur, vous voyez le dessin au repos.
Pour aller plus loin
Dans le guide : la chronologie, interpolations et clé automatique, les accélérations et l'exportation en SVG.