SVG linija animacije za neupućene

Danas ćemo animirati ilustraciju stvorenu u Adobe Illustratoru, koristeći SVG i CSS. Koristit ćemo tehniku ​​koju je Polygon popularizirao u njihovim recenzijama Playstation 4 i Xbox One. Ovo su sjajni primjeri onoga što je moguće, ali radit ćemo na nečem mnogo jednostavnijem.

Popsicle.

Priprema vaše vektorske datoteke

Prije nego što započnemo s animiranjem, važno je izdvojiti vrijeme za pravilnu pripremu datoteke. Ovaj početni korak zahtijeva neko znanje ilustratora. Da biste postigli učinak crtanja, prije svega, vaša će ilustracija trebati upotrijebiti poteze. Ako vas zanima samo kako postići efekt crtanja, možete preskočiti ovaj odjeljak.

Navedite svoje slojeve

Uvijek biste trebali imenovati svoje slojeve, a to se posebno odnosi na rad sa SVG-ovima. Ako niste navikli na njih, SVG izlaz može izgledati prilično komplicirano. Budite ljubazni prema svojim budućim osobama ili kolegama i odvojite trenutak kako biste imenovali svoje slojeve. Neka bude jednostavno - samo trebaju biti dovoljno opisni da prepoznaju put. Imenujte podsloj koji su ugniježđeni ispod nadređenog sloja. Podslojeve možete pogledati klikom na padajući roditeljski sloj.

Imenovanje (pod) slojeva prije izvoza uštedjet će vam veliku glavobolju.

izvoz

Obično izvozim odabrani vektor koristeći File> Export Selection ... To osigurava da će se datoteka obrubiti na granice vašeg umjetničkog djela, a ne na vašu ploču. Evo mojih preferiranih postavki izvoza:

Izlaz

Sjećate se kada smo imenovali naše slojeve prije izvoza? Ovo je ovdje što je korisno.

Primijetite li ID-ove? Zamislite da pokušate shvatiti koji je to put kojim ćete pročitati opis staze (d = "M4808.8.395 ..."). Tehnički biste mogli ako ste mazohist s dubokim razumijevanjem sintakse staze.

Optimizacija

Uobičajeno je dobra praksa da optimizirate SVG pomoću alata kao što je SVGO, ali u slučaju poput ovog gdje radite izravno s označavanjem, htjet ćete zadržati svoj izvorni rezultat u taktu. Većina alata za optimizaciju umanjit će i ukloniti datoteku id-a, što otežava rad.

Za više informacija o tome kako optimizirati svoje SVG fotografije pogledajte odličan post Sara Soueidan, SVG savjeti za dizajnere.

Animiranje crte

Prije nego što započnemo, važno je razumjeti dva svojstva: moždani udar-dasharray i moždani udar-dashoffset.

Stroke Dash Array

Svojstvo stroke-dasharray stvara crtice u vašem udaru. U primjeru ispod imam liniju od 200 px. Kao što vidite, podešavanjem vrijednosti stvaraju se ravnomjerno raspoređene crtice i praznine.

Stroke Dash Offset

Svojstvo udaranje-dashoffset određuje udaljenost u putu, uzorak će započeti. Ne brinite se previše o postavkama moždanih udaraca koje sam primijenio. Sve što radi je mijenjanje duljine crtica i praznina (crtica 5px, razmak 10px, razmak crtice 30px, razmak 10px). Povećao sam drugu crticu na 30 piksela kako bih vizualizirao što se događa.

Svojstvo udaranje-dashoffset određuje udaljenost u putu, uzorak će započeti.

Kao što vidite, podešavanje poteza-dashoffset, repozicije ili kompenzacija početnog položaja (pomicanjem unazad) redoslijeda crtica. U primjeru kompenziram za 15 piksela, količina prve crtice i razmaka kombinirana, započinjući hod na drugoj crtici od 30 px.

Animacija offseta

Evo gdje se stvari zabavljaju.

Ako duljinu crtice postavimo na istu duljinu crte i pomaknemo početni položaj jednakom duljinom (upamtite da pomiče početni položaj ulijevo) nećemo vidjeti ništa, jer su crtica i razmak oboje isti duljina. Sada vidimo samo jaz. Ako animiramo pomak na izvornu vrijednost nulu, možemo stvoriti željeni efekt.

Sladit ćemo naš Popsicle

Sada primijenimo ono što smo naučili na svoj prostir.

Trebat ćete utvrditi duljinu svakog puta. Ne treba biti točan. To možete učiniti nagađanjem (obično samo povećavam za 100 dok put nije dovršen), ali ako želite točniji broj, možete se pomaknuti do ploče s informacijama o dokumentu u Illustratoru i odabrati put, prikazat će se njegova dužina.

Prozor> Informacije o dokumentu> Objekti> Staze

Da bih olakšao probavu, sakrio sam atribute puta jer ćemo se u ovom primjeru prvenstveno fokusirati na CSS. Dajem razredu svaki naš put i primjenjujem offset animaciju na njih. Zatim sam pomoću prethodno opisane tehnike dodijelio svakoj cesti niz crtica i pomak crtice.

Evo što ćemo dobiti.

Ovo izgleda dobro, ali možemo i bolje.

Završni dodiri

Povećavanjem vrijednosti crtica možemo ubrzati animaciju određenih poteza. To je zato što ima daljinu za putovanje, ali još samo 2 sekunde za ispunjavanje, što smo i definirali u našoj 'offset' animaciji. Također možemo odgoditi kada se određeni potezi počnu animirati, koristeći animaciju-kašnjenje. Različite brzine i postavljanje kašnjenja na različite poteze stvorit će zanimljiviji ishod.

I tu ga imamo. Ako želite vidjeti kôd, možete ga pronaći ovdje.

Posljednja napomena: Ovo neće raditi s ugrađenim SVG-ovima. Ako planirate koristiti ovo u projektu, morat ćete umetnuti SVG-ove, bilo da se radi ručno ili uz pomoć alata. Mi smo obožavatelj react-inlinesvg, ali ako ne upotrebljavate react, možete pronaći puno drugih ljudi bez previše napora.

Ažuriranje: 19.11.16

Napomena o kompatibilnosti preglednika

Nekoliko čitatelja istaknulo je probleme s ovom tehnikom u određenim preglednicima. Ovaj sam dio dodao za cjelovitost.

Microsoft Edge

Ova tehnika je podržana. Edge zahtijeva da koristite eksplicitnu jedinicu za vrijednosti svojstava. Dakle, u našem slučaju jednostavno moramo prilagoditi sva svojstva poteza da bismo koristili "px" kao svoju jedinicu. Ažurirao sam olovku da ih uključim.

Internet Explorer

Nažalost, Internet Explorer ne podržava animiranje svojstva stroke-dashoffset pomoću css.

Najjednostavnija preporuka bila bi onemogućiti animaciju u IE-u i dati prioritet prikazu vašeg sadržaja. Ako želite podržati Internet Explorer, na raspolaganju vam je nekoliko JavaScript rješenja.

  1. Korisnik StackOverflow prikazuje rješenje koje ažurira offset za svaki kadar u animaciji.
  2. Vivus je popularni dodatak koji se isporučuje s različitim animacijama i mogućnostima.

Veliko hvala CSS trikovima i Voxu za njihov rad na ovoj temi. Više informacija o tehnici potražite na ovim poveznicama.