Share
Acest sezon, așa că în acest tutorial, voi trece prin crearea unor pictograme CSS animate, cu tematică de vacanță, SVG. Există câteva icoane minunate pe Iconmelon, un site care găzduiește multe seturi gratuite de pictograme vectoriene pentru a vă scufunda dinții. Icoanele pe care le folosesc vin cu multumita designerului Sam Jones. Prinde-ți o ceașcă de ouă, trage-ți laptop-ul până la jurnalul de yule și să începem!
Dacă sunteți interesat să utilizați SVG pe web, icoanele sunt un loc minunat pentru a începe. SVG-urile sunt flexibile, independente de rezoluție și greutate redusă, astfel încât icoanele se dedică în mod natural formatului vectorial. În plus, la fel ca HTML, SVG-urile pot fi cu ușurință desenate cu CSS, care include animația CSS3. Adăugând o pauză de interactivitate cu animația pe pictogramele dvs. vă poate ajuta să creați o experiență încântătoare pentru utilizatorii dvs. și, de asemenea, să adăugați un context despre ceea ce reprezintă o pictogramă.
Pentru o introducere pe SVG și pe web, aruncați o privire la fișierele SVG: De la Illustrator la Web.
Notă: Următoarele demo-uri folosesc tehnologii de ultimă oră care, din momentul acestei scrieri, nu sunt acceptate în anumite browsere, cum ar fi Internet Explorer. Dacă urmăriți împreună cu tutorialul, este mai bine să utilizați Chrome sau Safari. Suportul Mozilla este perfect posibil cu prefixele de proprietate corespunzătoare. Cu siguranță vă puteți aștepta ca sprijinul pentru aceste tehnologii să se îmbunătățească în viitor.
În plus: În acest articol am omis unele prefixe de browser necesare din unele proprietăți CSS pentru concis și lizibilitate. Consultați biblioteca prefix free de Lea Verou dacă doriți să scrieți prefixul gratuit CSS cu ușurință. De asemenea, puteți încerca să creați demonstrații pe Codepen, care pot fi ușor configurate să utilizeze prefixfree.
Una dintre cele mai mari bătăi ale lui SVG este aceea că este dificil de rezolvat codul. Codul SVG care este exportat de Illustrator, editorul meu de grafică vectorial de alegere, este destul de greu de citit la prima vedere. Inkscape face de fapt o treabă mai bună de a exporta SVG în această privință, dar am constatat că simplificarea și formatarea codului poate merge mult spre a face codul mai ușor de citit și de a lucra cu.
Iată codul SVG pentru primul exemplu de animație pe care îl voi demonstra, o lumină de Crăciun ce clipește.
Acest cod a fost exportat din instrumentul meu de editare vectorială, Adobe Illustrator. Este aproape de neciplinit la prima vedere. Iată același simplificat marcaj:
Am simplificat în mod semnificativ acest xml eliminând o mulțime de marcaje suplimentare pe care programul le emite în mod implicit. Elementul de bază SVG conține următoarele:
Accentsconagua
svg-lumină. Am folosit-o svg- prefixul pentru a viza cu ușurință elementele din interiorul unui SVG specific.viewbox proprietate. Valoarea lui viewbox proprietatea definește raportul de aspect al documentului și este echivalent cu dimensiunea tabloului de bord din Illustrator.xmnls proprietate. Această proprietate definește spațiul de nume XML al SVG și ajută anumiți agenți utilizator să înțeleagă marcajul.Pentru elementele imbricate în interiorul SVG care definesc formele care alcătuiesc imaginea, cum ar fi căi, cerc și rects, Am aplicat clase în linie cu eticheta lor de deschidere. Toate proprietățile inline ale elementului, cum ar fi coordonatele acestora, am depășit liniile noi. În plus, am indentat toate elementele interioare sub eticheta de bază SVG.
Toate aceste lucruri au un motiv. Mai întâi de toate, face codul mult mai ușor de citit. În al doilea rând, în editorul meu de cod de alegere, Sublime Text 3, pot să arunc cu ușurință elemente SVG individuale sau SVG-uri întregi, în timp ce numele claselor ajută în continuare la păstrarea contextului despre ceea ce ele sunt.
Bine, să intrăm în spiritul de vacanță și să animăm o lumină de Crăciun ce clipește! Iată ce vom căuta să realizăm:
Vedeți Lumina Penului de Noah Blon (@noahblon) pe CodePen
Ceea ce vreau să fac este animarea elementului căruia i-am dat o clasă bec în SVG.
Cu CSS, voi da bulbului o culoare de umplere și îi va defini proprietățile de animație.
.svg-lumină. bulb umplere: hsl (204, 70%, 23%); animație-nume: strălucire; durata animației: 1s; animație-iterație-count: infinit; animație-funcția de sincronizare: ușurință în sus; animație-direcție: alternativă;
completati proprietatea ne permite să setăm culoarea elementului SVG. Când este posibil, îmi place să folosesc HSL (nuanță, saturație, luminozitate) pentru a defini valorile culorilor, deoarece este foarte intuitiv să lucrezi cu. Aici am ales o culoare albastră (nuanța 204) și am păstrat valoarea scăzută a luminozității, 23%, ceea ce înseamnă că vom avea o culoare albastru închis.
Am setat bulbul să fie animat de o animație de tip keyframe numită strălucire-albastru. Durata animației este de 1 secundă. Animația se repetă infinit, ceea ce înseamnă că va dura pentru totdeauna. Timpul de animație este relaxat la începutul și la sfârșitul cadrelor cheie, creând o tranziție mai ușoară la începutul și la sfârșitul animației. În cele din urmă, animația este programată să alterneze, ceea ce înseamnă că va merge înainte și înapoi de la început până la final și din nou.
Bacsis: S-ar putea să știți că există o sintaxă a stenogramelor pentru regulile de animație CSS, dar în general prefer să împărțim regulile pentru a le face mai ușor de înțeles, de a modifica și de a împărți dacă animațiile multiple.
Acum, voi defini strălucire-albastru cheie animație:
@ cadre cheie strălucitoare-albastru 0% umplere: hsl (204, 80%, 23%); 100% umplere: hsl (204, 80%, 63%);
Aici am setat culoarea de umplere de pornire și de terminare a elementului la care se aplică această animație. Singura valoare care se schimbă este luminozitatea culorii (bitul "l" din hsl), ceea ce înseamnă că lumina se va anima de la o versiune mai închisă la o culoare mai deschisă, de aceeași nuanță. Aceasta este sintaxa intuitivă pe care o oferă HSL.
Pentru că eu am definit animația care să se alterneze infinit, lumina se va alterna de la întuneric la lumină și nu se va opri niciodată. Prin urmare, va părea să clipească.
OK, acum să canalizăm Clark W. Griswold și să animăm o întreagă încărcătură de lumini de Crăciun. Aceasta este ceea ce voi crea:
Vedeți Pen 540257e4a8b727e435c8e4033602ebb0 de Noah Blon (@noahblon) pe CodePen
Am creat cinci lumini diferite colorate. Fiecare lumină este înfășurată într-un div cu o lățime de 20%. Aceste divuri sunt apoi flotate la stânga, astfel încât acestea apar în linie unul cu celălalt. Deoarece nu am setat SVG să fie o înălțime sau lățime setată și să păstreze proprietatea casetei de vizualizare, SVG este fluid la dimensiunea părintelui său, fără a-și pierde raportul de aspect sau calitate. Doar una dintre puterile uriașe ale SVG.
Pentru fiecare SVG, am extins clasa de bază svg-light cu un sufix de culoare (de exemplu svg-light-red). Iată un extras din regulile pe care le-am folosit pentru a anima multele lumini:
.svg-light. bulb animație-durată: 1s; animație-iterație-count: infinit; animație-funcția de sincronizare: ușurință în sus; animație-direcție: alternativă; .svg-lumină - roșu bulb umplere: hsl (6, 63%, 16%); animație-nume: strălucire; animație-întârziere: .5s; durata animației: 1,25s; @ cheie de cadre strălucitoare-roșu 0% umplere: hsl (6, 63%, 16%); 100% umplere: hsl (6, 63%, 56%);
Proprietățile de animație de bază sunt încă aplicate clasei de bază de svg-lumină astfel încât acestea să poată fi împărțite între toate luminile. Pentru fiecare variație de culoare, am creat o animație de tip cheie diferită, cum ar fi strălucire-roșu sau strălucire-albastru și le-a dat diferite întârzieri și durate de animație. În acest fel, luminile vor clipi cu culoarea potrivită și toate nu clipește în același timp.
Voi folosi aceleași concepte pe care le-am descris mai sus pentru a anima cel mai faimos ren de toate, Rudolph. Iată rezultatul final:
Vezi pictograma Pen SVG Rudolph Animat cu CSS de Noah Blon (@noahblon) pe CodePen
În primul rând, îi voi anima nasul roșu stralucitor:
.svg-rudolph .nose animație-nume: strălucire; durata animatiei: 6 s; animație-iterație-count: infinit; animație-funcția de sincronizare: ușurință în sus; animație-direcție: alternativă; @ culorile cheie strălucitoare 0% umplere: hsl (6, 93%, 16%); 50% umplere: hsl (6, 93%, 56%); 100% umplere: hsl (6, 93%, 56%);
Acest lucru pare destul de similar cu lumina noastră de Crăciun. În animația keyframe, anim animat la 50% și apoi la 100%. Durata de animație este de șase secunde, ceea ce înseamnă că, în trei secunde, nasul va deveni roșu mai deschis și va rămâne acea culoare încă trei secunde până la sfârșitul animației. De asemenea, pentru că am setat animația ca alternativă, ea va rula acum de la sfârșitul la început. Prin urmare, nasul va rămâne complet roșu timp de încă trei secunde înainte de a se întuneca în cele din urmă în ultimele trei secunde. Înțelegerea interacțiunii dintre procentele cheie cheie și definițiile de animație, cum ar fi durata, este cheia pentru crearea animațiilor eficiente CSS.
Am aplicat, de asemenea, o tranziție la evidențierea nasului lui Rudy:
.svg-rudolph. nose-evidențiere fill-opacity: 0; animație-nume: evidențiere-decolorare; durata animatiei: 6 s; animație-iterație-count: infinit; animație-funcția de sincronizare: ușurință în sus; animație-direcție: alternativă; @ keyframes highlight-fade 0% umplere-opacitate: 0; 25% umplere-opacitate: 0; 100% opacitate umplere: 1;
Aici animez o proprietate SVG diferită, umple-opacitate. Această proprietate are o valoare cuprinsă între 0 și 1; 0 fiind complet transparent, 1 fiind complet opac. În cele din urmă, voi aduce o viață mai mult lui Rudy făcându-i ochii să clipească:
.svg-rudolph .eye animație-nume: clipi; animație-durată: 8s; animație-iterație-count: infinit; transformare-origine: 50%; @ cheile de chei clipește 0% transform: scaleX (1) scaleY (1); 1% transform: scaleX (1.3) scaleY (0.1); 2% transform: scaleX (1) scaleY (1); 60% transform: scaleX (1) scaleY (1); 61% transform: scarăX (1.3) scaleY (0.1); 62% transform: scaleX (1) scaleY (1); 100% transform: scaleX (1) scaleY (1);
Am creat o animație numită clipi din ochi. Această animație rulează timp de opt secunde și nu se oprește niciodată. Nu voi alterne animația de data aceasta, în loc de animație va rula până la sfârșit și apoi reporniți de la început.
În cadrele cheie, animația care clipește este creată prin manipularea scalei ochilor pe axele X și Y. De exemplu, la marcajul de 1%, ochii sunt scalați la 1,3 în dimensiunea lor pe axa X și de 1 ori la dimensiunea lor normală pe axa Y. Cu alte cuvinte, ele sunt puțin mai largi și mult mai scurte. Un procent din durata de animație mai târziu, scala ochilor revine la normal. Prin urmare, schimbarea scării se realizează extrem de rapid; 8 secunde / 100 = 8 sute de secundă.
O componentă cheie a utilizării transformării pentru a anima elementele SVG este de a seta elementele transformare origine. În majoritatea cazurilor, pentru ca o transformare să fie aplicată corect într-un SVG, trebuie să definim originea coordonatelor de transformare a fi centrul elementului. Spre deosebire de un element HTML, originea transformării unui element SVG este implicit colțul din stânga sus, coordonatul (0,0). Prin stabilirea transformării-origine la (50%, 50%), originile pentru axele X și Y ale transformării vor fi în centrul elementului, iar transformările vor fi aplicate corect.
Notă: Firefox are probleme atunci când vine vorba de transformarea originii. Din nefericire, setarea transformării-origine la 50% reseta de fapt coordonatele X / Y ale elementului. Un lucru în jurul este de a transforma elementul înapoi în poziția sa inițială.
Pentru acest demo, voi anima un clopot care sună astfel:
Vedeți Pen 63cdc3e8e785028deb35132d889b6090 de Noah Blon (@noahblon) pe CodePen
Să aruncăm o privire la un fragment al marcajului SVG:
Am înfășurat schița clopotului și am umplut cu a Acest CSS ar trebui să fie familiar până acum, însă se întâmplă câteva lucruri noi. Mai întâi, în animația keyframe, clopotul este transformat, dar în loc de scara de transformare transformez valoarea de rotație a elementului. Această animație face ca clopotul să oscileze între 27 și -27 grade. Celălalt lucru nou pe care l-am făcut este să folosesc o valoare negativă pentru Am aplicat o animație similară grupului care conține elemente de atac ale clopotului. De data aceasta, cu toate acestea, traduc, sau mișc, elementele de-a lungul axei X, mai degrabă decât rotirea, astfel încât atacantul să oscileze spre stânga și spre dreapta. Pentru această animație, voi anima zăpada care se încadrează într-un glob de zăpadă. Vedeți Pen 2addb5f98c757d61cec87bdcacb5870d de Noah Blon (@noahblon) pe CodePen Am creat o grămadă de elemente de cerc pentru a reprezenta zăpada și am plasat aceste elemente în jurul perimetrului zăpezii, ambalându-le într-o Zăpada nu este vizibilă în afara snowglobului, deoarece am aplicat o cale de tăiere la grupul care conține zăpada. O cale de tăiere este o formă care poate fi aplicată elementelor SVG, mascând altele în cadrul acesteia. În exemplul nostru din lume, am creat o cale circulară de tăiere care acoperă interiorul globului. Am înfășurat calea de tăiere într-un Pentru a aplica calea de tăiere, trimitem URL-ul său, în acest caz ID-ul său precedat de un simbol hash, în proprietatea căii de tăiere inline a unui element SVG: Zăpada este acum vizibilă numai în interiorul acelei căi circulare. Zăpada este animată cu aceleași tehnici pe care le-am descris mai devreme; tradusă de-a lungul axei Y, iar opacitatea de umplere se apropie de zero, pe măsură ce se termină animația. Da, selectorii CSS3 lucrează la elementele SVG! Aici, am dat fiecare element de zăpadă o întârziere diferită, astfel încât să nu cadă pe rând. În cele din urmă, voi anima un text bazat pe SVG pentru a obține un rezultat ca acesta: A se vedea mesajul Pen de Noah Blon (@noahblon) pe CodePen SVG ne oferă posibilitatea de a aplica curse către elementele SVG cu CSS. Pentru ultima mea animație, vă voi arăta cum să trageți progresiv un accident vascular cerebral. Pentru a realiza această animație, am folosit următoarele proprietăți ale cursei: Setarea textului deranjat necesită o lucrare într-un editor grafic. Fluxul meu de lucru este după cum urmează: Iată CSS-ul meu pentru a configura animația: Am definit-o Dacă doriți să aflați mai multe despre această tehnică, consultați postul de animație al lui Jake Archibald în animația SVG. De asemenea, am setat textul să se estompeze după ce desenul de linie a fost finalizat, folosind proprietatea de opacitate de umplere similară cu ceea ce am făcut mai devreme cu animația snowglobe. În acest tutorial, am demonstrat că, cu ajutorul CSS și SVG, puteți crea câteva animații destul de eficiente. Dacă doriți să vă blocați cu tot codul, precum și câteva animații suplimentare, puteți descărca exemplele de la Github sau puteți comanda colecția mea pe Codepen. Dacă doriți să deveniți mai avansați, puteți explora controlarea animațiilor CSS cu JavaScript sau completarea animațiilor dvs. CSS cu o animație JavaScript mai complexă, cum ar fi cea susținută de uimitoarele librării SVG JS Snap SVG. Vă mulțumim că ați urmat împreună cu acest tutorial, nu pot să aștept să văd creațiile pe care le veniți! .svg-clopot. grup-clopot animație-nume: clopot; animație-durată: 3s; animație-iterație-count: infinit; animație-funcția de sincronizare: ușurință în sus; animație-întârziere: -1.5s; animație-direcție: alternativă; transformare-origine: 50%; @ cheie pentru cadre de apel clopot 0% transform: rotate (27deg); 100% transform: rotate (-27deg);
animație întârziere. O valoare negativă determină animația să înceapă acea cantitate de timp în animație. În acest caz, în loc de animație care începe după o întârziere de 1,5 secunde, animația va începe de fapt cu 1,5 secunde în animație. Făcând acest lucru, clopotul va începe în poziția neutră, care este la 1,5 secunde în animație, mai degrabă decât în poziția rotită, care este la 0 secunde în animație. .svg-clopot. animation-name: striker-move; animație-durată: 3s; animație-iterație-count: infinit; animație-temporizare-funcție: liniară; animație-întârziere: 1.5s; animație-direcție: alternativă; transformare-origine: 50%; @ atacuri cheie-cheie 0% transform: translateX (3px); 100% transform: translateX (-3px);
Lasa sa ninga! Lasa sa ninga! Lasa sa ninga!
defs etichetă. SVG ne permite să creăm elemente pe care le putem reutiliza mai târziu, cum ar fi căi de tăiere, filtre sau forme pe care le putem șterge. Este cea mai bună metodă de a împacheta definiții, cum ar fi tăierea căilor într-o etichetă defs astfel încât SVG poate fi mai ușor de citit.
.svg-snowglobe .snow animație-nume: zăpadă; durata animației: 10s; animație-iterație-count: infinit; animație-funcția de sincronizare: ușurință; .svg-snowglobe .snow: n-copil (1) animație-întârziere: 2s; .svg-snowglobe .snow: n-copil (2) animație-întârziere: 4s; .svg-snowglobe .snow: n-copil (3) animație-întârziere: 6s; .svg-snowglobe .snow: n-copil (4) animație-întârziere: 8s; .svg-snowglobe .snow: n-copil (5) animație-întârziere: 10s; .svg-snowglobe .snow: n-copil (6) animație-întârziere: 12s; .svg-snowglobe .snow: n-copil (7) animație-întârziere: 14s; .svg-snowglobe .snow: n-copil (8) animație-întârziere: 16s; .svg-snowglobe .snow: n-copil (9) animație-întârziere: 18s; .svg-snowglobe .snow: n-copil (10) animație-întârziere: 20s;
Săruturile sezonului
accident vascular cerebral lățime: lățimea accidentului. Acest lucru este relativ la dimensiunea SVG și, prin urmare, receptiv.accident vascular cerebral: culoarea accidentului.accident vascular cerebral-dasharray: definește un accident vascular cerebral spart. O serie de valori alternative definesc lungimea părților trase ale liniei punctate și spațiul gol între liniuțe.accident vascular cerebral-dashoffset: definește locul unde cursa începe în raport cu lungimea căii.
.svg-message .text cursa-lățime: 1px; accident vascular cerebral: hsl (6, 63%, 36%); accident vascular cerebral: 1865.753px 1865.753px; accident vascular cerebral-dashoffset: 1865.753px; umplere-opacitate: 0; umpleți: hsl (6, 63%, 36%); animație-nume: accident vascular cerebral, umpleți; durata animației: 1s; animație-întârziere: 0, 1s; animație-iterație-număr: 1; animație-funcția de sincronizare: ușurință în sus; modul animație-umplere: înainte; @framele cheie fadeIn 0% fill-opacity: 0; 100% opacitate umplere: 1; @cadrupuri cheie drawStroke 100% stroke-dashoffset: 0
accident vascular cerebral-dasharray proprietatea a fi lungimea căii totale (puteți găsi această valoare în Illustrator sub Paleta de informații despre document utilizând opțiunea Obiect). Apoi, i-am dat accident vascular cerebral-dashoffset o valoare a lungimii totale a traseului, care împinge întregul accident vascular cerebral în afara vizibilității. Apoi, prin cadre cheie animând accident vascular cerebral-dashoffset proprietate, accident vascular cerebral va atrage progresiv pe ecran.
Mergând mai departe cu SVG și CSS
