Lage lagdelt animasjon med SVG. Elementer som separate lag
Forbereder SVG For bruk på nettet er dette en veldig enkel prosess, ikke mer komplisert enn å eksportere en JPEG eller PNG. Bruk det grafikkredigeringsprogrammet du er kjent med (Illustrator, Sketch, Inkscape [gratis] osv. [eller til og med Photoshop hvis du bruker formlag]) med bildestørrelsen du planlegger å bruke. Jeg jobber vanligvis i Illustrator, så jeg skal forklare noen av måtene å forberede filer i det programmet på, men de gjelder vanligvis for alle programmer. Det kan være lurt å konvertere teksten til kurver, siden skriften mest sannsynlig vil gjengi feil, med mindre du planlegger å style dem med nettskrifttypen som brukes på siden (noe som er mulig!). Det er heller ikke en god idé å konvertere alle objekter til enkeltformer, spesielt hvis du har streker som må manipuleres på siden, spesielt siden konvertering av objekter ofte ikke reduserer filstørrelsen. Eventuelle navn tilordnet grupper eller lag vil bli lagt til SVG som en element-ID. Dette er ganske praktisk for styling, men vil øke Generell størrelse fil.
Før du eksporterer, må du sjekke at alle bildene er i et heltalls pikselrutenett (det vil si for eksempel ikke 23,3 px × 86,8 px). Ellers vil mest sannsynlig bildet ikke ha nok klarhet og en del av bildet vil bli kuttet av. I Illustrator kan dette gjøres på følgende måte: Objekt > Tegnebrett > Tilpass til kunstverkgrenser. Klikk deretter lagre som og velg SVG, og la standardinnstillingene stå. Det er litt optimalisering vi kan gjøre her, men det er virkelig ikke verdt det siden vi kommer til å bruke forskjellige forbedringsteknikker senere, så vi vil ikke kaste bort tid på disse justeringene foreløpig.
Triks for å redusere filstørrelser.
(Se optimalisering)
Å oppnå minste størrelse SVG, det ville være logisk å fjerne alt unødvendig fra det. Den mest kjente og nyttig program(Av i det minste Jeg tror det) for behandling av SVG er det SVGO . Hun fjerner alt nødvendig kode. Men! Vær forsiktig når du bruker dette programmet hvis du planlegger å manipulere SVG med CSS/JS, da det kan rydde opp i koden for mye, og gjøre fremtidige endringer vanskelig. En annen fordel med SVGO er at den kan inkluderes i prosessen med å automatisk bygge et prosjekt, men du kan også bruke GUI hvis du vil.
Forstå mer detaljert med riktig fjerning alt unødvendig, vi kan gjøre noe annet i grafisk redaktør. Først må du sørge for at du bruker så få stier/former som mulig, samt punkter på disse stiene. Du kan kombinere og forenkle alt som kan forenkles, og fjerne alle unødvendige punkter. Illustrator har VectorScribe-plugin med Smart verktøy Remove Brush Tool, som vil hjelpe deg å fjerne poeng og fortsatt gå generell form Samme.
Foreløpig optimalisering
Smart Remove Brush Tool fjernet punkter
Deretter vil vi forstørre bildet. I Illustrator er det praktisk å slå på Vis > Pikselforhåndsvisning med et pikselrutenett og sjekke hvordan konturene er plassert. Det vil ta litt tid å plassere konturene på rutenettet, men innsatsen vil lønne seg og resultere i renere gjengivelse (det er best å være oppmerksom på dette på forhånd).
Punkter utenfor rutenettet
Justere til rutenettet
Hvis det er to eller flere objekter som skal justeres, er det verdt å fjerne alle unødvendige overlappinger. Noen ganger, selv om konturene er nøye justert, kan en tynn hvit linje være synlig. For å forhindre dette kan du litt overlappe objektene der de overlapper hverandre. Viktig: i SVG har z-indeksen en viss rekkefølge, som avhenger av objektet som ligger under, så det er verdt å plassere det øverste objektet i Nedre del fil i koden.
Og til slutt, sist men ikke minst, noe som vanligvis glemmes er å aktivere gzip-komprimering av SVG på nettstedet ditt i .htaccess-filen.
AddType image/svg+xml svg svgz
Som et eksempel på hvor effektiv denne teknikken er, tar jeg den originale Breaking Borders-logoen og optimaliserer den på denne måten: øke størrelsen til hva den skal være; Jeg skal sette konturene i orden; Jeg vil slette så mange punkter som mulig; flytt punktene med heltallspiksler; Jeg flytter alle overlappingsområdene og sender alt til SVGO.
Original: 1.413b
Etter optimalisering: 409b
Som et resultat ble filstørrelsen ~71% mindre (og ~83% mindre når den ble komprimert)
En av de beste måtene presentasjonsgrafikk på nettet er skalerbar Vektorgrafikk. Dette er takket være at SVG kan tilpasse seg enhver skjermstørrelse uten å miste kvalitet.
Hva er Snap.svg?
Snap.svg er JavaScript-bibliotek, som har som mål å hjelpe nettutviklere med å levere avansert SVG-funksjoner på Internett. Dette biblioteket er i stand til å laste, animere og til og med lage SVG-grafikk rett i nettleseren. Snap ble skapt av Dmitry Baranovsky, som også skapte Raphael, men i motsetning til ham, dette biblioteket laget for å støtte de fleste moderne nettlesere.
Opprettelse enkel svg grafikk
Når du har lastet ned biblioteket og inkludert det på siden din, er det første du må gjøre å lage et SVG HTML-element:
Deretter bekrefter du Snap-biblioteket:
Var s = Snap();
Ved å utelate overflateparametrene til tegningen vår, vil den automatisk være 100 % x 100 % i størrelse, men hvis du vil spesifisere en spesifikk bredde og høyde, kan du gjøre det slik:
Var sirkel = s.sirkel(200, 200, 100);
Denne koden lager en enkel 100px radiussirkel som er plassert 200px fra toppen og venstre side av siden vår.
Bakgrunnen til skjemafyllet er svart som standard, men vi kan endre den, sammen med bredden på strekene, ved å bruke attr-metoden:
Circle.attr(( fyll: "#6A8EAB", slag: "#fff", strokeWidth: 3 ));
Selvfølgelig kan vi lage andre former med ved å bruke Snap, for eksempel rektangler:
Varr = s.rect(100, 100, 75, 75, 5);
Denne koden lager et 100px rektangel øverst og til venstre for arbeidsplass, med en bredde og høyde på 75 piksler og en kantradius på 5 piksler.
Vi kan også legge til tekst:
Var t = s.text(50, 50, "WebDesignMagazine");
Du kan legge til ting som polygoner, ellipser og gradienter. Hvis vi har mer enn ett element på tegneflaten, lar Snap oss gruppere dem som følger:
Var-sirkler = s.gruppe(s.sirkel(100, 150, 70), s.sirkel(200, 150, 70));
Snap gjør det mulig å animere elementene våre:
Circle.animate((r: 50), 2000);
En av Snaps største fordeler er dens evne til å laste eksisterende SVG-er:
Snap.load("image.svg", funksjon (f) ( // Code ));
Denne koden importerer SVG-filene, men for å plassere dem på tegnebrettet vårt må vi legge det til:
Snap.load("image.svg", funksjon (f) ( g = f.select("g"); s.append(g); ));
Nå har vi den på tegnebrettet, og vi kan gjøre den drabar:
G.drag();
Og i likhet med elementene vi så tidligere, kan vi også endre attributter til bildene våre som fyllfarge eller streker. Men dette må gjøres før bildet legges til tavlen:
F.select("polygon").attr((fyll: "#FF0000"));
Som du kan se, lar select-metoden oss søke gjennom elementer. I i dette tilfellet, ser vi etter eventuelle polygoner med svart bakgrunn og endrer dem deretter til røde.
Bruker du allerede dette biblioteket i prosjektene dine? Hvis ja, legg det igjen i kommentarene - det vil være veldig interessant å se på den ferdige versjonen.
Høye konverteringer!
Vi har lenge lovet å lage en video om animasjonen av SVG-elementer på sider, men det gikk liksom aldri. I dag er vi endelig glade for å presentere deg den første videoen i serien, der vi vil fortelle deg om SVG-animasjonsalternativer: med bruker CSS, SMIL og JavaScript (ved å bruke eksempelet Snap.svg).
Faktisk, med denne videoen var det som med Mistrals. Det var ingen omstendigheter for opptak. Vel, nå har det endelig ordnet seg.
SVG-animasjoner
La oss prøve igjen å sette alt sammen med lenker. Det er tre måter å animere SVG-elementer på en side, hvorav to også gjelder for HTML-elementer. Jeg snakker selvfølgelig om CSS og JavaScript-animasjoner. Men for SVG kan du også bruke SMIL (Synchronized Multimedia Integration Language) animasjoner.
SMIL-animasjoner
Dette er en veldig kul teknologi hvis vi trenger å animere baner og samtidig lagre alt i én SVG-fil. Ja, CSS-animasjoner kan også inkluderes i en fil, men med deres hjelp kan du ikke animere d-attributtet til stier, så SMIL viser seg å være mye mer interessant teknologi. Faktisk kan JavaScript også inkluderes direkte i SVG-filer, men nettleserstøtten er litt annerledes, så du må tenke på hva og hvordan du skal bruke.
SMIL har vært støttet i alle nettlesere siden uminnelige tider (siden tidligere versjoner), unntatt Internet Explorer, som ikke støtter disse animasjonene før nå.
CSS-animasjoner
Alt er veldig tydelig her, vi har lenge vært vant til å bruke CSS til små animasjoner HTML-elementer. Det samme kan gjøres med SVG: de fleste attributter kan animeres og nettleserstøtten er mye bedre. Vel, fordi i det minste Internet Exporer 10 lærte om et slikt fenomen som CSS-animasjoner.
JavaScript-animasjoner
Den mest pålitelige og praktiske løsningen, som alltid, er JavaScript, det er ingen flukt fra dette. Når du jobber med grensesnitt, er dette det eneste alternativet for å skripte noe. Heldigvis finnes det allerede ganske mange biblioteker for å jobbe med SVG.
Noen inkluderer til og med animasjonsfunksjoner, for eksempel Snap.svg. Jeg vil anbefale dette biblioteket til alle, selv om mange er vant til å jobbe med Velocity.js, har denne tilnærmingen også rett til å eksistere.
- Opplæringen
Jeg tror mange har sett anmeldelsene spillkonsoller ny generasjon fra Polygon (Vox Media). Dette er de der konsollene ble tegnet i blåkopistil:
Anmeldelsene så kule ut, ganske uvanlige og nye. Om hvordan hovedfunksjonen til anmeldelser implementeres - SVG-animasjon, hvordan du gjør noe lignende selv, og hvilke andre "hemmelige" funksjoner den gode gamle SVG skjuler når det gjelder animasjon av baneelementet - du kan finne ut under kuttet.
Stroke-dasharray interpolasjon, teori
Generelt er teknikken for slik linjeanimasjon ikke ny, det er bare at inntil nylig ble SVG og alt knyttet til det, etter min mening, urettferdig overført til glemselen, men heldigvis er situasjonen i endring. Så trikset for å animere baneelementet er mulig takket være stroke-dasharray-egenskapen til baneelementet. Denne egenskapen lar deg angi parametrene til en stiplet linje, nemlig lengden på streken og avstanden mellom strekene. Setter vi slagets lengde lik hele linjens lengde, får vi en vanlig heltrukket linje. Hvis du setter slaglengden lik null, og lengden på gapet er igjen lik hele lengden på linjen, da får vi en usynlig linje. Og ved å gradvis øke lengden på slaget med en gaplengde lik lengden på hele linjen, kan vi simulere tegningen. Med denne tilnærmingen vil tegning skje fra begynnelsen av linjen. Hvis du plutselig trenger å tegne fra slutten, må du bruke en egenskap til: stroke-dashoffset . Denne egenskapen spesifiserer forskyvningen for det første slaget. Dermed, ved å redusere forskyvningen og øke lengden på slaget, får vi tegning fra slutten av linjen.Gutta fra Vox Media de brukte et hybridalternativ (som, etter min mening, er overflødig), forresten, du kan (og bør) lese om hvordan de gjorde dette på bloggen deres: Polygon feature design: SVG animations for fun and profit.
Implementering av SVG-animasjon
I Vox Media de foreslår å bruke requestAnimationFrame for jevn animasjon, men vi har litt forskjellige mål, så vi tar en enklere rute, bruker D3.js-biblioteket og den varighetsbaserte animasjonen implementert i den.Her er den faktiske arbeidskoden som ble brukt til å animere konsollen fra begynnelsen av artikkelen.
Queue() .defer(d3.xml, "PS4.svg", "image/svg+xml") .await(ready); function ready(error, xml) ( //Legge til svg-filen vår i HTML-dokumentet var importedNode = document.importNode(xml.documentElement, true); d3.select("#pathAnimation").node().appendChild(importedNode); var svg = d3.select("svg"), svgWidth = svg.attr("width"), svgHeight = svg.attr("height"); var paths = svg.selectAll("bane") .call(transition) ; function transition(path) ( path.transition() .duration(5000) .attrTween("stroke-dasharray", tweenDash) .each("end", function() ( d3.select(this).call(transition) ; )); // uendelig sløyfe ) funksjon tweenDash() ( var l = this.getTotalLength(), i = d3.interpolateString("0," + l, l + "," + l); // interpolasjon av slag -dasharray attr returfunksjon(t) (retur i(t); ); ) )
La oss starte med å bevege oss langs linjen, uten å rotere foreløpig.
Queue() .defer(d3.xml, "wiggle.svg", "image/svg+xml") .await(ready); function ready(error, xml) ( //Legge til svg-filen vår i HTML-dokumentet var importedNode = document.importNode(xml.documentElement, true); d3.select("#pathAnimation").node().appendChild(importedNode); var svg = d3.select("svg"); var bane = svg.select("path#wiggle"), startPoint = pathStartPoint(bane); var markør = svg.append("sirkel"); marker.attr(" r", 7).attr("transform", "translate(" + startpunkt + ")"); overgang(); //Få banestartpunkt for plassering av markørfunksjon pathStartPoint(path) ( var d = path.attr( "d"), dsplitted = d.split(" "); returner dsplitted.split(","); ) funksjon transition() (markør.transition() .duration(7500) .attrTween("transform", translateAlong( path.node())) .each("end", overgang);// infinite loop ) funksjon translateAlong(bane) ( var l = path.getTotalLength(); return funksjon(i) ( return funksjon(t) ( var p = path.getPointAtLength(t * l); returner "translate(" + p.x + "," + p.y + ")";//Flytt markør ) ) ) )
Her trekker pathStartPoint(path) koordinatene til starten av linjen fra baneelementets attributt. I translateAlong(path) settes koordinatene til markøren vår ved hjelp av en interpolator. Et eksempel kan sees her: Markør-animasjon langs SVG-baneelement med D3.js. Du kan også kombinere linjetegningsanimasjon og markørbevegelse; det kan se slik ut: Markøranimasjon langs SVG-baneelementet med D3.js II .
La oss komplisere oppgaven, legge til rotasjon (vel, og endre markøren fra en sirkel til noe mer interessant). Som markør vil vi ha en rakett med en bredde på 48 og en lengde på 24. Siden markørens standard forankringspunkt er det øverste venstre hjørnet, må vi forskyve det slik at det festes til midten av markøren. Det er også nødvendig å ta hensyn til dette når du roterer, fordi det som standard også forekommer rundt venstre øverste hjørne. Vi ser ut til å ha ordnet opp i forskyvningen. La oss nå gå direkte til rotasjon, her vil definisjonen av en tangent hjelpe oss, vi vil bestemme vinkelen ved hjelp av arctangens.
TranslateAlong(path)-funksjonen som definerer interpolatoren vil se slik ut:
Funksjon translateAlong(path) ( var l = path.getTotalLength(); var t0 = 0; return function(i) (retur funksjon(t) ( var p0 = path.getPointAtLength(t0 * l);//previous point var p = path.getPointAtLength(t * l);////gjeldende punkt var vinkel = Math.atan2(p.y - p0.y, p.x - p0.x) * 180 / Math.PI;//vinkel for tangent t0 = t ; //Skifte sentrum til sentrum av raketten var centerX = p.x - 24, centerY = p.y - 12; return "translate(" + centerX + "," + centerY + ")rotate(" + angle + " 24" + " 12 "+")"; ) ) )
Implementeringen kan sees her.