Share
Hype 3, de Tumult, este o aplicație OS X pentru crearea de animații HTML5. Dacă ați folosit vreodată unelte temporale Flash, interfața Hype 3 va părea foarte familiarizată. În acest tutorial vom cunoaște rapid aplicația, apoi vom face o animație de bază Material Design folosind instrumentele disponibile.
Hype 3, la momentul scrisului, costă 49,99 USD pentru aplicația standard sau dacă aveți nevoie de funcții mai avansate, Hype 3 Professional este disponibil pentru 99,99 USD. Puteți descărca o versiune de încercare de 14 zile în scopul urmăririi.
Și, îmi pare rău, este doar Mac.
În calitate de utilizator Mac, veți fi perfect acasă cu aspectul aplicației. Folosim ediția standard Hype 3 (versiunea pro are un UI mai întunecat, mai plin), așa că să trecem prin părțile principale:
Interfața Hype 3Când deschideți aplicația, veți primi în mod implicit un document gol. Începeți prin a afla cât de mare vă place pânza dvs..
Fila "Scene"Sub Scenă , veți vedea câteva opțiuni pentru a stabili scena actuală. Am optat pentru a da dimensiunile panzei de 600x400px. Cu ce ați făcut, faceți clic pe butonul de selectare a culorilor fundal și schimbați această valoare la # 424242.
Notă: vom lucra numai cu o singură scenă și cu o singură cronologie în acest tutorial, dar este posibil să aveți mai multe scene, cu numeroase linii de timp și să treceți între ele.
Vom anima unul dintre butoanele de acțiune plutitoare ale Designului Materialului Google, deci mergeți la element meniu și selectați Elipsă:
Utilizați cursorul mouse-ului pentru a trage de pe scenă schimb va constrânge proporțiile într-un cerc (la fel ca orice aplicație grafică). Conform recomandărilor Material Design, butonul de acțiune cu flotantă mare trebuie să aibă o lățime de 56px, cu o icoană de 24px. Faceți-vă proporționale cu aceste numere:
Bacsis: mergi la Vizualizare> Afișare riglă pentru a face ca conducătorii să apară alături de scenă. Trageți niște ghiduri, de la conducători pe scena, pentru a vă ajuta să poziționați obiecte.
Cu elipse selectate, sub Element puteți schimba culoarea de fundal (am folosit # 00E676 din paleta de culori Material Design) și eliminați marginea sa.
De asemenea, în cadrul Element , veți vedea că puteți adăuga o umbra în cerc. Am dat o dimensiune de 5px și mi-am mutat 5px pe axa Y. Are o culoare de # 2E2E2E, deși nu veți putea selecta niciun mod de amestecare. Acum se pare foarte "Material Design", cred ca esti de acord:
Pentru a adăuga un simbol "plus" butonului, avem câteva opțiuni deschise pentru noi. Am putea folosi instrumentele de desen pentru ao face noi înșine, dar instrumentele sunt limitate (mai ales dacă sunteți obișnuiți cu libertatea Adobe Illustrator sau Sketch). În schimb, vom prelua pictograma SVG de la Google.
Selectați pictograma "adăugați", alegeți varianta albă, apoi descărcați-o.
Acum puteți trage direct fișierul SVG în documentul dvs., moment în care acesta va fi adăugat ca strat de imagine.
Cu pictograma SVG selectată, sub Valori , asigurați-vă că dimensiunea corectă pentru animație:
Pictograma noastră SVG nu a fost importată ca vector editabil. În schimb, dacă te uiți la element , veți vedea că este o resursă separată și este aplicată ca imagine de fundal. Aceasta înseamnă că nu putem schimba culoarea sau orice altceva asemănător (rușine).
De asemenea, această abordare poate provoca probleme în unele browsere, deși Hype 3 vă va avertiza:
Ca și în cazul multor aplicații grafice, puteți selecta acum cele două straturi pe care le-am adăugat în cronologia noastră, apoi mergeți la Aranjați> Grup pentru a le organiza un pic mai bine. Faceți dublu clic pe numele stratului de grup pentru al redenumi:
Hype 3 oferă câteva metode pentru animarea obiectelor și a proprietăților acestora. Vom începe cu cea mai directă, așa că dă-i drumul și lovește marele, roșu Record buton:
Acum trageți playhead de-a lungul liniei de timp, oprindu-se la cadrul 24.
Notă: veți vedea secunde marcate de-a lungul liniei de timp, fiecare conținând 30 de cadre.
Cu capul de joc acum pe cadrul 24, selectați pictograma "adăugați", mergeți la Valori în bara laterală dreaptă, apoi găsiți Rotație și modificați secțiunea Z valoare la 45 °. Aceasta va roti pictograma, astfel încât acum arată ca o cruce (×).
Acum puteți să faceți clic pe Record pentru a termina procesul.
Hype 3 va adăuga automat un keyframe de proprietăți la începutul liniei temporale (aceasta este starea inițială) și una la sfârșitul animației (starea finală). În acest caz, am modificat doar Unghiul de rotație (Z) proprietate, deci aici apar cadrele cheie.
Dacă apăsați redarea sau glisați capul de joc de-a lungul liniei de timp, veți vedea pictograma animată fără probleme între cele două stări de proprietate.
Pentru a face mai ușor să vedeți ce se întâmplă pe cronologie, faceți scala cronologică mai mare folosind glisorul din dreapta sus:
Cu animația proprietății selectată (faceți clic pe ea) putem modifica tipul de relaxare utilizat în animație. Implicit va fi ușurința în-out, ceea ce înseamnă că animația va începe încet, va accelera, apoi va încetini din nou spre sfârșit.
Ce altceva să animăm? Să arătăm că butonul nostru face ceva - vom dezvălui un card când apare butonul apăsat.
Folosește element meniu pentru a adăuga o Dreptunghi spre scena. Denumiți stratul "Card". Dați-i o culoare de fundal (# 757575) și plasați stratul sub grupul de butoane. Poziționați-o de pe scenă, spre partea de jos și reduceți opacitatea la 0 (vom anima câteva proprietăți de data aceasta).
Acum, în loc să lovești Record, de data aceasta vom face lucrurile manual. Cu capul de joc la începutul animației și stratul de card selectat, faceți clic pe Adăugați o cheie cheie pe Opacitate stratul de proprietate. Apoi mutați capul de joc până la sfârșitul animației și adăugați-l o alta cadru cheie.
În timp ce în keyframe finală, în Element , dați dreptunghiului o Opacitate de 100%. Acum veți avea o animație elegantă între cele două state.
Animând opacitatea dreptunghiului, acum își animă poziția (vrem să alunece în sus). Acest lucru se realizează cu proprietatea Origin (Top), așa că repetați procesul pe care tocmai l-am făcut, adăugând un cadru cheie la începutul animației, unul la final, apoi modificând poziția dreptunghiului în cadrul cheie cheie finală.
Ar trebui să vedeți o cale trasată, indicând mișcarea făcută de dreptunghi:
În momentul de față, totul se întâmplă în același timp, de îndată ce scena începe, dar putem schimba asta. Să facem o scurtă întârziere, apoi pictograma se rotește rapid, apoi cardul se aliniază treptat.
Glisați barele de animație pe linia superioară a timpului, astfel încât ele să creeze diferite elemente diferite:
Notă: nu uitați că puteți modifica relaxarea pentru a da diferite efecte. Aruncati o privire la liniile directoare Google privind Authentic Motion pentru mai multa inspiratie.
Odată ce animația este completă, mergeți la Fișier> Exportați ca HTML5 sau Fișier> Exportați ca film. Opțiunile disponibile sunt destul de explicite; alegeți să afișați un director cu cod HTML împreună cu activele JavaScript și SVG, GIF animat, MP4 și așa mai departe.
Rețineți că atunci când exportați ca film, orice interacțiune pe care ați adăugat-o (nu am făcut-o în acest caz) ar putea ruina secvența.
Timp pentru o misiune! Urmând acest tutorial, ați fost înarmați cu abilitățile necesare pentru a duce mult mai mult această animație. Descărcați sursa și veți găsi fișierele de pornire de care aveți nevoie pentru a vă aduce la acest punct, apoi:
Timpurile sunt foarte utile pentru vizualizarea animației pe măsură ce construiți. Dincolo de ceea ce am făcut aici, Hype 3 permite, de asemenea, tot felul de interacțiuni, evenimente și control al timpului (dar acesta este un întreg tutorial). Distreaza-te sa te joci cu aceste unelte, sa te construiesti si sa ne aratati ce ati venit in comentariile!
Accentsconagua