Un ghid pentru începători pentru animația SVG cu CSS

Scalable Vector Graphics (SVG) sunt mai mult decât fișiere imagine. Ca aplicație XML, SVG-urile conțin markup care arată și funcționează mult ca HTML. De asemenea, le puteți utiliza împreună cu codul CSS și JavaScript. Acest lucru face posibilă animarea fișierelor SVG, creând imagini complexe care funcționează bine pentru web design și alte medii dinamice.

Dar cum faci o animație SVG? Începeți cu o formă SVG, animați-o folosind CSS și construiți pe aceste principii pentru a utiliza animația în propria dvs. lucrare.

Animarea SVG-urilor cu HTML și CSS

Deși puteți folosi JavaScript pentru a anima programatic SVG-urile, CSS are acum suport bun și pentru animații. Puteți găsi tot exemplul de cod pe CodePen pentru acest proiect.

Construirea unei imagini SVG în interiorul HTML

Primul pas în acest proces este construirea imaginii SVG cu care veți lucra. Puteți găsi marcajul SVG în panoul HTML de pe CodePen.

Structura SVG

În timp ce SVG-urile au un format similar cu HTML, etichetele pe care le utilizați pentru a le crea sunt diferite. Un SVG are etichete de deschidere și de închidere () care poate conține o varietate de proprietăți diferite. În cazul nostru, folosim

id și viewBox proprietăți. Proprietatea id funcționează ca orice alt ID HTML, oferindu-vă un identificator unic de utilizat în CSS/JS. Proprietatea viewBox stabilește dimensiunea SVG-ului nostru.

<!-- SVG cu o dimensiune receptivă -->
<svg id="Animație MUOSVGA" viewBox="0 0 800 600">
<!-- Conținut SVG -->
</svg>

Puteți utiliza în schimb proprietățile de lățime și înălțime, așa cum demonstrează următorul exemplu. Cu toate acestea, viewBox creează un SVG receptiv care se va potrivi cu dimensiunea ferestrei de vizualizare fără a-i rupe raportul de aspect.

 SVG cu o dimensiune statică 
<svg id="Animație MUOSVGA" latime="800" inaltime="600">
<!-- Conținut SVG -->
</svg>

Forme SVG

Puteți crea imagini detaliate cu SVG-uri, cu o serie de instrumente de formă diferite la dispoziția dumneavoastră. Acest exemplu SVG folosește trei dintre formele disponibile, dar există multe altele. Fiecare dintre formele din acest exemplu are un ID unic pe care animațiile CSS îl pot folosi mai târziu.

• Elipsa SVG: Acesta este un instrument cerc/oval. Specifică proprietăți pentru raza axei y/x (rx/ry), culoarea de umplere și lățimea cursei. Este important să rețineți că raza pe care o alegeți cu acest instrument va fi jumătate din diametrul formei.

<elipse id="cerc" rx="100" ry="100" umple="#ffed00" stroke-width="0"/>

• SVG Rect: instrumentul SVG rect creează un pătrat sau dreptunghi. Acesta are proprietăți pentru lățimea/înălțimea, o transformare, culoarea de umplere și lățimea conturului.

<rect id="pătrat" latime="200" inaltime="200" transforma="traduce (300 200)" umple="#05f"
 stroke-width="0"/>

• Poligon SVG: utilizați un poligon SVG pentru a seta un anumit număr de puncte și pentru a crea forme arbitrare de diferite dimensiuni. Poligonul din exemplu este cu trei laturi, ceea ce îl face un triunghi și puteți vedea poziția fiecărui punct trasată în proprietățile sale. Împreună cu aceasta, avem proprietăți pentru poziția, culoarea de umplere și lățimea cursei triunghiului.

<id-ul poligonului="triunghi" puncte="15,-97 115,102 -84,102 15,-97"
 transforma="traduce (0,0)" umple="#f00" stroke-width="0"/>

Odată ce animația este la locul său, formele se vor alinia una lângă alta.

Aceste trei forme SVG sunt unele dintre cele mai comune, dar există mai multe dintre care puteți alege. Puteți folosi următoarele forme când lucrând cu o animație SVG:

• Cerc SVG: această formă este similară cu o elipsă, dar are întotdeauna raze X și Y egale.
• Linie SVG: o linie SVG este un singur segment de linie cu două puncte, câte unul la fiecare capăt.
• Polilinie SVG: Poliliniile sunt ca liniile de bază, doar că pot avea mai mult de două puncte.
• Poligon SVG: poligoanele SVG sunt ca dreptunghiuri, doar că pot avea mai mult de patru puncte, făcând posibile forme complexe.
• Cale SVG: căile SVG funcționează în mod similar instrumentului stilou din Adobe Photoshop. Liniile se pot conecta ca o polilinie/poligon, dar pot avea și curbe aplicate.

Cum să animați SVG-uri cu CSS

Acum că aveți câteva forme în interiorul SVG-ului dvs., este timpul să treceți la animația CSS. Fiecare dintre forme are o animație diferită pentru a demonstra unele dintre opțiunile pe care le aveți, dar sunt multe de explorat cu propriile modele. Cercul se mișcă pe ecran, colțurile pătratului devin rotunde, iar triunghiul se rotește. Toate acestea folosesc Cadre cheie CSS pentru a crea animații fluide.

Mutarea cercului folosind Transform și Translate

Cercul din exemplul SVG se deplasează din partea de jos în partea de sus a ecranului în timpul ciclului său de animație. Trebuie să atribuiți o animație cercului înainte ca acesta să se poată muta, printr-o proprietate CSS:

#cerc {
 animație: circle_anim 2000ms liniar infinit normal înainte
}

Primul cuvânt din valoare, circle_anim, este un nume pentru animație. Acesta rulează două secunde (2000 ms). Are o liniar curba care își menține viteza constantă și este setată să ruleze an infinit numărul de ori în înainte direcţie. Puteți folosi cadre cheie pentru a defini fazele individuale ale animației:

@keyframes circle_anim {
 0% { transforma: Traduceți(155px, 305px) }
 45% { transforma: Traduceți(155px, -123px) }
 50% { transforma: Traduceți(-123px, -123px) }
 55% { transforma: Traduceți(-123px, 728px) }
 60% { transforma: Traduceți(155px, 728px) }
 100% { transforma: Traduceți(155px, 305px) }
}

Există șase cadre cheie în această animație, așa că cercul se va muta în șase locații diferite în fiecare ciclu. The transforma: traduce proprietatea stabilește poziția cercului în fiecare etapă. La 0%, cercul se află în mijlocul ecranului și se mișcă în sus și iese din vedere cu 45%. Cu 50% s-a deplasat la stânga ecranului înainte de a coborî sub fereastra de vizualizare la 55%. Cercul se mută înapoi în poziția orizontală cu 60%, iar animația este completă la 100%, cu cercul înapoi în mijlocul ecranului.

Animați proprietatea razei de frontieră a pătratului

Pătratul din exemplu oferă o referință bună pentru animațiile cu proprietăți generale. Atâta timp cât cunoașteți sintaxa corectă de utilizat, puteți anima orice proprietate CSS. Proprietatea frontier-radius este o bună demonstrație în acest sens. Pătratul are colțuri ascuțite care se transformă în colțuri rotunjite și apoi din nou în colțuri pătrate.

#pătrat { animaţie: square_anim 2000 ms ease-in-out infinit normal înainte }

Animația pătrată se numește square_anim și are un timp de rulare de două secunde. The ușurință-in-out curba face animația mai lentă la început și la sfârșit, creând un efect neted.

@keyframes pătrat_anim {
 0% { rx: 0px; ry: 0px }
 45% { rx: 40px; ry: 40px }
 55% { rx: 40px; ry: 40px }
 100% { rx: 0px; ry: 0px }
}

După cum puteți vedea, această animație are patru cadre cheie. Raza marginii X și Y se modifică de la 0px la 40px între 0% și 45%, întrerupându-se la 40px până la 55%. Apoi se întoarce la 0px pentru fiecare rază până când animația ajunge la 100%.

Rotiți triunghiul SVG cu transformare

Animația finală SVG din exemplu este cea mai simplă, triunghiul rotindu-se în jurul punctului său central. Forma completează o revoluție completă la fiecare două secunde și continuă să ruleze la infinit. Are o curbă de ușurință care duce la încetinirea animației la sfârșit. Animația se numește triangle_anim.

#triunghi { animaţie: triangle_anim 2000 ms ea-out infinit normal înainte }

Această animație are două cadre cheie, unul la 0% și celălalt la 100%. Proprietatea Transform rotație transformă triunghiul de la 0° la 0% la 360° la 100%, creând o rotire completă.

@keyframes triangle_anim {
 0% { transforma: Traduceți(644px, 297 px) roti(0°) }
 100% { transforma: Traduceți(644px, 297 px) roti(360 de grade) }
}

Cum să animați alte proprietăți

Cele trei animații prezentate mai sus sunt un bun punct de plecare atunci când lucrați cu SVG-uri, dar probabil că veți dori să continuați acest lucru. Puteți folosi regula de animare CSS pentru a ajusta aproape orice valoare de proprietate pe care o puteți atribui SVG-ului dvs. Acestea includ valori de bază, cum ar fi dimensionarea și poziționarea, precum și valori mai avansate, cum ar fi marginile, umbrele și modurile de amestecare.

În cazuri rare în care CSS nu poate face treaba, puteți folosi codul JavaScript pentru a anima imaginile SVG. Puteți găsi o mulțime de ghiduri care să vă ajute în acest sens, odată ce vă simțiți pregătit să faceți următorul pas cu SVG-urile dvs.

Creați-vă propriile animații SVG

Fie că ești un designer web, un dezvoltator de software sau pur și simplu o persoană creativă, animațiile SVG pot fi distractive și satisfăcătoare de realizat. Puteți găsi o mulțime de resurse pe web care vă pot ajuta cu animația bazată pe web, odată ce vă simțiți confortabil cu elementele de bază.

10 modele de fundal CSS pe care le puteți utiliza pe site-ul dvs. web

Citiți în continuare