Share
I dag skal vi sette deg igjennom det grunnleggende ved å bruke animateTransform å generere inline-animasjoner med SVG (skalerbar vektorgrafik).
Hvis du er helt ny hos SVG, anbefaler jeg at du sjekker ut Komme i gang med skalerbar vektorgrafik (SVG) for å få deg raskere.
Teknikkene du lærer vil tillate deg å lage sofistikert ikon og bildeanimasjoner uten en enkelt GIF, JPEG eller PNG, med null JavaScript, og uten den svakeste hvisken av Flash.
Animasjonene du lager vil være enkle å redigere senere fordi de er ren kode, og resultatene vil bare ta opp et par KB med dyrebar båndbredde når de blir sett.
For å animere SVG-figurer trenger du først muligheten til å lage dem. Jeg har funnet den enkleste måten å lage SVGs på, å bruke Sketch from Bohemian Coding. Hvis du ikke eier Sketch, kan du ta en gratis 30-dagers prøveperiode i forbindelse med denne opplæringen.
Vi vil manipulere SVG-koden, så etter at du har tegnet en form i Sketch, lager du et stykke rundt det og eksporterer det stykket som en SVG-fil.
Du vil da kunne åpne din eksporterte fil i et kodeditor (som Sublime Text) og kopiere SVG-koden fra innsiden. Alt du trenger er koden fra åpningen tag til avslutningen stikkord.
Sketch genererer for eksempel følgende SVG-kode for det blå rektangelet som er vist ovenfor:
For å gjøre koden visuelt enklere å jobbe med, gjør vi et par små endringer i koden.
Sett svg elementets bredde og høyde til 100% og slett ViewBox innstilling. Slett også Generator kommentar og tittel, desc, defs og g elementer.
Du bør ende opp med noe slikt:
Slett den koden i et HTML-dokument, og når du ser på nettleseren, bør du se det samme blå rektangel på siden din som du så i Sketch:
Merk: Bildet ovenfor inneholder en X- og Y-akse i bakgrunnen, da du må forstå disse for å lage animasjonene dine. Du lærer hvorfor snart.
Det korte svaret er, animateTransform element genererer animasjoner ved å sette transformasjonsegenskaper på SVG-formene som den brukes på.
Gitt det, er det logiske neste spørsmålet:
legge forvandle Innstillinger til en form gjør at du kan endre hvordan denne formen vises i 2D-plass. Det er fem forskjellige typer transformasjon du kan utføre:
Accentsconagua
oversetteskalarotereskewXskewYDe animateTransform Attributt lar deg animere mellom ulike transformasjonsformer, så før du begynner å animere, er det viktig å forstå hvordan transformasjoner faktisk fungerer.
Fordi transformasjoner opererer i 2D mellomrom, relaterer deres innstillinger til X- og Y-koordinater plottet på en X / Y-akse, som du så avbildet bak det blå rektangelet tidligere.
X akse er den horisontale linjen i 2D mellomrom, og Y akse er den vertikale linjen. Som standard starter hver form på en posisjon av 0 på begge X og Y akser.0 posisjon på X akse, positive verdier korresponderer med å flytte til høyre, og negative verdier korresponderer med å flytte til venstre.0 posisjon på Y aksen, svarer positive verdier med å bevege seg nedover, og negative verdier samsvarer med å bevege seg oppover. Hvis dette ikke gir full mening, så vær ikke bekymret, da det blir mye tydeligere som du ser eksemplene på hver type transformasjon nedenfor.
Ikke bekymre deg for koden for disse transformasjonene, heller, da vi vil dekke det når vi går videre til å lage animasjoner. Til å begynne med vil jeg bare at du skal få essensielle nedskrifter på hva de fem typer transformasjon faktisk gjør.
Dette forandrer formens posisjon på X-aksen (horisontal) og Y-aksen (vertikal).
For eksempel, her er vårt blå rektangel med oversette verdier av 150 på X (horisontal) akse og 20 på Y (vertikal akse:
Husk fra delen over de positive verdiene på X akse samsvarer med å flytte til høyre, og positive verdier på Y akse samsvarer med å bevege seg nedover.
Ved å sette inn oversette verdi for X til positiv 150, vårt rektangel har flyttet til høyre med 150 piksler. Angir verdien for Y til positiv 20 har flyttet rektangelet ned med 20 piksler.
Dette multipliserer formenes overordnede størrelse på X-aksen (bredde) og Y-aksen (høyde).
Skalinnstillinger fungerer som multiplikatorer av formenes originale størrelse. For eksempel, hvis vi setter X skala til 3 det ville gjøre formen tre ganger bredere. Hvis vi setter inn Y skala til 1,25 det ville gjøre formen en og en fjerdedel ganger høyere, slik som:
Også oversatt (150, 20)Dette roterer formen rundt et gitt punkt i grader.
Rotasjon fungerer ved å angi antall grader som du vil rotere formen på. For eksempel, her er vårt rektangel rotert med 45 grader:
Også oversatt (150, 20)Som standard vil formen rotere rundt sitt øverste venstre hjørne, men du kan også få det til å rotere rundt et annet punkt. Vi vil dekke hvordan det gjøres senere i opplæringen.
Dette skiller formen langs X (horisontal) akse.
Skewing langs X-aksen fungerer også i grader. For eksempel, i billedet nedenfor er rektangelet skjevt med 20 grader langs X-aksen:
Også oversatt (150, 20)Dette skiller formen langs Y (vertikal) akse i grader.
SkewY fungerer på akkurat samme måte som SkewX, bare transformasjonen skjer vertikalt langs Y-aksen som sådan:
Også oversatt (150, 20)Nå som du vet hva forandringer egentlig gjør, kan du begynne å lage animasjoner mellom forskjellige tilstander av transformasjon. Den grunnleggende prosessen har tre trinn:
fra stat.til stat.fra og tilstat.Dette forstås best gjennom et praktisk eksempel, så la oss begynne med å animere en oversette transformasjon.
Du vil huske at tidligere begynte vi med vårt blå rektangel på standardposisjonen til 0 0, dvs. 0 på X akse og 0 på Y akser. Vi stiller denne posisjonen som vår fra stat.
Vi så på et eksempel på det samme blå rektangel med oversettelsesinnstillinger for 150 20 anvendt, dvs.. 150 på X akse og 20 på Y akser. Vi stiller denne posisjonen som vår til stat.
Ved hjelp av animateTransform Vi kan gjøre rektangelet glidende glatt mellom vår fra og vår til stater over en periode på to sekunder.
Din SVG-form, i dette tilfellet rektangel, må ha både åpnings- og lukkekoder, f.eks.
De animateTransform attributtet skal plasseres mellom disse kodene slik:
Ta en titt på egenskapene som er satt inn i animateTransform stikkord. Dette er hva som kontrollerer hvordan animasjonen din går.
Vi har satt type å oversette, noe som betyr at vi skal bruke en oversette transformasjonstype. Som planlagt har vi satt vår 0 0 posisjon i fra stat og vår 150 20 posisjon i til stat.
Verdien for begynne er satt til 0s, betyr at animasjonen vil begynne null sekunder etter belastning, og dur er satt til 2s, som betyr at animasjonen vil løpe over en periode på to sekunder. Til slutt har vi tatt med repeatCount satt til ubestemt noe som betyr at animasjonen vil spille på løkke.
Dette gir oss følgende animasjon:
Prosessen er nøyaktig den samme for å rotere alle fire av de andre typer transformasjoner. Etter å ha satt inn type Verdien til hvilken type transformasjon du vil, skriv inn verdier for din fra og til transformasjonstilstander.
For eksempel kan vi bruke følgende animateTransform innstillinger for å skala vårt rektangel opp til den størrelsen du så i den tidligere delen om skalaomforming:
Fordi skalaomformingsinnstillinger multipliserer formenes opprinnelige størrelse begynner vi med en verdi på 1 1 på fra innstilling. Å gjøre dette setter sin opprinnelige størrelse ved en multiplikasjon på 1.
Våre til innstilling av 3 1,25 vil animere vår skala transformasjon opptil tre ganger den opprinnelige bredden på X-aksen, og en og en fjerdedel av den opprinnelige høyden på Y-aksen.
Merk: Du finner dine faktiske in-browser animasjoner kjører mye jevnere enn skjermbildet GIF du ser ovenfor.
Vi kan også kombinere de to animasjonene vi har laget så langt, både til å oversette og skala samtidig. Du kan bare bruke en enkelt animateTransform tag inne din rect tag, så å bruke flere animasjoner må du innlemme et sett med g koder, som representerer en gruppe SVG objekter.
For å gjøre dette arbeidet, legg til åpning og lukking rect tags:
Legg deretter til din andre animasjon utenfor lukkingen tag, men før avslutningen stikkord. I dette tilfellet skal vi reintroduce vår translate transformasjon:
Vi har nå både skala og oversette transformasjoner som animerer samtidig:
Du kan bruke animateTransform en gang per form eller gruppe. Hvis du trenger å legge til flere animasjoner, sett inn et annet sett med gruppetiketter rundt koden din og nest tillegget ditt animateTransform tag inne i det.
La oss ta en rask titt på de resterende tre transformasjonstyper, hver enkelt opprettet ved å endre bare type, fra og til innstillinger, og også kombinert med vår opprinnelige oversettelse animasjon.
I dette eksemplet type har blitt satt til rotere, fra har blitt satt til 0 til å begynne med ingen rotasjon, og til har blitt satt til 45 så vi roterer 45 grader over to sekunder:
I de følgende to animasjonene type har blitt satt til skewX og skewY henholdsvis, fra er satt til 0 til å begynne med ingen skeving, og til har blitt satt til 20 så vi skjev av 20 grader over to sekunder:
Animert skewX transformasjon
Animert skewY transformasjonDet finnes et uendelig antall muligheter for animasjoner du kan opprette ved hjelp av disse grunnleggende teknikkene, men en av de mest umiddelbart nyttige er opprettelsen av lastingsikoner der du tidligere kunne ha stolt på animerte GIFs.
Dette er et lastingsikon jeg opprettet på omtrent fem minutter med Sketch:
Jeg eksporterte den deretter til en SVG-fil som ga meg følgende kode:
Gitt dette ikonet består av flere former i en gruppe, og som vi har lært ovenfra kan du søke animateTransform til en gruppe, la jeg til animasjonskoden før sist avsluttet stikkord:
Koden ovenfor angir ikonet for å rotere fra 0 til 360 grader, dvs. en full sirkel.
Merk at denne gangen har jeg også inkludert et ekstra to tall i begge fra og til innstillinger. Dette forteller at animasjonen dreier seg om et punkt på formens egen indre X / Y-akse på 18 18, dvs. midten av formen gitt den er 36x36 piksler i størrelse.
Dette gir følgende animasjon:
Igjen, vil din animasjon i nettleseren bli jevnere enn den ovennevnte GIF, så sørg for å sjekke ut den virkelige tingen. Som du kan se, er det veldig raskt og enkelt å sette sammen animasjoner du kan få solid praktisk bruk ut av.
Hvis du ennå ikke har spilt på SVG-animasjon, bør du nå ha verktøyene du trenger for å få en god solid start.
