Share
Animere slag av en SVG er perfekt for å simulere håndskrift. I løpet av to opplæringsprogrammer skal vi bruke CSS-animasjon for å få en signatur til å bli skrevet som om du selv signerer siden.
Her er hva vi skal bygge:
Før vi dykker inn i en kode, trenger vi en SVG-versjon av signaturen din. Det spiller ingen rolle hvilken programvare du bruker til å gjøre dette, men prøv å holde linjene og kurvene så glatte som mulig for best mulig effekt.
Her er min, som du kan se er tegnet med tre separate stier:
Første sti
Andre sti
Tredje banenForsikre deg om at tavlen er beskåret tett til signaturen, og lagre filen som en SVG.
Å åpne filen i en kodeditor vil avsløre SVGs XML-struktur. Avhengig av hvilket program du pleide å designe, pluss hvordan du lagret eller eksporterte det, har du en element med litt mumbo jumbo før den. Mumbo jumboen kan fjernes.
I dette tilfellet ser elementene vi er igjen med, ut som:
Innenfor våre viktigste vi har en
Vi må separat målrette disse vektorene med CSS litt senere, så sørg for at de hver har et passende klassenavn. De elementet vil sannsynligvis allerede ha et id som gjenspeiler lagnavnet i programmet det ble designet med.
Jeg har gitt vektorer mine klassenavn avhengig av hva de er (den første er "jeg" i mitt navn, for eksempel).
I rettferdighet vil din SVG ikke se ganske godt ut. Hver av disse vektorer vil ha en last av koordinater, pluss flere attributter begravet i dem. Koordinatene må bli, men vi kan fjerne noen av de ofte brukte egenskapene og plassere de i CSS i stedet, og hold det fint og tørt..
Jeg skal bygge dette ved hjelp av CodePen, men du kan bruke frittstående HTML- og CSS-dokumenter hvis du foretrekker det. Lim inn SVG-koden direkte i HTML-dokumentet ditt. Deretter fjerner du attributter hver av banen og linjene har felles, plasserer dem i stedet i CSS-dokumentet. For eksempel vil du legge merke til attributter som:
Accentsconagua
fylle = "ingen" hjerneslag = "# 0F436D" slag-width = "2" slag-linecap = "runde" slag-linejoin = "runde" slag-miterlimit = "10"Disse kan fjernes og brukes via CSS i stedet, slik som:
bane, linje fill: none; slag: # 2a3745; strekkbredde: 2; strekklinjeknapp: rund; stroke-linejoin: runde; stroke-miterlimit: 10;
Mye renere!
For å animere slagene til denne SVG skal vi bruke en teknikk som først ble diskutert av Jake Archibald. Ideen er som følger: Hver av disse vektorer skal gis a stiplede hjerneslag. Vi gjør dette ved å bruke en slag-dasharray verdi innenfor CSS:
For hver av disse vektorene lager vi slag-dasharray nettopp lengden på banen, slik at hver enkelt har en enkelt dash som dekker hele lengden. Dette tar litt prøve og feil, men i vårt tilfelle ser verdiene ut slik:
.stroke-I stroke-dasharray: 80; .stroke-en slag-dasharray: 360; .streke-blomstre slag-dasharray: 40;
Nå, for å animere disse slagene, må vi kompensere hver av bindestrekene slik at mellomrom dekker vektoren, ikke den bindestrek. Gir det mening? Disse illustrasjonene kan hjelpe. I denne første, forestill deg at den stiplede linjen blir brukt til å dekke blomsten på slutten av signaturen.
Nå i denne har vi kompensert bindestrek, så det er gapet som er over blomstret:
Nå er alt vi trenger å gjøre, bruk CSS til å animere fra offset-staten til den andre.
CSS animasjon er avhengig av først definerer keyframes. Hver keyframe representerer stater langs en tidslinje, og våre nettlesere gir animasjonene mellom dem.
La oss først se hvordan denne dash offset kan animeres. Vi bruker første slag, "I", og animerer mellom to stater. Begynn med å sette opp noen keyframes:
@keyframes write1 0% stroke-dashoffset: 80; 100% slag-dashoffset: 0;
Her gir vi keyframes et navn (write1) og ved bruk av stenografi syntax spesifisere at i begynnelsen av tidslinjen (0%) vi vil ha slag-dashoffset å være 80. Med andre ord: bindestrek, som er akkurat 80px lang, vil bli kompensert helt.
På slutten av tidslinjen (på 100%) vi vil ha slag-dashoffset å være 0, så dashet er en gang dekker vektoren.
Nå har vi våre keyframes, la oss feste dem til en animasjon. Vi legger til en annen erklæring til vår slag-I regel:
.stroke-I stroke-dasharray: 80; animasjon: write1 3s uendelig lineær;
Her bruker du animasjon eiendom, sier vi at vi vil bruke write1 keyframes definert for et øyeblikk siden, vil vi ha det hele til å vare nøyaktig 3 sekunder, vi vil at animasjonen skal gå uendelig og vi vil ha hastigheten til å være lineær (slik at det ikke er akselerasjon eller retardasjon).
Her er hva vi får:
Merk: Jeg bruker Autoprefixer i CodePen som sparer meg for å bruke nettleserprefikser på animasjonsspillene.
Vi må definere to flere sett med nøkkelrammer (write2 og write3) for de resterende vektorer i signaturen - og vi må kompensere med de riktige dashlengder vi oppdaget tidligere:
@keyframes write2 0% stroke-dashoffset: 360; 100% slag-dashoffset: 0; @keyframes write3 0% stroke-dashoffset: 40; 100% slag-dashoffset: 0;
Da må vi bruke disse animasjonene til de resterende to vektorer:
.strekk-en slag-dasharray: 360; animasjon: write2 3s uendelig lineær; .streke-blomstre slag-dasharray: 40; animasjon: write3 3s uendelig lineær;
Her er hva vi får:
Nå kommer vi et sted! Hver vektor animerer perfekt, i en lineær bevegelse som varer 3 sekunder.
Neste steg? Å få dem til å animere i rekkefølge.
For øyeblikket har vi tre slag alle animerer samtidig. Imidlertid ønsker vi ideelt at "jeg" for å animere, da "en", så til slutt blomstre på slutten. Hvis vi skulle visualisere det langs en tidslinje, kan det se slik ut:
Vi kan faktisk representere disse delene av tidslinjen perfekt i våre CSS-keyframes. For eksempel er den første delen (fra 0% til 33,3%) når vi vil at "jeg" skal animere, så vi endrer keyframes til 33,3% i stedet for 100%:
@keyframes write1 0% stroke-dashoffset: 80; 33,3% slag-dashoffset: 0;
Nå, da alle tre animasjonene våre har samme lengde (3 sekunder), kan vi sørge for at den andre ikke starter til 33.3%, når den første animasjonen er fullført:
@keyframes write2 0%, 33.3% stroke-dashoffset: 360; 100% slag-dashoffset: 0;
Her er det som gir oss:
De to første animasjonene flyter pent, så la oss forbedre ting ved å få den andre til å bli ferdig på 66,6%, da kan endelig animasjon starte. Våre nøkkelrammer ser slik ut:
@keyframes write1 0% stroke-dashoffset: 80; 33,3% slag-dashoffset: 0; @keyframes write2 0%, 33,3% slag-dashoffset: 360; 66,6% takts-dashoffset: 0; @keyframes write3 0%, 66.6% stroke-dashoffset: 40; 100% slag-dashoffset: 0;
Og sekvensen ser slik ut:
Det vi har er bra, men det er ikke perfekt - sikkert langt fra en realistisk pennebevegelse. Hver av disse tre vektorer trekkes i løpet av ett sekund, uavhengig av lengden. Mellomvektoren er lengre enn den siste, så det bør logisk ta lengre tid å tegne. En bedre tidslinje kan se slik ut:
For ekstra realisme er det enda et gap mellom den første vektorgraderingen og den andre begynnelsen. Så la oss endre våre keyframe-verdier for å gjenspeile det:
@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% slag-dashoffset: 0;
Til slutt, la oss få fart på ting ved å endre alle 3s verdier til 2s. Vi kan også oppdatere animasjonserklæringene slik at hver enkelt kjører bare én gang, ikke uendelig looping:
animasjon: write1 2s 1 lineær;
Du vil kanskje også spille med lineær verdi, i stedet legge til litt lettelse som ease-in, ease-in-out, ease-out etc. for å gjøre bevegelsen mindre ensartet. Hva gir alt dette oss?
Vi har gjort store fremskritt og lært mye underveis! I neste veiledning tar vi ting et skritt videre, ved å bruke Waypoints.js for å hjelpe oss med å kontrollere når animasjonen finner sted. jeg ser deg der!
