SVG Marsjerande Maura

0
25

Maxim Leyzerovich opprettet marsjerande maura effekt med noen delectably enkel SVG.

Se Penn SVG Marsjerande Maura av Maxim Leyzerovich (@runde) på CodePen.

La oss ta det fra hverandre bit for bit og se alle de små delene kommer sammen.

Trinn 1: Tegn et rektangel dang

Kan vi sette opp våre SVG som en firkant, men har størrelsesforholdet ignorert og har det flex inn hva rektangel vi ønsker.

<svg viewbox=’0 0 40 40′ preserveAspectRatio=’none’>
<rect bredde=’40’ height=’40’ />
</svg>

Med en gang vi blir minnet på at koordinatsystemet inne i en SVG-enhet er mindre. Her er vi si, “Dette SVG er en 40×40 rutenett. Nå tegner du et rektangel som dekker hele rutenettet.” Vi kan fortsatt størrelse hele SVG i CSS om. La oss tvinge det til å være nøyaktig halvparten av viewport:

svg {
position: absolute;
bredde: 50vw;
høyde: 50vh;
øverst: 0;
høyre: 0;
nederst: 0;
venstre: 0;
margin: auto;
}

Trinn 2: Kjempe squish

Fordi vi gjorde safe og rutenettet slik fleksibel, vil vi få noen squishing at vi trolig kunne ha forutsett. Si at vi har et slag som er 2 vidt i vår koordinatsystem. Når SVG er smal, er det fortsatt behov for å splitte den smale plass til 40 enheter. Det betyr at den hjerneslag vil være ganske smal.

Vi kan stoppe det ved å fortelle slag for å være ikke-skalering.

rect {
fyll: ingen;
hjerneslag: #000;
hjerneslag-bredde: 10px;
vektor-effekt: ikke-skalering-takts;
}

Nå hjerneslag vil oppføre seg mer som en ramme på et HTML-element.

Trinn 3: Tegne korset linjer

I Maxim ‘ s demo, han trekker linjene i midten med fire baneelementer. Husk, vi har en 40×40 koordinatsystem, slik at matematikk er stor:

<bane d=’M 20,20 L 40,40′ />
<bane d=’M 20,20 L 00,40 ‘/>
<bane d=’M 20,20 L 40,0′ />
<bane d=’M 20,20 L 0,0’ />

Dette er fire linjer som starter i nøyaktig sentrum (20,20) og gå til hvert hjørne. Hvorfor fire linjer i stedet for to som går hjørne til hjørne? Jeg mistenker det er fordi de marsjerende maur animasjon senere ser litt kulere hvis alle maurene kommer fra sentrum heller enn crisscrossing.

Jeg elsker den fine syntaks av banen, men la oss bare bruke to linjer for å være annerledes:

<linje x1=”0″ y1=”0″ x2=”40″ y2=”40″></line>
<linje x1=”0″ y1=”40″ x2=”40″ y2=”0″></line>

Hvis vi bruker vårt slag til begge våre rect og linje, det fungerer! Men vi ser en litt merkelig sak:

rect, linje {
fyll: ingen;
hjerneslag: #000;
hjerneslag-width: 1px;
vektor-effekt: ikke-skalering-takts;
}

Utsiden linjen vises tynnere enn innsiden linjer, og grunnen er at den ytre rektangel er klemme den eksakte utsiden av SVG. Som et resultat, noe utenfor det som er kuttet av. Det er ganske frustrerende, men strøk i SVG alltid skreve stiene som de sitter på, så nøyaktig halvparten av den ytre strøk (0.5 px) er skjult. Vi kan doble rektangel alene for å “fikse” det:

rect, linje {
fyll: ingen;
hjerneslag: #000;
hjerneslag-width: 1px;
vektor-effekt: ikke-skalering-takts;
}

rect {
hjerneslag-bredde: 2px;
}

Maxim også kaster en form-gjengivelse: geometricPrecision; på det fordi, tilsynelatende, det renser opp ting litt på ikke-retina-skjermer.

Trinn 3: Maur er bindestreker.

Andre enn de rare skrevende-the-line ting, SVG slag tilbyr måte mer kontroll enn CSS grenser. For eksempel, CSS har knust og strødd grensen stiler, men har ingen kontroll over dem. I SVG, vi har kontroll over lengden av bindestreker og mengden av plass mellom dem, takket være hjerneslag-dasharray:

rect, linje {

/* 8px bindestreker med 2px områder */
hjerneslag-dasharray: 8px 2px;
}

Vi kan til og med få virkelige rart med det:

Men maur ser bra ut med 4px bindestreker og 4px mellomrom mellom, slik at vi kan bruke en forkortelse av hjerneslag-dasharray: 4px;.

Trinn 5: Animere maur!

“Marsjordre” en del av “marsjerande maur” kommer fra animasjon. SVG slag har også muligheten til å bli oppveid av en bestemt avstand. Hvis vi plukker en avstand som er nøyaktig like lenge som dash og gapet sammen, så animere motvirket av at avstand, kan vi få en jevn bevegelse av hjerneslag design. Vi har selv dekket denne før for å skape en effekt av en SVG-som tegner seg selv.

rect, linje {

hjerneslag-dasharray: 4px;
hjerneslag-dashoffset: 8px;
animasjon: hjerneslag 0.2 s lineær uendelig;
}

@keyframes slag {
{
hjerneslag-dashoffset: 0;
}
}

Her er vår kopi og original:

Se Penn SVG Marsjerande Maura av Maxim Leyzerovich (@runde) på CodePen.

Igjen, kanskje min favoritt del her er den skarpe 1px linjer som ikke er begrenset av størrelsen eller størrelsesforholdet i det hele tatt og hvor lite kode det tar å sette det hele sammen.