Share
L'animazione del tratto di un file SVG è perfetta per simulare la scrittura a mano. Nel corso di due tutorial, useremo l'animazione CSS per fare in modo che una firma appaia ordinatamente, come se stessi firmando la pagina da solo.
Ecco cosa costruiremo:
Prima di immergerci in qualsiasi codice, avremo bisogno di una versione SVG della tua firma. Non importa quale software utilizzi per farlo, ma cerca di mantenere le linee e le curve il più agevoli possibile per ottenere il massimo effetto.
Ecco il mio, che puoi vedere è disegnato con tre percorsi separati:
Primo percorso
Secondo percorso
Terza viaAssicurati che la tua tavola da disegno sia ritagliata strettamente alla firma, quindi salva il file come SVG.
L'apertura del file in un editor di codice rivelerà la struttura XML di SVG. A seconda dell'applicazione che hai usato per progettarlo, oltre a come lo hai salvato o esportato, avrai un elemento con alcuni mumbo jumbo prima di esso. Il mumbo jumbo può essere rimosso.
In questo caso, gli elementi che abbiamo lasciato assomigliano a qualcosa:
All'interno del nostro principale noi abbiamo un
Avremo bisogno di indirizzare separatamente questi vettori con i CSS un po 'più avanti, quindi assicurati che abbiano ciascuno un nome di classe adatto. Il probabilmente l'elemento avrà già un id che riflette il nome del livello nell'applicazione con cui è stato progettato.
Ho dato i nomi dei miei vettori in base a quello che sono (il primo è l'io nel mio nome, per esempio).
In tutta onestà, il tuo SVG non sarà così carino. Ciascuno di questi vettori avrà un carico di coordinate, oltre a diversi attributi sepolti all'interno di essi. Le coordinate dovranno rimanere, ma possiamo rimuovere alcuni degli attributi comunemente usati e posizionarli invece nel nostro CSS, mantenendo le cose carine e ASCIUGANDO.
Lo costruirò usando CodePen, ma se preferisci puoi utilizzare documenti HTML e CSS autonomi. Incolla il codice SVG direttamente nel tuo documento HTML. Quindi, rimuovere gli attributi in comune tra il percorso e gli elementi della linea, inserendoli invece nel documento CSS. Ad esempio, noterai attributi come:
Accentsconagua
riempire = "none" stroke = "# 0F436D" Corsa-width = "2" Corsa-linecap = "turno" Corsa-linejoin = "turno" Corsa-miterLimit = "10"Questi possono essere rimossi e applicati tramite CSS, in questo modo:
percorso, riga riempimento: nessuno; tratto: # 2a3745; larghezza del tratto: 2; stroke-linecap: round; linea-tratto: rotondo; ictus-mimo: 10;
Molto più pulito!
Per animare i tratti di questo SVG utilizzeremo una tecnica prima discussa da Jake Archibald. L'idea è la seguente: ognuno di questi vettori verrà dato a tratteggiata ictus. Lo facciamo applicando a ictus dasharray valore all'interno del CSS:
Per ciascuno di questi vettori facciamo il ictus dasharray esattamente la lunghezza del percorso, quindi ognuno ha un singolo trattino che copre tutta la sua lunghezza. Questo richiede un po 'di tentativi ed errori, ma nel nostro caso i valori appaiono come questo:
.stroke-I stroke-dasharray: 80; .stroke-an stroke-dasharray: 360; .stroke-flourish stroke-dasharray: 40;
Ora, per animare questi tratti, dobbiamo compensare ciascuno dei trattini in modo che il divario copre il vettore, non il trattino. Ha senso? Queste illustrazioni potrebbero aiutare. In questo primo, immagina che la linea tratteggiata venga usata per coprire il prosperare alla fine della firma.
Ora in questo abbiamo compensato il cruscotto, quindi è il divario che è finita:
Ora tutto ciò che dobbiamo fare è usare i CSS per animare dallo stato di offset all'altro.
L'animazione CSS si basa sulla prima definizione dei fotogrammi chiave. Ogni fotogramma chiave rappresenta gli stati lungo una sequenza temporale, quindi i nostri browser visualizzano le animazioni tra di loro.
Vediamo innanzitutto come può essere animato questo offset del cruscotto. Useremo il primo tratto, "I", e animeremo tra due stati. Inizia impostando alcuni fotogrammi chiave:
@keyframes write1 0% stroke-dashoffset: 80; 100% stroke-dashoffset: 0;
Qui diamo un nome ai keyframes (write1) e l'uso della sintassi abbreviata specifica che all'inizio della timeline (0%) vogliamo il ictus dashoffset essere 80. In altre parole: il trattino, che è esattamente lungo 80px, sarà completamente sfalsato.
Alla fine della timeline (a 100%) vogliamo il ictus dashoffset essere 0, quindi il trattino torna a coprire il vettore.
Ora abbiamo i nostri fotogrammi chiave, collegali ad un'animazione. Aggiungiamo un'altra dichiarazione al nostro ictus-I regola:
.stroke-I stroke-dasharray: 80; animazione: write1 3s infinito lineare;
Qui, usando il animazione proprietà, diciamo che vogliamo usare il write1 fotogrammi chiave definiti un attimo fa, vogliamo che tutto duri esattamente 3 secondi, vogliamo che l'animazione giri all'infinito e vogliamo che la velocità sia lineare (in modo che non ci sia alcuna accelerazione o decelerazione).
Ecco cosa otteniamo:
Nota: Sto usando Autoprefixer in CodePen che mi salva dover usare i prefissi del browser per le animazioni.
Abbiamo bisogno di definire altri due set di keyframe (write2 e write3) per i restanti vettori nella firma e abbiamo bisogno di compensare con le lunghezze dei trattini corrette che abbiamo scoperto in precedenza:
@keyframes write2 0% stroke-dashoffset: 360; 100% stroke-dashoffset: 0; @keyframes write3 0% stroke-dashoffset: 40; 100% stroke-dashoffset: 0;
Quindi dobbiamo applicare queste animazioni ai due vettori rimanenti:
.stroke-an stroke-dasharray: 360; animazione: write2 3s infinito lineare; .stroke-flourish stroke-dasharray: 40; animazione: write3 3s infinito lineare;
Ecco cosa otteniamo:
Ora stiamo arrivando da qualche parte! Ogni vettore si sta animando perfettamente, in un movimento lineare della durata di 3 secondi.
Passo successivo? Per farli animare in sequenza.
Attualmente abbiamo tre tratti tutti animati contemporaneamente. Tuttavia, idealmente vogliamo che l '"io" animi, poi "un", e infine alla fine alla fine. Se dovessimo visualizzare che lungo una timeline potrebbe assomigliare a questo:
Possiamo effettivamente rappresentare queste sezioni della timeline perfettamente nei nostri keyframe CSS. Ad esempio, la prima sezione (dallo 0% al 33,3%) è quando vogliamo animare il nostro "io", quindi modifichiamo i fotogrammi chiave per arrivare al 33,3% anziché al 100%:
@keyframes write1 0% stroke-dashoffset: 80; 33,3% stroke-dashoffset: 0;
Ora, dato che tutte e tre le nostre animazioni hanno la stessa lunghezza (3 secondi), possiamo assicurarci che il secondo non inizi fino al 33.3%, quando la prima animazione è completa:
@keyframes write2 0%, 33.3% stroke-dashoffset: 360; 100% stroke-dashoffset: 0;
Ecco cosa ci offre:
Le prime due animazioni fluiscono bene, quindi miglioriamo ottenendo il secondo al 66,6%, a quel punto può iniziare l'animazione finale. I nostri keyframe appariranno così:
@keyframes write1 0% stroke-dashoffset: 80; 33,3% stroke-dashoffset: 0; @keyframes write2 0%, 33.3% stroke-dashoffset: 360; 66,6% stroke-dashoffset: 0; @keyframes write3 0%, 66.6% stroke-dashoffset: 40; 100% stroke-dashoffset: 0;
E la sequenza sarà simile a questa:
Quello che abbiamo è buono, ma non è perfetto, certamente lontano da un movimento realistico della penna. Ciascuno di questi tre vettori viene disegnato nel corso di un secondo, indipendentemente dalla sua lunghezza. Il vettore centrale è più lungo dell'ultimo, quindi è logico impiegare più tempo per disegnare. Una timeline migliore potrebbe essere simile a questa:
Per un realismo aggiunto c'è persino un gap tra la prima finitura vettoriale e il secondo inizio. Quindi modifichiamo i nostri valori dei fotogrammi chiave per riflettere che:
@keyframes write1 0% stroke-dashoffset: 80; 20% stroke-dashoffset: 0; @keyframes write2 0%, 25% stroke-dashoffset: 360; 90% stroke-dashoffset: 0; @keyframes write3 0%, 90% stroke-dashoffset: 40; 100% stroke-dashoffset: 0;
Infine, acceleriamo le cose cambiando tutto 3s valori a 2s. Possiamo anche aggiornare le dichiarazioni di animazione in modo che ognuna venga eseguita una sola volta, non a ciclo continuo:
animazione: write1 2s 1 lineare;
Si potrebbe anche voler giocare con il lineare valore, aggiungendo invece un po 'di attenuazione come facilità in, facilità in-out, facilità-out ecc. per rendere il movimento meno uniforme. Cosa ci dà tutto questo?
Abbiamo fatto grandi progressi e abbiamo imparato molto lungo la strada! Nel prossimo tutorial faremo ulteriori passi avanti, utilizzando Waypoints.js per aiutarci a controllare quando l'animazione ha luogo. Ci vediamo lì!
