Share
Modelarea unei aplicații up-and-coming poate fi o sarcină foarte dificilă dacă nu sunteți familiarizat cu software-ul și tehnicile profesionale de animație. Din fericire, Keynote oferă un set de instrumente de animație foarte eficient, care nu este prea greu de utilizat. În acest tutorial voi demonstra modul în care să folosesc Keynote pentru prototipul animațiilor iOS UI; vom construi o demonstrație a aplicațiilor bazate pe hărți.
Notă: Versiunea cheie 6.6.2 a fost folosită la realizarea acestui tutorial.
În primul rând, veți dori să găsiți un mockup iPhone pentru a afișa demo-ul aplicației. Cele mai multe machete iPhone de calitate sunt obiecte de formă în format PSD, astfel încât acestea sunt scalabile pentru orice dimensiune este necesară. Fișierele PSD necorespunzătoare nu sunt compatibile cu Keynote, cu toate acestea, câteva modificări ale iPhone PSD vor fi necesare pentru ca demo-ul să funcționeze corect.
În funcție de PSD, va trebui eventual să rasterizezi și să ștergi straturile necesare, astfel încât să rămână doar un "cadru" iPhone. Ștergeți imaginea de fundal astfel încât să devină transparentă. Salvați fișierul ca PNG.
Mockup-ul iPhone ar trebui să arate așa, când este demo-pregătit. În afară de iPhone, singurele resurse pe care trebuie să le păstrați sunt hărțile, seturile de pictograme și alte imagini pe care le-ați utilizat în machetele de aplicații. Restul elementelor UI vor fi recreate în Keynote pentru a asigura cea mai bună funcționare a animațiilor.
Open Keynote. În partea de sus a Alegeți o temă fereastră, faceți clic pe lat. Acest lucru va crea o prezentare de diapozitive cu un raport de aspect lat, oferindu-ne un produs finit pe care îl putem încărca fericit pe Youtube în format HD. Apoi, selectați alb șablon.
Selectează alb temă. În Format panou din partea dreaptă a ecranului, faceți clic pe Schimba maestrul și selectați Gol.
Selectează Gol aspect de la Schimba maestrul scapă jos. Acum, începeți să creați diapozitivul de bază. Introduceți imaginea iPhone fie prin glisarea fișierului PNG în Keynote, fie prin clic pe Inserare> Alegeți ... și găsirea fișierului în fereastra Finder care apare. Centrarea iPhone-ului pe diapozitiv.
Apoi, introduceți o imagine de hartă pe diapozitiv. Click dreapta pe imagine și selectați Trimite înapoi. Acest lucru va crea iluzia unei imagini în interiorul ecranului iPhone.
Click dreapta pe hartă și selectați Trimiteți înapoi pentru a crea iluzia unei imagini în interiorul ecranului. De asemenea, veți dori să adăugați orice element de interfață UI care ar apărea necompletat în aplicație. În scopurile mele, am adăugat bara de căutare cu o interogare de căutare și o roată de încărcare, pe care am creat-o folosind forma și instrumentele de text ale lui Keynote.
Diapozitivul de bază completat. După crearea diapozitivului de bază, puteți începe cadrul animației în prezentarea de diapozitive. Cel mai important lucru pe care trebuie să-l păstrați în această etapă este să abordați animațiile majore înainte de a vă ocupa de cele minore, orientate spre detalii.
Pentru a crea efectul de căutare și pan, duplicați diapozitivul de bază prin clic dreapta pe miniatură în bara laterală și selectând Duplicat.
Duplicat diapozitivul de bază. În diapozitivul nou dublu, ștergeți roata de încărcare selectând-o și apăsând pe Șterge cheie. Apoi, schimbați fotografia hărții astfel încât destinația pe care o căutați să apară în jumătatea superioară a ecranului iPhone.
Introduceți imaginea pin în Keynote și plasați-o deasupra destinației preferate. În Format meniu, adăugați a Contact Shadow. Ajustați umbra după cum doriți. Atunci, Click dreapta pe pin și selectați Trimite înapoi. Faceți același lucru pentru imaginea de pe hartă.
Adăugați o umbră de contact la pin. Duplicat acest diapozitiv și mutați-l până la a doua poziție de alunecare. Luați știftul și mutați-l de pe ecran, ținându-l direct deasupra destinației de plasare originale. Acest lucru se poate face cel mai ușor prin apăsarea și menținerea Tasta săgeată sus, sau modificând Poziția Y în Aranja panoul din Format meniul.
Deplasați știftul de pe ecran, ținându-l direct deasupra poziției dorite. Acum că totul este în vigoare, puteți începe animarea. Cel mai important instrument care va fi folosit în acest scop este Magic Move animație, care creează tranziții netede pentru un element care apare pe mai multe diapozitive. Magic Move va crea efecte netede și pan-drop pentru care vrem.
Reveniți la Slide 1 și aplicați Magic Move deschizând Anima meniu și clic Adăugați efect> Magic Move. căpușă Fade Obiecte de neegalat. Selectați Potrivire după obiect. A stabilit Accelerare la Ușurați-vă și ieșiți. A stabilit Începeți tranziția la Automat cu 0s Întârziere. Durată este la discreția dvs. - am dat-o 1.50s pentru pan.
Configurați animațiile Magic Move. Repetați acest lucru în Slide 2, dar setați durata mai scurtă decât diapozitivul anterior. Am pus-o pe asta 0.60s.
Bacsis: Verificați duratele făcând clic pe previzualizare pentru a identifica lungimea de animație dorită.
Cu Magic Move stabilit pentru această porțiune a tutorialului, reveniți la Slide 1 pentru a crea animațiile de căutare. Selectați textul de pe diapozitiv. În Construiți-vă panoul din Anima meniu, faceți clic pe Adăugați un efect. Selectați Maşină de scris din meniul derulant și setați Durata și direcția la 0.60s și Redirecţiona.
Adauga o Construiți-vă animație la text. Roata de încărcare necesită un pic mai multă animație pentru a descrie cu exactitate una găsită într-o aplicație. Mai întâi, adăugați a Construiți-vă animaţie. Selectați Dizolva din meniul derulant și setați-l Durată la o viteză rapidă, ceva de genul 0.20s.
Adauga o Construiți-vă animație la roata de încărcare. Apoi, deschideți Acțiune panou și Adăugați un efect. Selectați Roti din meniul drop-down. Selectați Ușurează ambele de la Accelerare meniul derulant. am setat Durată la 1.00s, și Unghi și rotație la a 359˚ Unghi și 0 Rotații, dar acest lucru poate fi modificat în funcție de preferințele personale.
Adăugați o acțiune la roata de încărcare. În cele din urmă, deschideți Construiți-vă panou și Adăugați un efect. Selectați Dizolva din meniul derulant și setați-l Durată la o viteză rapidă, ceva de genul 0.30s.
Adauga o Construiți-vă animație la roata de încărcare. Odată ce animațiile sunt adăugate, faceți clic pe Ordine de construcție butonul din partea inferioară a butonului Anima meniul. Aceasta va afișa ordinea în care se vor reda toate animațiile de pe diapozitivul curent și pot fi utilizate pentru automatizarea diapozitivului.
Faceți clic pe prima animație și selectați După tranziție de la start meniul derulant. Reglați întârzierea la discreția dvs. - aceasta va determina pornirea automată după o anumită perioadă de timp.
Selectarea După tranziție va porni automat animațiile atunci când prezintă Keynote. Faceți clic pe a doua animație și selectați Cu Build 1 de la start meniul derulant. Aceasta va determina construirea unei roți de încărcare în timpul redării animației de tip mașină de scris. Puteți alege să adăugați o ușoară întârziere ajustând timpul din Întârziere camp.
Seteaza Construiți-vă animație pentru a începe Cu Build 1. Pentru cea de-a treia animație, selectați După construirea 2 de la start meniu derulant și setat Întârziere la 0s. Repetați pentru a patra animație.
Selectați După construirea X din meniul derulant pentru animațiile succesive. Cu aceasta, efectul căutării și al panoului este finalizat.
Efectul panoului de informații este un pic mai dificil de creat, dar lustruie demo-ul frumos. În al treilea diapozitiv al Keynote, utilizați formă și text instrumente pentru a construi un panou de informații cu lățimea ecranului iPhone. Nu adăugați încă fotografii, dar asigurați-vă că lăsați un spațiu pentru ei. Control-clic la Selectați toate elementele, Click dreapta și selectați grup pentru a combina elementele. Acest lucru face ca panoul de informații să fie mult mai ușor de manipulat în animație.
grup elementele panoului de informații. Apoi, introduceți trei sau patru fotografii pe care doriți să le afișați în demonstrația dvs. Redimensionați-le pentru a se potrivi înălțimii în spațiul pe care l-ați lăsat pe panoul de informații. Nu vă faceți griji dacă nu se potrivesc pe panou - aici animația va veni puțin.
Introduceți imaginile pe care doriți să le afișați. Control-clic la Selectați panoul de informații și fotografiile și grup lor. Mutați grupul astfel încât marginile panoului să se alinieze cu ecranul. Pe acest diapozitiv, păstrați panoul de informații chiar sub ecranul iPhone-ului, astfel încât acesta să nu fie vizibil. Atunci, Click dreapta pe iPhone și selectați Aduceți în față. Acest lucru va da aspectul panoului de informații afișat pe ecran.
Aliniați panoul cu marginile telefonului. Duplicat și schimbați panoul mai sus în diapozitiv, astfel încât să apară doar informațiile de bază privind locația.
Treceți panoul astfel încât doar informațiile de locație de bază să iasă din partea de jos a ecranului. Atunci, duplicat diapozitivul și schimbarea panoului chiar mai mare, astfel încât întregul panou să apară în ecranul iPhone.
Creați un duplicat al acestui diapozitiv. Atunci, Click dreapta pe panou și selectați Degrupeaza. Aceasta ar trebui să desprindă fotografiile, păstrând tot restul panoului intact. Nu mutați niciunul dintre elementele de pe diapozitiv.
Degrupeaza fotografiile din panoul de informații. Din nou, duplicat diapozitivul, apoi deplasați fotografiile astfel încât ultima fotografie din linie să apară în cele din urmă pe ecran. Acesta este ultimul bit al cadrului care trebuie făcut înainte de a începe animarea.
Deplasați fotografiile spre stânga, astfel încât ultima să apară pe ecran. Din fericire, crearea animației pentru acest efect este destul de simplă, deoarece se bazează exclusiv pe Magic Move.
Reveniți la Slide 3 și selectați Adăugați un efect> Magic Move de la Anima meniul. Asigura-te Fade Obiecte de neegalat este selectat, Potrivire după obiect, Accelerare este setat sa Ușurință în & Ease Out, și începe tranziția Automat cu 0s întârziere. Ca și restul animațiilor, Durată este la discreția ta - am dat-o 1.50s pentru viziunea inițială a panoului de informații.
Adăuga Magic Move animații. Adăuga Magic Move animații la diapozițiile 4 și 6, păstrând totul la fel, cu excepția Durată, care pot fi modificate după preferințele dvs. Mi-am pus mâna pe mine 2.00s și 1.00s respectiv.
Slide 5 nu ar trebui să conțină animație, dar asigurați-vă că vă asigurați Începeți tranziția este setat sa Automat cu 0s întârziere pentru ca demo-ul să funcționeze fără probleme. Slide 7 nu necesită animație, deoarece este ultimul diapozitiv al Keynote.
A stabilit Începeți tranziția la Automat cu 0s întârziere. Și voila - este efectul panoului de informații, completat.
Odată ce tot conținutul este în vigoare și totul este animat așa cum ar trebui să fie, este timpul să curățați.
Cea mai ușoară modalitate de a face acest lucru este de a crea un fundal pentru videoclip. Pentru a face acest lucru, creați patru dreptunghiuri folosind Formă unealtă care controlează iPhone-ul, dar nu se suprapune cu ecranul iPhone-ului. Utilizați instrumentele din Format pentru a face fiecare dintre casete să pară identice unul cu celălalt.
Creați un fundal prin încadrarea iPhone-ului. Bacsis: O umplere a culorii care completează culorile reflectate în aplicația dvs. funcționează cel mai bine pentru fundal. Gradienții și umpluturile de imagini tind să arate dezordonate și inconsecvente. Evitați și umbrele.
Selectați fiecare cutie prin control-clic. Click dreapta pe una dintre casetele selectate și faceți clic pe grup pentru a crea o formă. Apoi, faceți clic pe imaginea iPhone pentru al selecta, Click dreapta, și faceți clic pe Aduceți în față pentru a crea imaginea unui fundal în spatele iPhone-ului. Copie forma de fundal și pastă pe fiecare diapozitiv. Asigurați-vă că aduceți iPhone-ul în față pe fiecare diapozitiv pentru a finaliza efectul.
Fundalul adaugă atingeri finale demo-ului. Tot ce trebuie să faceți este să exportați slideshow-ul ca pe un videoclip. Pentru aceasta, faceți clic pe Fișier> Export la> QuickTime.
Pentru a exporta videoclipul, selectați Fișier> Export la> Quicktime. A stabilit Redare la Slideshow Recording. Format determină calitatea videoclipului, care poate fi setată la preferințele dvs. După ce ați configurat aceste opțiuni în funcție de preferințele dvs., faceți clic pe Următor → pentru a exporta videoclipul.
Configurați setările de export. Toate lucrările din Keynote sunt acum complete. Înregistrarea poate fi utilizată așa cum este sau este editată mai departe în alte aplicații, cum ar fi Final Cut sau iMovie, dacă doriți să adăugați elemente audio sau alte elemente video.
În acest tutorial, am instruit cum să animați cartografia demo pentru o aplicație iOS în Keynote. Folosind animația Keynote's Magic Move, puteți crea animații netede care modelează căutările și panourile și efectele panoului de informații care pot fi găsite într-o aplicație iOS bazată pe hartă.
Dacă aveți alte întrebări sau nelămuriri sau doriți să vedeți ce alte tipuri de animații pot fi modelate în Keynote, nu ezitați să lăsați un comentariu mai jos!
Accentsconagua