Animarea fișierelor SVG cu SVGator

( Acest articol este sponsorizat cu amabilitate de SVGator .) Fișierele animate SVG au devenit foarte populare. Sunt complet scalabili (pentru că sunt vectori), mici și 100% bazate pe cod, ceea ce permite atât de multe transformări și ajustări. Acest lucru, totuși, are un preț: curba abruptă de învățare pentru începători completi.

SVGator se angajează să rezolve această problemă, făcând cu adevărat ușor pentru oricine să realizeze animații simple folosind o interfață familiară. Este o aplicație de animație bazată pe web care vă permite să importați, să animați și să exportați animații SVG și elimină nevoia începătorilor de a învăța să codifice. L-am încercat și ne-a plăcut foarte mult.

Începeți să utilizați aplicația

Accesați https://www.svgator.com pentru a începe să utilizați aplicația. Procesul de înscriere este destul de simplu (figurele 1 până la 3): faceți clic pe „Animați acum”, apoi pe „Creați cont”, completați-vă detaliile și sunteți gata.

Veți fi dus direct la exemplul de proiect „Cronometru”, care vă permite să explorați funcțiile SVGator. Dacă nu vă puteți găsi drumul în cadrul aplicației, există un tutorial ordonat (figura 4) care vă va ghida cum să începeți să îl utilizați: importați un SVG static, adăugați elemente la cronologie și adăugați animatori la elemente și cadre cheie la animați cele patru proprietăți disponibile în prezent (scală, opacitate, poziție și rotație).

Dacă ați folosit vreodată o aplicație de animație, interfața de utilizator a SVGator ar trebui să vă pară destul de familiară și, probabil, totul se va simți la locul potrivit. Adăugați doar elemente pe care le veți anima, ceea ce menține cronologia curată și ușor de scanat.

Proiectul de ceas animat de pornire face o treabă grozavă de a vă prezenta SVGator. Puteți reveni oricând la el și îl puteți folosi ca referință.

Acum că avem elementele de bază la îndemână, haideți să ne facem propriile animații!

Ce vom face

Consultați această pictogramă plic simplă pe care am proiectat-o ​​în Sketch (figura 5). Începe închis, apoi se deschide și apare o scrisoare, urmată de conținutul ei. Apoi, scrisoarea sare din plic și crește pentru a afișa caseta de selectare verde.

Iată un rezumat al procesului:

• Vom începe prin a realiza un storyboard simplu pentru a vizualiza pictograma noastră în diferitele sale stări. În timp ce suntem la asta, ne vom sincroniza în mod constant cu SVGator și vom importa elemente ale pictogramei pentru a ne asigura că totul funcționează conform așteptărilor.
• Apoi, vom crea o copie principală a pictogramei, care va include fiecare element de care vom avea nevoie și o vom exporta în SVGator. S-ar putea să fie nevoie să modificăm mult această copie master pe tot parcursul procesului.
• Apoi, vom face întreaga animație într-un singur proiect SVGator și o vom exporta, asigurându-ne că funcționează conform așteptărilor.
• În cele din urmă, vom include pictograma într-un formular simplu de buletin informativ precodat pentru a vedea cum arată într-un mediu web real. De asemenea, îl vom vedea redimensionat pentru rezoluții mai mici.
• Puteți descărca totul aici.

Să începem!

Partea 1: Creați și exportați o pictogramă din schiță

• Există unele diferențe între proiectarea unei pictograme SVG simplă și proiectarea unei pictograme SVG pe care intenționați să o animați mai târziu. Pentru început, este important să rețineți că ar trebui să fie alcătuit din forme destul de simple și ar trebui să vă planificați animațiile în jurul tranzițiilor simple bazate pe manipularea doar a următoarelor: scară, rotație, poziție și opacitate. Acestea sunt singurele patru proprietăți pe care SVGator le permite în prezent să le animați, așa că dacă ați schițat ceva mai complex, nu o veți putea face.

Faceți un Storyboard simplu pentru a economisi timp

Storyboarding-ul vă permite să vizualizați toate tranzițiile înainte de a le importa efectiv în SVGator. De asemenea, este ușor să testați transformările înainte de a vă angaja să faceți întreaga animație. Se întâmplă adesea să descoperiți o problemă cu ilustrația care ar fi trebuit să fie făcută diferit în Sketch, așa că trebuie să vă întoarceți și să o schimbați. Apoi, trebuie să reimportați întregul fișier în SVGator și să începeți cu animațiile de la zero. Pentru că nu ați dori să faceți acest lucru de fiecare dată, storyboarding-ul vă ajută, forțându-vă să planificați lucrurile în avans.

De exemplu, am planificat inițial ca plicul să rămână mai mult în partea de jos a ecranului, dar după ce l-am importat în SVGator și m-am jucat cu închiderea și deschiderea, a fost clar că trebuie să rămână la mijloc în timp ce este închis și ușor în jos când deschis — un detaliu care a fost omis în imaginile statice.

Sfat: Consultați scenariul din fișierul Schiță → Panou de desen „storyboard” .

Denumirea și organizarea straturilor

Dacă denumiți straturile în Sketch, va funcționa conform așteptărilor și toate numele pe care le-ați atribuit în Sketch vor fi transferate în proiectul dvs. în SVGator. Dar dacă utilizați SVGO Compressor sau un plugin similar pentru a face fișierele SVG mai mici, numele vor dispărea , iar SVGator le va înlocui cu altele bazate pe eticheta HTML și veți ajunge cu ceva similar cu ceea ce este arătat în figura 7. .

Sfat: Dacă utilizați deja SVGO Compressor pentru alte SVG-uri și nu doriți să-l dezactivați, trebuie doar să trageți și să plasați fișierul din zona de previzualizare a exportului din Sketch în locația dorită (figura 8). Acest lucru va evita compresorul SVGO și va exporta SVG-ul așa cum este!

Utilizarea grupurilor este grozavă, de asemenea, deoarece aplicația le recunoaște și puteți chiar să animați simultan un strat și grupul părinte, adăugând puțin mai multă complexitate.

Nu am întâlnit nicio limitare a numărului de straturi utilizate, dar, din nou, pictograma noastră este destul de simplă.

Pregătirea pictogramei pentru animație

Acum că avem ideea într-un storyboard și am pregătit fișierul principal, să-l exportăm într-un mod în care să putem înțelege în SVGator. Asigurați-vă că verificați din nou ierarhia straturilor. Gândiți-vă la modul în care un anumit strat va interacționa cu altul și unde ar trebui să fie plasat în panoul Straturi. În figura 9, veți vedea că am selectat „top_opened” - aceasta este clapa de sus deschisă a plicului. Ar trebui să stea în spatele foii albe de hârtie. Și invers, „top_closed” este clapa închisă a plicului și ar trebui să rămână deasupra tuturor; de aceea este primul strat din grupul nostru de „conținut”.

Sfat: S-ar putea să vă întrebați de ce întreaga clapă superioară este făcută din două straturi. Se datorează faptului că nu putem roti forme sau le putem transforma într-adevăr în spațiul 3D folosind SVGator. Emulăm acest lucru prin strivirea primului strat și apoi întinderea celui de-al doilea, creând astfel iluzia unei transformări 3D .

Dacă te uiți la storyboard-ul nostru, ideea inițială a fost ca foaia să sară din plic și să crească pentru a o ascunde în cele din urmă. Vom realiza acest lucru împingând foaia originală în sus, având în același timp o altă foaie ascunsă ("sheet_top") în fața plicului (figura 10). În momentul în care se întâlnesc în punctul cel mai de sus, se vor schimba, iar foaia din față va cădea în fața plicului. Aceasta este și o iluzie vizuală - nu putem muta cu adevărat foaia în spațiul z, așa că aceasta este o modalitate de a o emula.

Ținând cont de toate acestea, acum putem exporta pictograma. Este practic un singur SVG care conține toate elementele de care vom avea nevoie, stivuite unul peste altul într-un mod util.

Sfat: Asigurați-vă că toate elementele sunt marcate vizibile (nu sunt ascunse) înainte de a exporta. Puteți să vă uitați la fișierul pe care l-am folosit ca export în fișierul Sketch → „export” din panoul de desen .

Partea 2: Animarea icoanei

Deschideți SVGator și faceți clic pe „Import new” pentru a începe un nou proiect (figura 11):

Dacă ați făcut totul corect, ar trebui să vedeți ceva de genul figura 12 și clipul scurt de mai jos (clipul 1): toate straturile stivuite unul peste altul și gata de utilizare. Dacă, întâmplător, nu vedeți totul, reveniți în Sketch și verificați din nou dacă toate straturile sunt vizibile.

Animarea Deschiderii Plicului

Vom începe prin a importa câteva elemente în cronologia. Modul în care funcționează SVGator este că veți începe cu o cronologie goală. Alegeți ce elemente să adăugați din meniul drop-down „Elemente”. Va trebui să le verificați manual folosind pictograma ochi pentru a vedea care este stratul pe care îl căutați. Alternativ, puteți face clic direct pe elementul de pe ecran, care va face același lucru.

Vom lucra la pașii 1 și 2 din storyboard, în special la deschiderea clapei. Să dezactivăm straturile de care nu avem nevoie pentru moment; vom reveni la ele mai târziu (vezi clipul 1 pentru a vedea cum se face asta). Ar trebui să rămânem doar cu plicul de bază, ceea ce înseamnă că ar trebui să dezactivați următoarele straturi: „sheet_top_content”, „sheet_top_bgr” și „sheet_bottom_bgr”.

Apoi, faceți clic pe „top_opened” și faceți clic pe pictograma plus din stânga sau faceți dublu clic pe element pentru a-l adăuga la cronologia. Faceți același lucru pentru „top_closed”. Acum ar trebui să aveți ambele straturi în cronologie (figura 13).

Sfat: Dacă doriți să avansați rapid prin întregul proces, consultați clipul 2 (acțiunile ar putea să nu fie în aceeași ordine ca cea descrisă mai jos) .

• Faceți clic pe „top_closed” în cronologie și apoi pe meniul drop-down „Animatori”. Adăugați un animator Scale.
• Adăugați și un animator Scale pentru „top_opened”.
• Apoi, faceți clic pe pictograma țintă mică de lângă numele stratului din cronologie. Aceasta este proprietatea transform-origine și vă permite să setați un punct pivot pentru transformarea elementului. Să alegem în centru sus pentru „top_closed”, pentru că îl vom micșora în sus (figura 14), iar apoi jos în centru pentru „top_opened”.
• Acum, cu „top_closed” selectat, faceți clic pe semnul plus de pe proprietatea Scale pentru a adăuga un cadru cheie la cronologia. O formă de diamant galben va apărea în cronologie. Să trecem la 0,4 s și să facem clic din nou pe semnul plus (figura 15). Acel al doilea cadru cheie va fi punctul nostru final de transformare, când clapeta s-a deschis deja. Deci, să-i facem Scale 100% 0%, lăsând primul cadru cheie ca 100% 100%.
• Activați Ease-in pentru „top_closed” făcând clic pe pictograma țintă mică de lângă numele stratului (figura 16).
• În timp ce sunteți în 0,4 s, adăugați un cadru cheie Opacitate pentru „top_closed” făcând dublu clic pe Opacitate în meniul „Animatoare” și apoi făcând clic pe semnul plus de lângă proprietatea Opacitate în cronologie. Schimbați-l la 0%.
• Întoarceți câteva cadre și adăugați 100% pentru Opacitate. Facem asta pentru a evita erorile în partea superioară a clapei.

Sfat: ușurarea va face ca mișcarea să pară mai naturală și, deoarece proiectăm o animație care emulează mișcarea unui singur element, este firesc să ușurăm începutul și sfârșitul animației .

Acum, să ne ocupăm de partea „top_opened”, sfârșitul animației. După cum am menționat mai devreme, facem acest lucru în două părți pentru a emula o deschidere 3D a clapei.

• Luați stratul „top_opened” din cronologie, treceți la 0,4 s în cronologie și adăugați un cadru cheie Scale, apoi un alt cadru cheie la 0,8 s . Faceți ca Scala la 0,4s să fie 100% 0% și lăsați valoarea Scalei de 0,8s să rămână 100% 100%.
• Activați Ease-out. Apăsați pe play pentru a previzualiza animația.

Pare grozav, dar acum întregul plic trebuie să se miște în jos, astfel încât să se încadreze în fundalul încercuit. Găsiți un grup numit doar „g” în Elemente și adăugați-i un animator de poziție. Adăugați un cadru cheie de poziție la 0,2 s și apoi la 0,8 s. Schimbați valoarea de 0,8 s la 0 35. Adăugați Ease-in-out pentru o animație lină. Si asta e! Am animat cu succes plicul deschis și chiar l-am făcut să se miște puțin în jos.

Adăugarea de complexitate: apare scrisoarea

Deschiderea plicului este îngrijită, dar îl putem face mai interesant introducând o coală de hârtie. Pentru a face acest lucru, va trebui să dezvăluim stratul de foi, pe care l-am numit „sheet_bottom_bgr”.

• Faceți clic pe pictograma ochi de lângă „sheet_bottom_bgr” în meniul „Elemente” pentru a-l face vizibil. Adăugați-l la cronologia (faceți dublu clic pe el).
• Acum, mergeți undeva în mijlocul animației - de exemplu, 0,5 secunde - și adăugați un cadru cheie de poziție. Adăugați încă unul după 0,4 secunde. Selectați primul cadru cheie și decalați stratul cu 140 de pixeli pe axa y (0 140).
• Adăugați un efect Ease-in-out. Acum avem o animație ceva mai interesantă.

Sfat: dacă preferați să vizionați asta într-un videoclip, vedeți clipul 3 de mai jos .

Și mai multă complexitate: animarea scalarii literei

Pentru a merge mai departe, haideți să animam scrisoarea care iese din plic și să dezvăluim câteva rânduri de text „scrise” în scrisoare. Pentru a face asta, va trebui să modificăm puțin animația anterioară. (Dacă doriți să avansați rapid, puteți doar să vizionați screencast-ul și să îl repetați.)

• Începeți prin a muta ultimul cadru cheie de poziție al „sheet_bottom_bgr” de la 0,9 s la 1,1 s și schimbați-l la 0 -190. Ceea ce facem cu aceasta este să scoatem foaia din plic, astfel încât să o putem schimba rapid cu cealaltă foaie pe care am pregătit-o deja.
• Accesați 1.1s, activați „sheet_top_content” și „sheet_top_bgr” și adăugați-le la cronologia cu Poziționați cadrele cheie pentru ambele dintre 0 -190.
• Adăugați cadre cheie la 1,5 s și faceți-le 0 40.
• Activați Ease-out pentru ambele.

Aceasta este mișcarea foii frontale și ar trebui să arate ca ceea ce vedeți în figura 17.

Acum să reparăm foaia din spate. Ar trebui să dispară odată ce apare fața, iar foaia din față ar trebui să apară numai după aceea.

• Accesați 1.1s și selectați „sheet_bottom_bgr”. Adăugați un animator Opacity și un cadru cheie. Setați-l la 0%.
• Mutați un cadru înapoi și setați un alt cadru cheie Opacity, făcându-l 100%.

Să facem modificările respective și la foaia din față:

• Accesați 1.1s, selectați „sheet_top_bgr” și adăugați un cadru cheie Opacitate de 100%.
• Mutați un cadru înapoi și faceți opacitatea la 0%.

Ar trebui să vedeți ceva ca figura 18 de mai jos. Putem identifica două probleme aici:

• Conținutul este afișat deasupra plicului înainte ca tranziția să aibă loc.
• Există o eroare atunci când schimbați foaia din spate și cea din față.

Să rezolvăm prima problemă. Să ascundem conținutul și caseta de selectare și să le arătăm după ce a apărut foaia frontală.

• Accesați 1,5 secunde, selectați „sheet_top_content” și adăugați un cadru cheie Opacitate de 100%.
• Mergeți un cadru înapoi și setați un alt cadru cheie Opacity la 0%.
• Acum, îl vom face puțin mai interesant prin animarea fiecărui strat din conținutul din față.
  • Accesați 1,5 secunde și căutați conținutul „sheet_top_content” în meniul Elemente.
  • Adăugați cadre cheie Opacitate pentru toate cele trei straturi din „sheet_top_content”.
  • Faceți opacitatea pentru toate cele trei straturi la 0%.
  • Treceți la 1,7 secunde și setați-l la 100% pentru toate cele trei straturi.
  • Rămâneți pe 1.7s și selectați Formă combinată și adăugați un cadru cheie Rotire.
  • Treceți la 1,5 s și setați rotația la -45 de grade.
  • Adăugați Ease-in-out pentru rotație.

A doua problemă este o eroare care se întâmplă deoarece foaia noastră din spate dispare prea devreme.

• Treceți la 1.1s, selectați „sheet_bottom_bgr” și mutați cadrele cheie Opacity cu un cadru înainte. Iată ce ar trebui să te uiți (figura 19):

Pentru a o face mai atrăgătoare, să mărim foaia frontală și conținutul când iese din plic. Am putea scala întregul „top_sheet_content”, dar asta ar putea duce la unele nealinieri în unele browsere. Cel mai bine este să scalați fiecare dintre straturile copil pe cont propriu.

• Accesați 1.1s, selectați „sheet_top_bgr” și adăugați un cadru cheie Scale.
  • Faceți același lucru pentru Combined-Shape, „line_top” și „line_bottom”.
• Mergeți la 1,5 secunde și adăugați un alt cadru cheie Scale cu valori de 120% 120%.
  • Faceți același lucru pentru Combined-Shape, „line_top” și „line_bottom”.
• Activați Ease-in-out.
• Deoarece l-am scalat, trebuie să scădem cantitatea în care toată foaia frontală se mișcă în jos. Accesați 1,5 secunde, selectați „sheet_top_content” și „sheet_top_bgr” și schimbați-le poziția de la 0 40 la 0 20.

Sfat: este în regulă să scalați conținutul în SVG, deoarece totul este bazat pe vectori, astfel încât să nu pierdeți calitatea .

Iată cum ar trebui să arate acum (figura 20):

Toate bune, dar întreaga animație trebuie să se întoarcă la primul cadru. Asta pentru că vrem să-l reutilizam. Ideea noastră este ca foaia din față să alunece în jos, iar plicul să se închidă și să se întoarcă în poziția inițială.

• Mergeți la 2.8s, selectați „sheet_top_bgr” și adăugați cadre cheie de poziție.
  • Faceți același lucru pentru „sheet_top_content”.
• Trebuie să adăugăm mai mult timp, deoarece cronologia implicită este 3s. Faceți clic pe pictograma roată din colțul din stânga jos deasupra cronologiei, modificați durata la 00:04:50 (figura 21) și apăsați „Enter”. Acum am extins cronologia.
• Treceți la 3,6 s, adăugați o altă pereche de cadre cheie de poziție și faceți valorile acestora la 0 360. Schimbați relaxarea pentru poziția ambelor straturi la Ease-in-out.

• La 1,3 secunde, selectați „top_closed” și „top_opened” și adăugați Scale keyframes.
• Mai adăugați două la 1,5 secunde. Pentru al doilea cadre cheie, „top_closed” ar trebui să aibă 100% 100% și „top_opened” 100% 0%. Am închis cu succes clapeta în spatele foii scalate.
• Acum, tot ce trebuie să facem este să mutam plicul înapoi în centru și să ne asigurăm că clapeta de sus apare din nou. Mergeți la 3s și adăugați un cadru cheie de poziție pentru „g”. Adăugați încă unul la 3,4 s și faceți-l 0 0. Mergeți la 2,8 s și adăugați un cadru cheie Opacitate 0% pentru „top_closed”. Apoi, treceți la 3s și modificați opacitatea la 100%.

Felicitări! Am animat întreaga icoană. Iată cum ar trebui să arate (figura 22):

Partea 3: Implementarea animației exportate într-un mediu web real

Să plasăm pictograma într-un mediu real. Am codificat un formular simplu de buletin informativ și am inclus pictograma acolo. Puteți exporta pictograma din SVGator făcând clic pe „Export SVG”.

După ce faceți clic pe „Abonați-vă”, este afișat un mesaj de mulțumire și începe animația pictogramei.

Funcționează având două pictograme SVG: prima este una statică cu doar primul cadru al animației inclus, iar a doua este cea animată. Puteți găsi pictograma statică în fișierul Schiță → Panou de desen „export static”. L-am inclus ca element SVG inline în cod. Am inclus și SVG-ul animat în linie, dar l-am ascuns în mod implicit. Puteți verifica codul în descărcare. Când „Abonare” primește un clic, ascundem SVG-ul static și îl arătăm pe cel animat, care pornește automat.

O ajustare minoră pe care am făcut-o în SVG-ul static a fost înlocuirea acestei linii:

 <rect fill="#E6E7EB" fill-rule="evenodd" x="0" y="162" width="384" height="131"></rect>

… cu asta:

 <rect fill-rule="evenodd" x="0" y="162" width="384" height="131"></rect>

Acest lucru va elimina dreptunghiul gri care este afișat incorect deasupra tuturor elementelor.

Acest exemplu arată, de asemenea, cât de bune sunt SVG-urile în designul receptiv: dacă micșorați fereastra, aspectul se va rearanja, iar pictograma se va mări fără nicio pierdere de calitate.

Sfat: Când am făcut pictograma mai mică, am constatat că este nevoie de prea mult timp pentru ca foaia să iasă din pânză, așa că a trebuit să ne întoarcem și să edităm un pic acel moment special pentru a-l scurta. Am mutat ultimele cadre cheie de poziție ale „sheet_top_bgr” și „sheet_top_content” la 3,2 secunde pentru a face mișcarea mai rapidă .

Dacă doriți, puteți modifica animația chiar și după ce ați exportat-o, dar este mult mai ușor să faceți acest lucru în SVGator, unde veți avea interfața de utilizare convenabilă.

Concluzie

Suntem destul de încântați de instrumente precum SVGator, care accelerează cu adevărat procesul atunci când realizați animații SVG simple. Este ușor de utilizat și puteți obține o animație grozavă în cel mai scurt timp.

• Nu este la fel de puternic ca Adobe After Effects, dar este mult mai adaptabil și exportă totul în cod, gata de utilizare pe web. Compararea lui cu After Effects este merele și portocalele, deoarece ambele instrumente sunt atât de diferite.
• Când utilizați SVGator pentru explorări rapide , începătorii vor vedea o valoare mai mare în el, dar asta nu înseamnă că este vizat numai lor. Utilizatorii avansați pot folosi instrumentul pentru a face brainstorming sau a explora rapid idei fără a fi nevoie să folosească un instrument mai complex. Deoarece SVGator generează cod, îl puteți lua de acolo și puteți personaliza orice după cum doriți. Singurul dezavantaj este că întreaga animație este plasată într-o singură cronologie, ceea ce înseamnă că este practic o animație CSS și tot ce se întâmplă în interior are o întârziere diferită înainte de a se declanșa. Aceasta înseamnă că în prezent nu puteți declanșa evenimente la anumiți pași ai animației, deoarece totul este CSS all-in-one.
• Nici compararea cu codul vanilla nu este corectă, deoarece scopul principal al SVGator este de a face animația SVG mai ușoară și mai rapidă. Este clar că poți obține mai mult dacă codezi totul de la zero, dar cât timp ți-ar lua asta?
• Unul dintre cele mai puternice avantaje ale SVGator este că este foarte prietenos pentru începători. Oricine poate începe să-l folosească, iar curba de învățare este aproape deloc, dacă aveți experiență cu cel puțin un software de design sau animație.
• Toți utilizatorii beneficiază de o perioadă de încercare gratuită de șapte zile după ce își creează un cont. Toate funcțiile sunt incluse și, odată ce perioada de încercare s-a încheiat, ei pot descărca în continuare animațiile din secțiunea „Proiectele mele”. Vă puteți abona la aplicație lunar (18 USD pe lună), trimestrial (45 USD pe trimestru) sau anual (144 USD pe an).

Citiri suplimentare despre SVGator

• Cum să animați SVG folosind SVGator (video)
• Twitter-ul SVGator (conține multe mini-tutoriale și actualizări frecvente despre aplicație)
• Întrebări frecvente SVGator

Citiri suplimentare despre animația SVG folosind cod

• „Cum am încetat să-mi mai fac griji și am învățat să animez SVG”, Boaz Lederer, mediu
• „Cum să optimizați codul SVG și să animați o pictogramă SVG utilizând biblioteca CSS și Snap.svg”, CodyHouse
• „Animații CSS pentru non-dezvoltatori Partea 2 – SVG”, Nicholas Kramer, Prototypr
• „Cum să creați cu ușurință animații SVG frumoase”, Lewis Menelaws, Medium

Mulțumiri speciale lui Boyan Kostov pentru că ne-a ajutat cu acest articol - apreciem timpul și efortul dumneavoastră!