Share
Animarea cursei unui SVG este perfectă pentru simularea scrierii de mână. În cursul a două tutoriale, vom folosi animația CSS pentru a face o semnătură să pară îngrijorat să fie scrisă, ca și cum ați semna pagina.
Iată ce vom construi:
Înainte de a ne arunca în orice cod, vom avea nevoie de o versiune SVG a semnăturii tale. Nu contează ce software utilizați pentru a face acest lucru, dar încercați să păstrați linii și curbe cât mai netede pentru cel mai bun efect.
Iată-mi aia, pe care o puteți vedea, este trasată cu trei căi separate:
Prima cale
Al doilea drum
Calea a treiaAsigurați-vă că tabloul dvs. de artă este tăiat strâns la semnătură, apoi salvați fișierul ca SVG.
Deschiderea fișierului într-un editor de cod va dezvălui structura XML a SVG. În funcție de aplicația pe care ați folosit-o pentru ao proiecta, plus cum l-ați salvat sau ați exportat, veți avea unul element cu unele mumbo jumbo înainte de ea. Mumbo jumbo poate fi eliminat.
În acest caz, elementele pe care le-am rămas arată cu ceva asemănător:
În principalele noastre noi avem un
Va trebui să vizăm separat aceste vectori cu CSS mai târziu, așa că asigurați-vă că fiecare dintre ele are un nume de clasă potrivit. elementul va avea deja un ID care reflectă numele stratului în aplicația cu care a fost proiectat.
Mi-am dat numele de clasă a vectorilor în funcție de ceea ce sunt (prima este "eu" în numele meu, de exemplu).
În mod corect, SVG dvs. nu va arăta destul de curat. Fiecare dintre aceste vectori va avea o încărcătură de coordonate, plus câteva atribute îngropate în ele. Coordonatele vor trebui să rămână, dar putem elimina unele dintre atributele utilizate în mod obișnuit și le punem pe loc în CSS, păstrând lucrurile frumoase și DRY.
Am de gând să construiesc acest lucru folosind CodePen, dar puteți utiliza documente independente HTML și CSS dacă preferați. Lipiți codul SVG direct în documentul dvs. HTML. Apoi, eliminați atributele pe care fiecare element de cale și element de linie le au în comun, plasându-le în schimb în documentul CSS. De exemplu, veți observa atribute precum:
Accentsconagua
umple = "none" accident vascular cerebral = "# 0F436D" AVC-width = "2" AVC-linecap = "rotund" AVC-linejoin = "rotund" AVC-miterlimit = "10"Acestea pot fi înlăturate și aplicate prin intermediul CSS, ca de exemplu:
calea, linia fill: none; accident vascular cerebral: # 2a3745; mărimea cursei: 2; accident vascular cerebral: rundă; accident vascular cerebral: rundă; accident vascular cerebral-miterlimit: 10;
Foarte curat!
Pentru a anima loviturile acestui SVG, vom folosi o tehnică discutată inițial de Jake Archibald. Ideea este următoarea: fiecare dintre acești vectori va fi dat punctată accident vascular cerebral. Facem acest lucru aplicând a accident vascular cerebral-dasharray valoare în cadrul CSS:
Pentru fiecare dintre aceste vectori facem accident vascular cerebral-dasharray tocmai lungimea căii, astfel încât fiecare are o singură linie care acoperă întreaga lungime. Acest lucru ia un pic de încercare și de eroare, dar în cazul nostru valorile arata arata astfel:
.accident vascular cerebral-I accident vascular cerebral: 80; .stroke-a stroke-dasharray: 360; . incursiune-inflorire stroke-dasharray: 40;
Acum, pentru a anima aceste accidente vasculare cerebrale, trebuie să compensăm fiecare dintre liniuțe astfel încât decalaj acoperă vectorul, nu liniuță. Are sens? Aceste ilustrații ar putea ajuta. În prima, imaginați-vă că linia întreruptă este folosită pentru a acoperi înflorirea la sfârșitul semnăturii.
Acum, în acest aspect, am compensat linia, așa că e decalajul care este înfloritor:
Acum, tot ce trebuie să facem este să folosim CSS pentru a anima de la starea offset la celălalt.
CSS animația se bazează pe prima definire a cadrelor cheie. Fiecare cadru cheie reprezintă state de-a lungul unei cronologii, apoi browserele noastre fac animațiile între ele.
Să vedem mai întâi cum poate fi animat acest offset bord. Vom folosi primul accident vascular cerebral, "eu", și voi anima între două state. Începeți prin configurarea unor cadre cheie:
@frame-cheie scriere1 0% stroke-dashoffset: 80; 100% stroke-dashoffset: 0;
Aici dăm cadrele cheie un nume (write1) și utilizând sintaxa stenografică specifică faptul că la începutul calendarului (0%) dorim accident vascular cerebral-dashoffset a fi 80. Cu alte cuvinte: cratimă, care are o lungime de 80px, va fi compensată complet.
La sfârșitul liniei de timp (la 100%) dorim accident vascular cerebral-dashoffset a fi 0, astfel încât bordul acoperă încă o dată vectorul.
Acum avem cadrele cheie, să le atașăm la o animație. Adăugăm o altă declarație la adresa noastră accident vascular cerebral-I regulă:
.accident vascular cerebral-I accident vascular cerebral: 80; animație: write1 3s infinit liniar;
Aici, folosind animaţie proprietate, spunem că vrem să folosim write1 cadrele cheie definite acum un moment, vrem ca totul să dureze exact 3 secunde, dorim ca animația să se încrucișeze infinit și dorim ca viteza să fie liniar (astfel încât să nu existe nici o accelerare sau decelerare).
Iată ce obținem:
Notă: Folosesc Autoprefixer în CodePen, ceea ce mă salvează de faptul că trebuie să folosesc prefixele de browser pentru chestiile de animație.
Trebuie să definim două seturi de cadre cheie (write2 și write3) pentru vectorii rămași din semnătura - și trebuie să compensăm cu ajutorul lungimilor corecte descoperite mai devreme:
@frame-cheie write2 0% stroke-dashoffset: 360; 100% stroke-dashoffset: 0; @ cheile de chei scrie3 0% stroke-dashoffset: 40; 100% stroke-dashoffset: 0;
Apoi trebuie să aplicăm aceste animații celor doi vectori rămași:
.accident vascular cerebral-a stroke-dasharray: 360; animație: write2 3s infinit liniar; . incursiune-inflorire stroke-dasharray: 40; animație: write3 3s infinit liniar;
Iată ce obținem:
Acum ajungem undeva! Fiecare vector animă perfect, într-o mișcare liniară, care durează 3 secunde.
Urmatorul pas? Pentru a le anima in secvență.
În prezent, avem trei lovituri animate simultan. Cu toate acestea, în mod ideal dorim ca "eu" să animăm, apoi "an", apoi în cele din urmă să înflorească la sfârșit. Dacă ar fi să vedem că de-a lungul unei cronologii ar putea arăta astfel:
De fapt, putem reprezenta aceste secțiuni ale cronologiei perfect în keyframele CSS. De exemplu, prima secțiune (de la 0% la 33,3%) este când vrem să animăm "I", așa că modificăm cadrele cheie pentru a termina la 33,3% în loc de 100%:
@frame-cheie scriere1 0% stroke-dashoffset: 80; 33,3% stroke-dashoffset: 0;
Acum, având în vedere că toate cele trei animații au aceeași lungime (3 secunde), putem asigura că al doilea nu începe până la 33,3%, când prima animație este completă:
@frame-cheie write2 0%, 33,3% stroke-dashoffset: 360; 100% stroke-dashoffset: 0;
Iată ce ne dă:
Primele două animații curg frumos, așa că haideți să îmbunătățim lucrurile obținându-le pe cel de-al doilea pentru a termina la 66,6%, moment în care animația finală poate începe. Cadrele noastre cheie vor arăta astfel:
@frame-cheie scriere1 0% stroke-dashoffset: 80; 33,3% stroke-dashoffset: 0; @primile chei scriu2 0%, 33,3% stroke-dashoffset: 360; 66,6% stroke-dashoffset: 0; @ cheile de chei scriu3 0%, 66,6% stroke-dashoffset: 40; 100% stroke-dashoffset: 0;
Și secvența va arăta astfel:
Ceea ce avem este bun, dar nu este perfect - cu siguranta departe de o miscare realista. Fiecare dintre acești trei vectori este tras în cursul unei secunde, indiferent de lungimea sa. Vectorul de mijloc este mai lung decât ultimul, deci ar trebui să dureze mai mult timp pentru a atrage. O cronologie mai bună poate arăta astfel:
Pentru realismul adăugat, există chiar și un decalaj între prima finisare a vectorului și cel de-al doilea început. Deci, haideți să modificăm valorile cheie ale cadrului pentru a reflecta faptul că:
@frame-cheie scriere1 0% stroke-dashoffset: 80; 20% stroke-dashoffset: 0; @cadre de chei scrie2 0%, 25% stroke-dashoffset: 360; 90% stroke-dashoffset: 0; @frame-cheie scriere3 0%, 90% stroke-dashoffset: 40; 100% stroke-dashoffset: 0;
În cele din urmă, să accelerăm lucrurile prin schimbarea tuturor 3s valori pentru 2s. Putem, de asemenea, să actualizăm declarațiile de animație astfel încât fiecare să ruleze o singură dată, nu într-un mod infinit de buclă:
animație: write1 2s 1 linear;
S-ar putea să doriți să jucați cu liniar valoare, adăugând o anumită ușurare, cum ar fi ușurința în, ușurința în-out, ușura-out etc. pentru a face mișcarea mai puțin uniformă. Ce ne dă toate acestea?
Am făcut progrese mari și am învățat foarte mult pe drum! În următorul tutorial vom face lucrurile cu un pas mai departe, folosind Waypoints.js pentru a ne ajuta să controlam când are loc animația. ne vedem acolo!
