Share
Astăzi vă vom trece prin elementele de bază ale utilizării animateTransform pentru a genera animații inline cu SVG (grafică vectorială scalabilă).
Dacă sunteți nou în SVG, vă recomandăm să începeți să începeți cu grafica vectorială scalabilă (SVG) pentru a vă aduce la maxim.
Tehnicile pe care le veți învăța vă vor permite să creați animații sofisticate de pictograme și imagini fără un singur GIF, JPEG sau PNG, cu zero JavaScript și fără șoaptă slabă de Flash.
Animațiile pe care le creați vor fi ușor de editat mai târziu, deoarece sunt coduri pure, iar rezultatele vor avea doar câteva perechi de KB cu o lățime de bandă prețioasă atunci când sunt vizionate.
Pentru a anima forme SVG, veți avea mai întâi nevoie de capacitatea de a le crea. Am descoperit că cea mai ușoară cale de a crea SVG-uri este de a folosi schița de la Boemia Coding. Dacă nu dețineți schița, puteți încerca o încercare gratuită de 30 de zile în scopul acestui tutorial.
Vom manipula codul SVG, așa că după ce ați desenat o formă în Sketch, creați o felie în jurul acesteia și exportați acea felie ca fișier SVG.
Apoi, veți putea să vă deschideți fișierul exportat într-un editor de coduri (ca textul Sublime) și să copiați codul SVG din interior. Tot ce aveți nevoie este codul de la deschidere eticheta la închidere etichetă.
De exemplu, Sketch generează următorul cod SVG pentru dreptunghiul albastru prezentat mai sus:
Pentru a face codul mai ușor cu vizualizarea, vom face câteva modificări minore ale codului.
Seteaza svg Element lăţime și înălţime la 100% și ștergeți viewBox setare. De asemenea, ștergeți Generator comentariu, și titlu, desc, defs și g element.
Ar trebui să ajungeți la ceva de genul:
Puneți codul într-un document HTML și, când este afișat în browser, ar trebui să vedeți același dreptunghi albastru în pagina dvs. așa cum ați văzut în Sketch:
Notă: Imaginea de mai sus include o axă X și Y în fundal, deoarece va trebui să le înțelegeți pentru a vă crea animațiile. Veți afla de ce în curând.
Răspunsul scurt este: animateTransform elementul generează animații prin setarea proprietăților de transformare în forma SVG la care este aplicată.
Având în vedere că următoarea întrebare logică este:
adăugare transforma setările unei forme vă permit să modificați modul în care apare această formă în spațiul 2D. Există cinci tipuri diferite de transformări pe care le puteți efectua:
Accentsconagua
TraducețiscarărotiskewXskewY animateTransform atributul vă permite să animați între diferite stări de transformare, așa că înainte de a începe să animați este important să înțelegeți cum funcționează transformările.
Deoarece transformările funcționează în spațiu 2D, setările lor se referă la coordonatele X și Y reprezentate pe o axă X / Y, așa cum ați văzut imaginea din spatele dreptunghiului albastru mai devreme.
X axa este linia orizontală în spațiul 2D și Y axa este linia verticală. În mod implicit, fiecare formă începe într-o poziție de 0 pe ambele X și Y axă.0 poziție pe X axa, valorile pozitive corespund cu mișcarea spre dreapta, iar valorile negative corespund cu deplasarea spre stânga.0 poziție pe Y axa, valorile pozitive corespund cu deplasarea în jos și valorile negative corespund cu mișcarea în sus. Dacă acest lucru nu are sens, nu vă faceți griji, deoarece va deveni mult mai clară, deoarece veți vedea exemplele fiecărui tip de transformare de mai jos.
Nu vă faceți griji nici despre codul pentru aceste transformări, deoarece vom acoperi acest lucru atunci când vom trece la crearea de animații. Pentru început, vreau doar să obțineți lucrurile esențiale în ceea ce face efectiv cele cinci tipuri de transformări.
Aceasta schimbă poziția formei pe axa X (orizontală) și pe axa Y (verticală).
De exemplu, aici este legătura noastră albastră cu Traduceți valori ale 150 pe X (orizontală) și 20 pe Y (axa verticala:
Rețineți din secțiunea de mai sus că valorile pozitive pe X axa corespunde cu mișcarea spre dreapta și valorile pozitive pe Y axa corespunde cu deplasarea în jos.
Prin setarea Traduceți valoare pentru X la pozitiv 150, dreptunghiul nostru sa mutat la dreapta cu 150 de pixeli. Setarea valorii pentru Y la pozitiv 20 ne-a mutat dreptunghiul cu 20 de pixeli.
Aceasta multiplică dimensiunea generală a formei pe axa X (lățime) și axa Y (înălțime).
Setările de scalare funcționează ca multiplicatori ai dimensiunii originale a formei. De exemplu, dacă setăm X scară la 3 ar face forma de trei ori mai larga. Dacă am setat Y scară la 1.25 ar face ca forma sa fie de un sfert de ori mai mare, ca atare:
De asemenea, traduse (150, 20)Aceasta rotește forma în jurul unui anumit punct în grade.
Rotația funcționează prin setarea numărului de grade în care doriți să rotiți forma. De exemplu, aici este dreptunghiul nostru rotit cu 45 de grade:
De asemenea, traduse (150, 20)Implicit, forma se va roti în jurul colțului său din stânga sus, dar puteți, de asemenea, să o rotiți în jurul unui punct diferit. Vom vedea cum se face mai târziu în tutorial.
Aceasta schimba forma de-a lungul axei X (orizontală).
Tăierea de-a lungul axei X funcționează și în grade. De exemplu, în imaginea de mai jos, dreptunghiul nostru este înclinat cu 20 de grade de-a lungul axei X:
De asemenea, traduse (150, 20)Acest lucru înclină forma de-a lungul axei Y (verticală) în grade.
SkewY funcționează exact la fel ca SkewX, numai transformarea are loc pe verticală de-a lungul axei Y:
De asemenea, traduse (150, 20)Acum, că știți ce transformă de fapt, puteți începe să creați animații între diferite stări de transformare. Procesul de bază are trei pași:
din stat.la stat.din si lastat.Acest lucru este cel mai bine înțeles printr-un exemplu practic, deci începeți prin a anima a Traduceți transformare.
Îți amintești că mai devreme am început cu dreptunghiul albastru în poziția lui implicită de 0 0, adică. 0 pe X axa și 0 pe Y axă. Vom pune această poziție ca a noastră din stat.
Apoi am analizat un exemplu al aceluiași dreptunghi albastru cu setările de traducere 150 20 aplicată, adică. 150 pe X axa și 20 pe Y axă. Vom pune această poziție ca a noastră la stat.
Utilizarea animateTransform putem face dreptunghiul să alunece ușor între noi din și al nostru la stă pe o perioadă de două secunde.
Forma dvs. SVG, în acest caz dreptunghi, va trebui să aibă atât etichete de deschidere cât și de închidere, de ex.
animateTransform atributul ar trebui să fie plasat între aceste etichete, cum ar fi:
Aruncați o privire la proprietățile care au fost stabilite în cadrul animateTransform etichetă. Acestea sunt ceea ce controlează modul în care rulează animația.
Am stabilit tip să traducem, ceea ce înseamnă că vom aplica a Traduceți tip de transformare. Așa cum am planificat, ne-am stabilit 0 0 poziție în din stat, și al nostru 150 20 poziție în la stat.
Valoarea pentru începe este setat sa 0s, adică animația va începe la zero secunde după încărcare și Dur este setat sa 2s, adică animația se va desfășura pe o perioadă de două secunde. În cele din urmă, am inclus repeatCount setat la nedefinit adică animația va relua pe buclă.
Acest lucru ne oferă următoarea animație:
Procesul este exact același pentru rotirea tuturor celorlalte patru tipuri de transformări. După ce ați setat tip pentru orice tip de transformare doriți, introduceți valori pentru dvs. din și la stadiile de transformare.
De exemplu, putem folosi următoarele animateTransform setări pentru a scala dreptunghiul până la dimensiunea pe care ați văzut-o în secțiunea anterioară privind transformarea scalei:
Deoarece setările de transformare a scalei înmulțesc dimensiunea originală a formei, începem cu o valoare de 1 1 pe din setare. Acest lucru își stabilește dimensiunea inițială la o multiplicare de 1.
Al nostru la setarea 3 1,25 va anima transformarea scării de până la trei ori lățimea inițială pe axa X, iar unul și un sfert înălțimea inițială pe axa Y.
Notă: Veți găsi că animațiile reale în browser diferă mult mai mult decât imaginea GIF de pe ecranul de mai sus.
De asemenea, putem combina cele două animații pe care le-am creat până acum, atât pentru traducerea cât și pentru scalarea în același timp. Puteți utiliza numai un singur animateTransform etichetă în interiorul dvs. RECT tag, astfel încât să utilizați mai multe animații va trebui să includă un set de g tag-uri, care reprezintă un grup de obiecte SVG.
Pentru a face acest lucru, adăugați deschiderea și închiderea RECT Etichete:
Apoi adăugați cea de-a doua animație în afara închiderii etichetă, dar inainte de inchiderea etichetă. În acest caz, vom reintroduce transformarea noastră de traducere:
Acum avem atât transformări de scală, cât și traduceri care animă simultan:
Poți să folosești animateTransform o dată pe formă sau grup. Dacă aveți nevoie să adăugați mai multe animații, înfășurați un alt set de etichete de grup în jurul codului dvs. și creați-vă cuiva suplimentar animateTransform în interiorul lui.
Să aruncăm o privire rapidă asupra celorlalte trei tipuri de transformare, fiecare creată prin schimbarea numai a acestora tip, din și la setări și, de asemenea, combinate cu animația noastră originală de traducere.
În acest exemplu tip a fost setat la roti, din a fost setat la 0 pentru a începe cu nici o rotație, și la a fost setat la 45 astfel încât să rotim 45 de grade pe parcursul a două secunde:
În următoarele două animații tip a fost setat la skewX și skewY respectiv, din este setat sa 0 pentru a începe fără nici o înclinare, și la a fost setat la 20 așa că am înclinat cu 20 de grade peste două secunde:
Transformare animată de înclinare
Transformarea înclinată animatăExistă un număr infinit de posibilități pentru animațiile pe care le puteți crea folosind aceste tehnici de bază, dar una dintre cele mai utile imediat este crearea de pictograme de încărcare în care ați fi putut baza pe GIF-uri animate.
Aceasta este o pictogramă de încărcare creată în aproximativ cinci minute utilizând schița:
Apoi l-am exportat într-un fișier SVG care mi-a dat următorul cod:
Având în vedere că această pictogramă cuprinde mai multe forme în interiorul unui grup și, așa cum am învățat de sus, puteți aplica animateTransform la un grup, am adăugat codul meu de animație înainte de ultima închidere etichetă:
Codul de mai sus stabilește pictograma pentru a se roti de la 0 la 360 de grade, adică un cerc complet.
Rețineți că de data aceasta am inclus și alte două numere în ambele din și la Setări. Acest lucru spune animației să se rotească în jurul unui punct pe axa X / Y internă a formei 18 18, adică centrul formei dat fiind dimensiunea de 36x36 pixeli.
Aceasta produce următoarea animație:
Din nou, animația dvs. în browser va fi mai fină decât GIF de mai sus, așa că asigurați-vă că verificați lucrul real. După cum puteți vedea, este foarte rapid și ușor de a pune împreună animații pe care le puteți obține o utilizare practică solidă din.
Dacă nu ați făcut încă o alergare la animația SVG, ar trebui să aveți acum instrumentele de care aveți nevoie pentru a obține o bună pornire solidă.
