Anima un logo

Timeline, tween, auto-key ed easing, e un SVG che si anima da solo nel browser

Una timeline appartiene a un contenitore: una pagina o un gruppo. Metti le parti del logo in un gruppo (⌘ G) — qui un cerchio, una barra nascosta dietro il cerchio e un punto bianco trasparente — e apri il pannello Timeline dal bottone timeline della barra in fondo agli inspector.

Scegli la barra e premi + nella testata della Timeline: nasce un tween vuoto, lungo 2 secondi, alla testina. Porta la testina alla fine del tween, a 2 s, cliccando sul righello, e trascina la barra a destra. Con la testina su un tempo diverso da zero, spostare un oggetto scrive l'arrivo del tween invece di cambiare l'oggetto: è l'auto-key. La barra del tween dice cosa cambia: transform.

Scegli il punto e premi +: il tween nasce alla testina, da 2 a 4 s. Porta la testina a 4 s e, nel pannello Fill & stroke, porta Opacity a 100: il punto comparirà in dissolvenza. La sua barra dice opacity.

Clicca la barra del primo tween: è in modifica, e compare il pannello Tween. Alla riga Easing scegli backEaseOut: la barra arriva, va un po' oltre e torna indietro. Un tween nuovo è lineare; le equazioni fra cui scegliere sono 38.

Clicca sul righello a 0,35 s: la tela mostra il logo in quel momento, con la barra a metà strada e il punto ancora trasparente. play nella testata suona l'animazione, e ⇧ + trascinare sul righello disegna un ciclo.

Dal bottone open and save, Export SVG…: accendi Animation e premi Export. Timeline e tween vanno nel file con un piccolo script: aperto in un browser, l'SVG si anima da solo, ripete in ciclo, e un clic lo ferma e lo riprende. In un altro editor si vede il disegno fermo.

Nella guida: la timeline, tween e auto-key, gli easing e l'esportazione in SVG.