Un ghid pentru animația SVG

Orice inginer front-end care merită să-și spună este conștient de provocările pe care le aduce ecosistemul fragmentat de dispozitive. Diferitele dimensiuni ale ecranului, rezoluțiile și raporturile de aspect fac dificilă oferirea unei experiențe consistente. Cu atât mai mult pentru cei care doresc să ofere o experiență perfectă de pixeli.

Grafica vectorială scalabilă (SVG) ajută la rezolvarea unei părți a acestei probleme și o face foarte bine. Deși au limitările lor, SVG-urile pot fi de mare ajutor pentru anumite ocazii și, dacă aveți o echipă de proiectare bună, puteți crea, de asemenea, o experiență mai uimitoare din punct de vedere vizual, fără a pune o povară excesivă browserului web sau a împiedica timpii de încărcare.

În ultimele luni, am lucrat la un proiect care folosește pe scară largă SVG și capabilitățile sale de animație și efect. În acest articol, vă voi împărtăși cum puteți utiliza SVG și tehnicile sale de animație pentru a aduce o viață nouă lucrării dvs. web front-end.

Grafică vectorială scalabilă

SVG este un format de imagine care se bazează pe XML, la fel ca modul în care funcționează HTML. Acesta definește elemente diferite pentru un număr de forme geometrice familiare care pot fi combinate în marcaj pentru a produce grafice bidimensionale.

Specificația SVG este un standard deschis dezvoltat de World Wide Web Consortium (W3C) în 1999.

Toate browserele web majore au suport pentru randarea SVG de ceva vreme.

Deoarece graficele SVG sunt documente XML, browserele web oferă API-uri bazate pe noduri DOM care pot fi folosite pentru a interacționa cu imaginile. Vorbește despre a da viață imaginilor!

Căi SVG

Dacă există un element depășit în SVG, acesta ar fi elementul <path> .

Elementul cale este o formă de bază care poate fi folosită pentru a crea aproape orice formă 2D avansată pe care o puteți imagina.

Elementul funcționează prin preluarea unei secvențe de comenzi de desen. Este foarte asemănător cu limbajul de programare Logo din 1967, doar modernizat și conceput pentru grafică elegantă. Elementul preia această secvență de comenzi de desen prin atributul d .

 <!-- A right-angled triangle --> <path d="M10 10 L75 10 L75 75 Z" />

Vă puteți gândi la un stilou virtual care desenează pe ecran, iar comentariile de desen din elementul cale doar controlează creionul. În exemplul de mai sus, stiloul este instruit să se deplaseze în poziția (10, 10) ( M10 10 ), să tragă o linie la (75, 10) ( L75 10 ), să tragă o linie la (75, 75) L75 75 și apoi pentru a închide traseul revenind la punctul de plecare ( Z ).

Folosind alte comenzi de desen, cum ar fi arce ( A ), curbe bezier pătratice ( Q ), curbe bezier cubice ( C ), etc, puteți crea forme și grafice mult mai complexe în SVG.

Puteți afla multe mai multe despre elementul cale aici.

Căi SVG și CSS

„Bine Juan, am înțeles. Căile sunt puternice, dar cum le animez?” tu spui.

Pentru prima noastră tehnică, vom profita de două atribute SVG: stroke-dasharray și stroke-dashoffset .

Atributul stroke-dasharray controlează modelul de liniuțe și goluri utilizate pentru a trasa traseul. Dacă doriți să vă desenați liniile ca un grup de liniuțe și goluri în loc de o singură mișcare continuă de cerneală, acesta este atributul pe care l-ați folosi.

Cu imaginile SVG care fac parte din DOM-ul browserului web și stroke-dasharray fiind un element de prezentare, atributul poate fi setat și folosind CSS.

În mod similar, atributul stroke-dashoffset (care specifică cât de departe în modelul liniuței pentru a începe liniuța) poate fi, de asemenea, controlat folosind CSS.

Aceste două atribute SVG, împreună, pot fi folosite pentru a anima căile SVG, oferind privitorului iluzia că căile sunt desenate treptat.

Luați această curbă Bezier pătratică, de exemplu:

 <path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>

Pentru a anima această cale ca și cum ar fi desenată treptat și fără probleme pe ecran, va trebui să setăm lungimile liniuțelor (și intervalului), folosind atributul stroke-dasharray, egale cu lungimea căii. Acest lucru este astfel încât lungimea fiecărei liniuțe și interval din curba punctată să fie egală cu lungimea întregului traseu.

Apoi, vom seta offset-ul liniuței, folosind atributul stroke-dashoffset, la 0. Acest lucru va face ca calea să apară pe ecran ca o curbă solidă (ne uităm, în esență, la prima liniuță și deja am făcut ca fiecare liniuță să se întinde pe întregul lungimea curbei). Prin stabilirea decalajului liniuței egal cu lungimea curbei, vom ajunge la o curbă invizibilă (acum ne uităm la curba care este redată ca un întreg decalaj - partea care urmează imediat o liniuță).

Acum, prin animarea proprietății stroke-dashoffset, puteți face curba să apară treptat pe ecran.

Vedeți căile Pen Toptal - SVG și CSS de Toptal Blog (@toptalblog) pe CodePen.

După cum puteți vedea, curba este întotdeauna acolo. Schimbăm doar offset-ul liniuței pentru a face ca partea întreruptă să apară puțin câte puțin.

Puteți face acest lucru cu un pas mai departe utilizând același principiu, dar cu mai multe căi:

Vedeți căile Pen Toptal - SVG și CSS de Toptal Blog (@toptalblog) pe CodePen.

Aici aveți o curbă neagră care este fixă, una roșie care se mișcă de-a lungul căii și alta neagră urmând cea roșie, dar cu 40 de pixeli în urmă.

Stroke-dasharray și stroke-dashoffset sunt două atribute foarte puternice care pot fi folosite pentru a aplica o multitudine de animații și efecte căilor tale SVG. Puteți încerca acest instrument la îndemână pe care îl puteți folosi pentru a experimenta cele două atribute.

Animarea obiectelor de-a lungul căilor SVG

Cu SVG și CSS, un alt lucru minunat pe care îl puteți face este să animați obiecte sau elemente urmând o cale.

Există 2 atribute SVG pe care le vom folosi pentru animație:

• offset-path: Proprietatea offset-path CSS specifică calea offset în care este poziționat elementul.

• offset-distance: Proprietatea offset-distance CSS specifică o poziție de-a lungul unei căi de compensare.

Combinând aceste două proprietăți, puteți crea cu ușurință animații ca aceasta:

Vedeți căile Pen Toptal - SVG și CSS de Toptal Blog (@toptalblog) pe CodePen.

După cum puteți vedea, avem un nou element div.ball .

Acest element poate fi orice, un div, o imagine, text, orice. Ideea din acest exemplu este că, folosind offset-path și offset-distance, puteți da elementului o cale de urmat și de a anima distanța, iar elementul se va deplasa prin cale.

Animații SVG folosind JavaScript

Dacă toate acestea nu sunt deja suficient de elegante, puteți recurge oricând la JavaScript.

Animarea elementelor SVG cu JavaScript poate fi asemănătoare cu animarea elementelor DOM. Cu toate acestea, cu JavaScript, puteți realiza tehnicile de animație pe care le-am verificat mai sus, dar mai ușor.

Anterior, a trebuit să codificăm lungimile căilor în CSS-ul nostru. Cu ajutorul funcției JavaScript path.getTotalLength() este posibil să se calculeze lungimea căii din mers și să o folosească după cum este necesar. Puteți afla mai multe despre el aici.

În plus, o serie de biblioteci vă sunt deja la dispoziție care pot face animațiile SVG mult mai ușoare decât sunt deja.

Snap.svg nu numai că simplifică desenarea imaginilor SVG folosind JavaScript, ci face ca animarea acestora să fie la fel de simplă precum apelarea .animate({}) .

O altă bibliotecă, anime.js, vă permite să faceți ca un element div să urmeze o cale SVG cu doar câteva linii de cod.

Dacă sunteți în căutarea unei biblioteci care să facă mai mult pe cont propriu, dar care face ca rezultatele să arate în continuare uimitoare, atunci Vivus este ceea ce căutați. Este nevoie de o abordare diferită, mai bazată pe configurație, a animației căilor SVG. Cu această bibliotecă, trebuie doar să adăugați un ID la elementul SVG pe care doriți să-l desenați și să definiți un obiect Vivus cu acel ID. Vivus se va ocupa de restul.

Lectură suplimentară

Mai jos sunt o listă de resurse pe care le puteți găsi utile atunci când vă ocupați de imagini SVG și le animați:

Pentru a aprofunda mai mult cu animația SVG, puteți citi acest articol scurt despre cele trei modalități de a anima imagini SVG și puteți urmări filmul video de la CSS Tricks.

Un lucru pe care acest articol nu l-a acoperit este animarea imaginilor SVG cu Synchronized Multimedia Integration Language (SMIL). În timp ce folosirea CSV pentru SVG vă oferă avantajul de a lucra cu ceva cu care sunteți deja familiarizat, SMIL duce lucrurile la nivelul următor.

Cu SMIL, puteți implementa efecte de animație avansate, cum ar fi transformarea formei folosind numai SVG. Un ghid scurt, dar eficient pentru utilizarea SMIL pentru astfel de efecte este disponibil aici.

Deși, suportul pentru SMIL este un pic neplăcut în acest moment (fără joc de cuvinte).

Animații fără compromis pentru web

În acest articol, ați trecut prin mai multe moduri în care puteți anima elemente SVG folosind CSS sau element HTML pe căile SVG.

SVG este ușor și poate fi folosit pentru a produce grafică clară, indiferent de dimensiunea ecranului, nivelul de zoom și rezoluția ecranului. Cu SVG, oferirea unei experiențe moderne și vie acum este mai ușoară ca niciodată, toate în același timp culegând beneficiile utilizării tehnologiilor web standard.

Si asta e! Sper că ați găsit acest tutorial de animație SVG util și că v-ați bucurat să îl citiți.

Citiți suplimentare pe blogul Toptal Engineering:

• Cum să abordați animațiile SVG în CSS