Share
Idag förstärker vi dig genom att använda animateTransform att generera inline-animeringar med SVG (skalbar vektorgrafik).
Om du är nybörjare till SVG rekommenderar jag att du checkar ut Komma igång med skalbar vektorgrafik (SVG) för att få dig snabbt.
De tekniker du kommer att lära kommer att låta dig skapa sofistikerade ikoner och bildanimeringar utan en enda GIF, JPEG eller PNG, utan noll JavaScript och utan den svagaste viskningen av Flash.
De animeringar du skapar blir enkla att redigera senare eftersom de är ren kod, och resultaten tar bara upp ett par KB av värdefull bandbredd när de ses.
För att animera SVG-former behöver du först möjligheten att skapa dem. Jag har hittat det enklaste sättet att skapa SVGs är att använda Sketch from Bohemian Coding. Om du inte äger Sketch kan du ta en gratis 30-dagars prov för syftet med denna handledning.
Vi kommer att manipulera SVG-koden, så efter att du har ritat en form i Sketch, skapa en skiva runt den och exportera den skivan som en SVG-fil.
Du kan då öppna din exporterade fil i en kodredigerare (som Sublime Text) och kopiera SVG-koden inifrån. Allt du behöver är koden från öppningen tagg till stängningen märka.
Sketch genererar till exempel följande SVG-kod för den blå rektangeln ovan:
För att göra koden visuellt lättare att arbeta med gör vi några små ändringar i koden.
Ställ in svg elementets bredd och höjd till 100% och ta bort viewBox miljö. Ta även bort Generator kommentar och titel, desc, defs och g element.
Du borde sluta med något så här:
Släpp den koden i ett HTML-dokument och när du tittar i webbläsaren ska du se samma blå rektangel på din sida som du såg i Sketch:
Notera: Ovanstående bild innehåller en X- och Y-axel i bakgrunden, eftersom du behöver förstå dessa för att skapa animationer. Du lär dig varför snart.
Det korta svaret är, animateTransform element genererar animeringar genom att ställa in transformationsegenskaper på den SVG-form som den appliceras på.
Med tanke på att den logiska nästa frågan är:
tillsats omvandla Inställningar i en form gör att du kan ändra hur den formen visas i 2D-utrymme. Det finns fem olika typer av omvandling du kan utföra:
Accentsconagua
ÖversättskalaroteraskewXskewYDe animateTransform attributet tillåter dig att animera mellan olika omvandlingslägen, så innan du börjar animera är det viktigt att förstå hur omvandlingar faktiskt fungerar.
Eftersom omvandlingar arbetar i 2D-utrymme, hänför sig alla inställningar till X- och Y-koordinater som ritats på en X / Y-axel, som du såg bilden bakom vår blå rektangel tidigare.
X axeln är den horisontella linjen i 2D-rymden och Y axeln är den vertikala linjen. Som standard börjar varje form på en position av 0 på båda X och Y axel.0 position på X axeln motsvarar positiva värden mot flyttning till höger och negativa värden motsvarar flyttningen till vänster.0 position på Y axeln motsvarar positiva värden att de går nedåt och negativa värden motsvarar att de rör sig uppåt. Om det inte är helt meningslöst, oroa dig inte, eftersom det blir mycket tydligare när du ser exemplen på varje typ av omvandling nedan.
Oroa dig inte heller om koden för dessa transformationer, eftersom vi kommer att täcka det när vi flyttar till skapande animeringar. Till att börja med vill jag bara att du ska få det väsentliga med vad de fem typerna av omvandling faktiskt gör.
Detta förskjuter formens position på X-axeln (horisontal) och Y-axeln (vertikal).
Till exempel, här är vår blå rektangel med Översätt värden på 150 på X (horisontell) axel och 20 på Y (vertikal axel:
Kom ihåg från avsnittet ovanför de positiva värdena på X axeln motsvarar rörelse till höger och positiva värden på Y axeln motsvarar att röra sig nedåt.
Genom att ställa in Översätt värde för X till positiv 150, vår rektangel har flyttats till höger med 150 pixlar. Ställ in värdet för Y till positiv 20 har flyttat vår rektangel ner med 20 pixlar.
Detta multiplicerar formens övergripande storlek på X-axeln (bredd) och Y-axeln (höjd).
Skalinställningar fungerar som multiplikatorer av formens ursprungliga storlek. Till exempel, om vi ställer in X skala till 3 det skulle göra formen tre gånger bredare. Om vi ställer in Y skala till 1,25 det skulle göra formen en och en kvart gånger högre, som så:
Också översatt (150, 20)Detta roterar formen runt en given punkt i grader.
Rotation fungerar genom att ange antalet grader genom vilka du vill rotera formen. Till exempel här är vår rektangel roterad med 45 grader:
Också översatt (150, 20)Som standard roterar formen runt sitt övre vänstra hörn, men du kan också rotera runt en annan punkt. Vi täcker hur det görs senare i handledningen.
Detta snedställer formen längs axeln X (horisontell).
Skewing längs X-axeln fungerar också i grader. Till exempel, i bilden nedan är vår rektangel skevad med 20 grader längs X-axeln:
Också översatt (150, 20)Detta snedställer formen längs Y (vertikal) axeln i grader.
skewY fungerar på exakt samma sätt som skewX, bara omvandlingen sker vertikalt längs Y-axeln som så:
Också översatt (150, 20)Nu när du vet vilka omvandlingar som faktiskt gör, kan du börja skapa animeringar mellan olika omvandlingsformer. Grundprocessen har tre steg:
från stat.till stat.från och den tillstat.Detta förstås bäst genom ett praktiskt exempel, så låt oss börja med att animera en Översätt omvandling.
Du kommer ihåg det tidigare vi började med vår blå rektangel vid dess standardposition 0 0, d.v.s.. 0 på X axel och 0 på Y axel. Vi ställer in denna position som vår från stat.
Vi tittade sedan på ett exempel på samma blå rektangel med översättningsinställningar för 150 20 appliceras, dvs. 150 på X axel och 20 på Y axel. Vi ställer in denna position som vår till stat.
Använder sig av animateTransform Vi kan göra rektangeln glatt mellan våra från och vår till stater över en period av två sekunder.
Din SVG-form, i detta fall rektangel, måste ha både öppnings- och stängningskoder, t.ex..
De animateTransform attributet ska placeras mellan dessa taggar som så:
Ta en titt på de egenskaper som har ställts in inom animateTransform märka. Det här kontrollerar hur din animation körs.
Vi har satt typ att översätta, vilket innebär att vi kommer att tillämpa en Översätt transformationstyp. Som planerat har vi satt vår 0 0 position i från stat och vårt 150 20 position i till stat.
Värdet för Börja är satt till 0s, vilket betyder att animeringen börjar noll sekunder efter belastning, och dur är satt till 2s, vilket innebär att animeringen kommer att springa över en period av två sekunder. Slutligen har vi inkluderat repeat satt till obestämd vilket innebär att animationen spelas upp på slingan.
Detta ger oss följande animering:
Processen är exakt densamma för att rotera alla fyra av de andra typerna av transformationer. Efter att ha ställt in typ värdet till vilken typ av omvandling du vill ha, ange värden för din från och till transformationstillstånd.
Till exempel kan vi använda följande animateTransform inställningar för att skala vår rektangel upp till den storlek du såg i det tidigare avsnittet om skalförvandling:
Eftersom skalaomvandlingsinställningarna multiplicerar formens ursprungliga storlek börjar vi med ett värde av 1 1 på från miljö. Genom att göra detta sätts dess ursprungliga storlek med en multiplikation av 1.
Vår till Inställning av 3 1,25 kommer att animera vår skala omvandling upp till tre gånger den ursprungliga bredden på X-axeln och en och en fjärdedel av den ursprungliga höjden på Y-axeln.
Notera: Du hittar dina faktiska in-webbläsare animeringar kör mycket mjukare än den skärmupptagning GIF du ser ovan.
Vi kan också kombinera de två animationerna vi hittills har skapat, för att både översätta och skala samtidigt. Du kan bara använda en enda animateTransform tagga inuti din rect tagg, så att du ska använda flera animeringar måste du inkludera en uppsättning g taggar, som representerar en grupp SVG-objekt.
För att göra detta arbete, lägg till öppning och stängning rect tags:
Lägg sedan till din andra animering utanför stängningen tag, men innan stängningen märka. I det här fallet kommer vi att återinföra vår translate transformation:
Vi har nu både skala och översätta transformationer som animerar samtidigt:
Du kan använda animateTransform en gång per form eller grupp. Om du behöver lägga till fler animeringar, lägg in en annan uppsättning grupptaggar runt din kod och bygga din extra animateTransform tagga inuti den.
Låt oss ta en snabb titt på de återstående tre transformationstyperna, var och en skapad genom att bara ändra typ, från och till inställningar, och också kombinerat med vår ursprungliga översättning animation.
I detta exempel typ har ställts in till rotera, från har ställts in till 0 till att börja med ingen rotation, och till har ställts in till 45 så vi roterar 45 grader över två sekunder:
I följande två animeringar typ har ställts in till skewX och skewY respektive, från är satt till 0 till att börja med ingen skevning, och till har ställts in till 20 så vi skev vid 20 grader över två sekunder:
Animerad skewX-transformation
Animerad skewY-transformationDet finns ett oändligt antal möjligheter till animeringar du kan skapa med hjälp av dessa grundläggande tekniker, men en av de mest omedelbara användbarheten är skapandet av laddningsikoner där du tidigare har kunnat åberopa animerade GIF-filer.
Detta är en laddningsikon som jag skapade om cirka fem minuter med Sketch:
Jag exporterade sedan den till en SVG-fil som gav mig följande kod:
Med tanke på den här ikonen ingår flera former inom en grupp, och som vi har lärt oss ovan kan ni söka animateTransform till en grupp lade jag till min animeringskod före sista stängningen märka:
Ovanstående kod sätter ikonen att rotera från 0 till 360 grader, dvs en hel cirkel.
Observera att den här gången har jag också inkluderat ett extra två nummer i båda från och till inställningar. Detta berättar att animationen ska rotera runt en punkt på formen egna interna X / Y-axel av 18 18, d.v.s. mitten av formen som ges den är 36x36 pixlar i storlek.
Detta ger följande animering:
Återigen blir din webbläsaranimering mjukare än ovanstående GIF, så var noga med att kolla in den riktiga saken. Som du kan se är det väldigt snabbt och enkelt att sammanfoga animationer som du kan få solid praktisk användning av.
Om du ännu inte har kört på SVG-animering borde du nu ha de verktyg du behöver för att få en bra solid start.
