Share
Vandaag zullen we je door de basisprincipes van het gebruik leiden animateTransform om inline animaties te genereren met SVG (schaalbare vectorafbeeldingen).
Als u helemaal nieuw bent op SVG, raad ik u aan eerst Aan de slag met schaalbare vectorafbeeldingen (SVG) te kijken om u op de hoogte te houden.
Met de technieken die u gaat leren, kunt u geavanceerde pictogram- en afbeeldingsanimaties maken zonder een enkele GIF, JPEG of PNG, zonder JavaScript en zonder het minste gefluister van Flash.
De animaties die u maakt, kunnen later eenvoudig worden bewerkt omdat het pure code is en de resultaten kosten slechts een paar KB aan kostbare bandbreedte wanneer ze worden bekeken.
Als u SVG-shapes wilt animeren, moet u eerst de mogelijkheid hebben om ze te maken. Ik heb gemerkt dat de eenvoudigste manier om SVG's te maken is om Sketch from Bohemian Coding te gebruiken. Als je geen Sketch hebt, kun je een gratis proefversie van 30 dagen volgen voor deze tutorial.
We zullen de SVG-code manipuleren, dus nadat u een vorm in Sketch hebt getekend, maakt u er een segment omheen en exporteert u dat segment als een SVG-bestand.
U kunt dan uw geëxporteerde bestand openen in een code-editor (zoals Sublime-tekst) en de SVG-code van binnenuit kopiëren. Het enige dat je nodig hebt, is de code van de opening tag aan de sluiting label.
Schets genereert bijvoorbeeld de volgende SVG-code voor de blauwe rechthoek hierboven afgebeeld:
Om de code visueel gemakkelijker te maken, werken we met een paar kleine wijzigingen aan de code.
Stel de svg element breedte en hoogte naar 100% en verwijder de Viewbox setting. Verwijder ook de Generator opmerking en de titel, desc, defs en g elementen.
Je zou moeten eindigen met zoiets als dit:
Zet die code neer in een HTML-document en als u deze in de browser bekijkt, ziet u dezelfde blauwe rechthoek op uw pagina als in Sketch:
Notitie: De bovenstaande afbeelding bevat een X- en Y-as op de achtergrond, zodat u deze moet begrijpen om uw animaties te maken. Je zult snel leren waarom.
Het korte antwoord is, de animateTransform element genereert animaties door transformatie-eigenschappen in te stellen op de SVG-vorm waarop deze is toegepast.
Gegeven dat, de logische volgende vraag is:
Het toevoegen transformeren instellingen in een vorm kunt u wijzigen hoe die vorm in de 2D-ruimte wordt weergegeven. Er zijn vijf verschillende soorten transformatie die u kunt uitvoeren:
Accentsconagua
vertalenschaaldraaienskewXskewYDe animateTransform attribuut stelt u in staat te animeren tussen verschillende transformaties, dus voordat u gaat animeren, is het belangrijk om te begrijpen hoe transformaties werken.
Omdat transformaties in 2D-ruimte werken, hebben hun instellingen allemaal betrekking op X- en Y-coördinaten geplot op een X / Y-as, zoals je eerder achter onze blauwe rechthoek zag afgebeeld.
X as is de horizontale lijn in de 2D-ruimte en de Y as is de verticale lijn. Standaard start elke vorm op een positie van 0 op beide X en Y as.0 positie op de X as, positieve waarden komen overeen met naar rechts verplaatsen en negatieve waarden komen overeen met naar links verplaatsen.0 positie op de Y as, positieve waarden komen overeen met naar beneden bewegen en negatieve waarden komen overeen met omhoog bewegen. Als dit nog niet helemaal logisch is, maakt u zich geen zorgen, omdat het veel duidelijker wordt naarmate u voorbeelden ziet van elk type transformatie hieronder.
Maakt u zich ook geen zorgen over de code voor deze transformaties, zoals we zullen behandelen wanneer we verder gaan met het maken van animaties. Om te beginnen wil ik alleen dat je de essentie krijgt over wat de vijf soorten transformatie eigenlijk doen.
Dit verschuift de positie van de vorm op de X-as (horizontaal) en de Y-as (verticaal).
Hier is bijvoorbeeld onze blauwe rechthoek met vertalen waarden van 150 op de X (horizontale) as en 20 op de Y (verticale as:
Onthoud uit het bovenstaande gedeelte dat positieve waarden op de X as komt overeen met naar rechts bewegen, en positieve waarden op de Y as komt overeen met naar beneden bewegen.
Door de vertalen waarde voor X naar positief 150, onze rechthoek is met 150 pixels naar rechts verplaatst. De waarde instellen voor Y naar positief 20 heeft onze rechthoek met 20 pixels naar beneden verplaatst.
Hiermee vermenigvuldigt u de totale grootte van de vorm op de X-as (breedte) en Y-as (hoogte).
Schaalinstellingen werken als vermenigvuldigers van de oorspronkelijke grootte van de vorm. Als we bijvoorbeeld de X schaal naar 3 het zou de vorm drie keer breder maken. Als we de Y schaal naar 1.25 het zou de vorm één en een kwart keer hoger maken, zoals zo:
Ook vertaald (150, 20)Dit roteert de vorm rond een bepaald punt in graden.
Rotatie werkt door het aantal graden in te stellen waarmee u de vorm wilt roteren. Hier is bijvoorbeeld onze rechthoek 45 graden gedraaid:
Ook vertaald (150, 20)Standaard draait de vorm rond de linkerbovenhoek, maar u kunt hem ook om een ander punt laten draaien. We zullen bespreken hoe dat later in de tutorial is gedaan.
Dit verschuift de vorm langs de X (horizontale) as.
Schuintrekken langs de X-as werkt ook in graden. In de onderstaande afbeelding is onze rechthoek bijvoorbeeld 20 graden scheef langs de X-as:
Ook vertaald (150, 20)Hierdoor wordt de vorm langs de Y (verticale) as in graden scheefgetrokken.
skewY werkt op precies dezelfde manier als skewX, alleen de transformatie gebeurt verticaal langs de Y-as, zoals zo:
Ook vertaald (150, 20)Nu u weet wat transformaties eigenlijk doen, kunt u beginnen met het maken van animaties tussen verschillende transformatiestaten. Het basisproces bestaat uit drie stappen:
van staat.naar staat.van en de naarstaat.Dit wordt het best begrepen door een praktisch voorbeeld, dus laten we beginnen met het animeren van een vertalen transformatie.
Je zult je herinneren dat we eerder begonnen met onze blauwe rechthoek op de standaardpositie van 0 0, d.w.z. 0 op de X as en 0 op de Y as. We zullen deze positie als onze instellen van staat.
We hebben toen gekeken naar een voorbeeld van diezelfde blauwe rechthoek met vertaalinstellingen van 150 20 toegepast, d.w.z.. 150 op de X as en 20 op de Y as. We zullen deze positie als onze instellen naar staat.
Gebruik makend van animateTransform we kunnen de rechthoek soepel laten schuiven tussen onze van en onze naar staat gedurende een periode van twee seconden.
Uw SVG-vorm, in dit geval de rechthoek, moet zowel openings- als sluitingstags hebben, bijvoorbeeld.
De animateTransform attribuut moet als volgt tussen deze tags worden geplaatst:
Bekijk de eigenschappen die zijn ingesteld in de animateTransform label. Dit is wat bepaalt hoe je animatie werkt.
We hebben gezet type vertalen, wat betekent dat we een vertalen transformatie type. Zoals gepland, hebben we onze 0 0 positie in de van staat, en onze 150 20 positie in de naar staat.
De waarde voor beginnen ingesteld op 0s, wat betekent dat de animatie nul seconden na het laden begint, en dur ingesteld op 2s, wat betekent dat de animatie over een periode van twee seconden loopt. Eindelijk, we hebben opgenomen repeatCount ingesteld op onbepaald wat betekent dat de animatie in de lus wordt afgespeeld.
Dit geeft ons de volgende animatie:
Het proces is precies hetzelfde voor het roteren van alle vier de andere soorten transformaties. Na het instellen van de type waarde voor welk type transformatie dan ook, voer waarden in voor uw van en naar transformatiestaten.
We kunnen bijvoorbeeld het volgende gebruiken animateTransform instellingen om onze rechthoek op te schalen tot de grootte die je in het eerdere gedeelte over schaaltransformatie hebt gezien:
Omdat schaaltransformatie-instellingen de oorspronkelijke grootte van de vorm vermenigvuldigen, beginnen we met een waarde van 1 1 op de van setting. Als u dit doet, wordt de originele grootte ingesteld op een vermenigvuldiging van 1.
Onze naar instelling van 3 1.25 zal onze schaaltransformatie tot drie maal de oorspronkelijke breedte op de X-as animeren, en één en een kwart van de oorspronkelijke hoogte op de Y-as.
Notitie: U zult zien dat uw daadwerkelijke animaties in de browser veel vloeiender zijn dan de GIF-schermen die u hierboven ziet.
We kunnen de twee animaties die we tot nu toe hebben gemaakt, ook combineren om tegelijkertijd te vertalen en te schalen. Je kunt alleen een single gebruiken animateTransform tag in je rect tag, dus als u meerdere animaties wilt gebruiken, moet u een set opnemen g tags, die een groep SVG-objecten vertegenwoordigen.
Om dit te laten werken, voegt u openen en sluiten toe rect tags:
Voeg vervolgens uw tweede animatie toe buiten de sluitingsdatum tag, maar voor de afsluiting label. In dit geval gaan we onze vertaaltransformatie opnieuw introduceren:
We hebben nu zowel schaal- als vertaaltransformaties gelijktijdig aan het animeren:
Je kunt gebruiken animateTransform eenmaal per vorm of groep. Als u meer animaties wilt toevoegen, wikkel dan nog een set groepstags om uw code en nest uw aanvullende code animateTransform tag erin.
Laten we de resterende drie transformatietypen snel bekijken, elk gemaakt door alleen de type, van en naar instellingen, en ook gecombineerd met onze originele vertaalanimatie.
In dit voorbeeld type is ingesteld op draaien, van is ingesteld op 0 om te beginnen zonder rotatie, en naar is ingesteld op 45 dus we roteren 45 graden over twee seconden:
In de volgende twee animaties type is ingesteld op skewX en skewY respectievelijk, van ingesteld op 0 om te beginnen zonder scheeftrekken, en naar is ingesteld op 20 dus schuiven we over twee seconden 20 graden scheef:
Geanimeerde skewX-transformatie
Geanimeerde skewY-transformatieEr zijn een oneindig aantal mogelijkheden voor animaties die u kunt maken met behulp van deze basistechnieken, maar een van de meest direct bruikbare is het maken van laadpictogrammen waar u voorheen op geanimeerde GIF's had kunnen vertrouwen.
Dit is een laadpictogram dat ik in ongeveer vijf minuten heb gemaakt met Sketch:
Ik heb het vervolgens geëxporteerd naar een SVG-bestand dat me de volgende code gaf:
Gezien dit pictogram meerdere vormen binnen een groep omvat, en zoals we hierboven hebben geleerd, kunt u zich aanmelden animateTransform aan een groep heb ik mijn animatiecode toegevoegd vóór de laatste afsluiting label:
De bovenstaande code stelt het pictogram in om te roteren van 0 tot 360 graden, d.w.z. een volledige cirkel.
Merk op dat ik deze keer ook een extra twee nummers heb opgenomen in beide van en naar instellingen. Dit vertelt de animatie om rond een punt op de eigen interne X / Y-as van de shape te draaien 18 18, d.w.z. het midden van de gegeven vorm is 36x36 pixels groot.
Dit levert de volgende animatie op:
Nogmaals, je in-browser animatie zal vloeiender zijn dan de bovenstaande GIF, dus zorg ervoor dat je het echte werk bekijkt. Zoals je kunt zien, is het erg snel en gemakkelijk om animaties samen te stellen die je praktisch kunt gebruiken.
Als je nog geen run hebt gedaan op SVG-animatie, zou je nu de tools moeten hebben die je nodig hebt om een goede solide start te krijgen.
