Share
Modellering av en oppdatert app kan være en svært vanskelig oppgave hvis du ikke er kjent med profesjonell animasjonsprogramvare og -teknikker. Heldigvis leverer Keynote et veldig effektivt animasjonsverktøy som ikke er for vanskelig å bruke. I denne opplæringen vil jeg demonstrere hvordan du bruker Keynote til å prototype IOS UI animasjoner; Vi skal bygge en kartbasert appdemo.
Merk: Keynote versjon 6.6.2 ble brukt i å lage denne opplæringen.
Først vil du finne en iPhone-mockup for å vise appdemoen din. De fleste iPhone-mockups av høy kvalitet er formobjekter i PSD-format, så de er skalerbare til hvilken størrelse som er nødvendig. Rå PSD-filer er ikke kompatible med Keynote, men noen få endringer i iPhone PSD vil være nødvendig for at demoen skal fungere skikkelig..
Avhengig av PSD, må du muligens rasterisere og slette de nødvendige lagene, slik at bare en iPhone-ramme forblir. Slett bakgrunnsbildet slik at det blir gjennomsiktig. Lagre filen som en PNG.
IPhone-mockupen skal se slik ut når den er demo-klar. Bortsett fra iPhone, er de eneste andre ressursene du trenger for å holde deg i hånd, kart, ikonsett og andre bilder du brukte i appmockupene dine. Resten av UI-elementene vil bli gjenopprettet i Keynote for å sikre at animasjoner fungerer som de skal.
Åpne Keynote. På toppen av Velg et tema vindu, klikk Bred. Dette vil skape en lysbildefremvisning med et widescreen-bildeforhold, noe som gir oss et ferdig produkt som vi gjerne kan laste opp til Youtube i HD. Deretter velger du Hvit mal.
Velg Hvit tema. I Format panel til høyre på skjermen, klikk Endre master og velg Blank.
Velg Blank layout fra Endre master fall ned. Nå begynner du å lage grunnruten. Sett inn iPhone-bildet enten ved å dra PNG-filen til Keynote eller ved å klikke Sett inn> Velg ... og finne filen i Finder-vinduet som vises. Sentrer iPhone på lysbildet.
Deretter legger du inn et kartbilde på lysbildet. Høyreklikk på bildet og velg Plasser i bakgrunnen. Dette vil skape illusjonen av et bilde på iPhone-skjermen.
Høyreklikk på kartet og velg Plasser i bakgrunnen å skape illusjonen av et bilde inne på skjermen. Du vil også legge til et hvilket som helst brukergrensesnittelement som synes å være tomt i appen din. For mine formål har jeg lagt til søkefeltet med et søk og et lasteskive, som jeg opprettet ved hjelp av Keynote's form og tekstverktøy.
Den ferdige grunnruten. Etter å ha opprettet grunnruten, kan du begynne rammen av animasjonen i lysbildeserien. Den viktigste tingen å huske på i dette stadiet er å takle de store animasjonene før de håndterer de mindre detaljorienterte.
For å lage søke- og panorereffekten, dupliserer du basisruten ved høyreklikke på miniatyrbildet i sidefeltet og velg Duplisere.
Duplisere grunnruten. I det nylig dupliserte lysbildet, slett lastehjulet ved å velge det og trykk på Slett nøkkel. Skift deretter bildet på kartet slik at destinasjonen du søker etter, vises i den øvre halvdelen av iPhone-skjermen.
Sett pinbildet inn i Keynote og legg det over ønsket destinasjon. I Format menyen, legg til en Kontakt Skygge. Klipp skyggen til din smak. Deretter, Høyreklikk på pinnen og velg Plasser i bakgrunnen. Gjør det samme for kartbildet.
Legg til en kontaktskygge på pinnen. Duplisere dette lysbildet, og flytt det opp til andre lysbildeposisjon. Ta pinnen og flytt den av skjermen, hold den direkte over sin opprinnelige plassering. Dette kan gjøres lettest ved å trykke og holde nede Opp piltastene, eller ved å endre Y posisjon i Arrangere panel av Format Meny.
Flytt pinnen av skjermen, hold den direkte over den planlagte posisjonen. Nå som alt er på plass, kan du begynne å animere. Det viktigste verktøyet som skal brukes til å gjøre dette er Magic Move animasjon, som skaper jevne overganger for et element som vises på flere lysbilder. Magic Move vil skape den glatte pannen og pin-drop-effektene vi sikter på.
Gå tilbake til Slide 1, og bruk Magic Move ved å åpne animere menyen og klikke Legg til effekt> Magic Move. Sett kryss Fade uovertruffen objekter. Å velge Match etter objekt. Sett Akselerasjon til Enkel In & Out. Sett Start overgang til Automatisk med en 0s Forsinkelse. Varighet er opp til ditt skjønn - jeg satte det på 1,50s for pannen.
Konfigurer Magic Move animasjoner. Gjenta dette på Slide 2, men sett lengden kortere enn forrige lysbilde. Jeg satte denne til 0.60s.
Tips: Test varighetene ved å klikke på Forhåndsvisning knappen for å skille mellom ønsket animasjonslengde.
Med Magic Move avgjort for denne delen av opplæringen, går du tilbake til Slide 1 for å lage søk animasjoner. Velg teksten på lysbildet. I Bygg inn panel av animere menyen, klikk Legg til en effekt. Å velge Skrivemaskin fra rullegardinmenyen, og sett Varighet og retning til 0.60s og Framover.
Legg til en Bygg inn animasjon til teksten. Lasthjulet krever litt mer animasjon for å nøyaktig skildre en som finnes i en app. Først legger du til en Bygg inn animasjon. Å velge Løse opp fra rullegardinmenyen, og sett dens Varighet til en rask fart, noe i tråd med 0.20s.
Legg til en Bygg inn animasjon til lasteskiven. Deretter åpner du Handling panel og Legg til en effekt. Å velge Rotere fra rullegardinmenyen. Å velge Lett begge fra Akselerasjon nedtrekksmenyen. jeg satt Varighet til 1,00s, og Vinkel og rotasjon til en 359˚ Vinkel og 0 rotasjoner, men dette kan endres til personlig preferanse.
Legg til en handling på lasteskiven. Til slutt åpner du Bygge ut panel og Legg til en effekt. Å velge Løse opp fra rullegardinmenyen, og sett dens Varighet til en rask fart, noe i tråd med 0.30s.
Legg til en Bygge ut animasjon til lasteskiven. Når animasjonene er lagt til, klikker du på Bygg ordre knappen nederst på siden animere Meny. Dette vil vise rekkefølgen der alle animasjonene på gjeldende lysbilde vil spille, og kan brukes til å automatisere lysbildet.
Klikk på den første animasjonen, og velg Etter overgang fra Start nedtrekksmenyen. Juster Delay etter eget skjønn - dette vil føre til at animasjonen starter automatisk etter at en viss tid er gått.
Velge Etter overgang vil starte animasjonene automatisk når du presenterer Keynote. Klikk på den andre animasjonen, og velg Med Build 1 fra Start nedtrekksmenyen. Dette vil føre til at lasteskiven bygges inn mens skrivemaskinens animasjon spiller. Du kan velge å legge til en liten forsinkelse ved å justere tiden i Utsette felt.
Sett Bygg inn animasjon for å starte Med Build 1. For den tredje animasjonen, velg Etter bygge 2 fra Start rullegardinmenyen, og sett Forsinkelse til 0s. Gjenta for fjerde animasjon.
Å velge Etter Build X fra rullegardinmenyen for de påfølgende animasjonene. Med det, er søk og pan-effekten fullført.
Informasjonspanel-effekten er litt vanskeligere å lage, men det polerer demoen pent. På den tredje lysbildet av Keynote, bruk form og tekst verktøy for å bygge et informasjonspanel med bredden på iPhone-skjermen. Ikke legg til bilder helt ennå, men sørg for å legge igjen en plass til dem. Ctrl-klikk til å velge alle elementene, Høyreklikk og velg Gruppe å kombinere elementene. Dette gjør informasjonspanelet mye lettere å manipulere i animasjon.
Gruppe elementene i informasjonspanelet. Deretter legger du inn tre eller fire bilder du vil vise i din demo. Endre størrelsen på dem slik at de passer høyt i gapet du forlot på informasjonspanelet. Ikke bekymre deg hvis de ikke passer alle på panelet - dette er hvor animasjon kommer litt.
Sett inn bilder du vil vise. Ctrl-klikk til å velge informasjonspanelet og bildene og gruppe dem. Flytt gruppen slik at kantene på panelet faller i tråd med skjermen. På dette lysbildet holder du informasjonspanelet like under iPhone-skjermen, slik at det ikke er synlig. Deretter, Høyreklikk på iPhone og velg Ta med til fronten. Dette vil gi utseendet til informasjonspanelet blir vist på skjermen.
Juster panelet med kantene på telefonen. Duplisere lysbildet, og skift panelet høyere opp på lysbildet slik at bare de grunnleggende opplysningene om stedet vises.
Skift panelet, så bare den grunnleggende plasseringen informasjonen ser ut fra bunnen av skjermen. Deretter, duplisere lysbildet, og skift panelet enda høyere, så hele panelet vises på iPhone-skjermen.
Lag et duplikat av dette lysbildet. Deretter, Høyreklikk på panelet og velg Del opp gruppe. Dette bør ungroup bildene mens du holder resten av panelet intakt. Ikke flytt noen av elementene på lysbildet.
Del opp gruppe bildene fra informasjonspanelet. En gang til, duplisere lysbildet, skift deretter bildene slik at det siste bildet i linjen endelig vises på skjermen. Dette er den siste delen av rammen som må gjøres før du kan begynne å animere.
Skift bildene til venstre slik at den siste vises på skjermen. Heldigvis er det ganske enkelt å lage animasjonen for denne effekten, som den bare er avhengig av Magic Move.
Gå tilbake til Slide 3, og velg Legg til en effekt> Magic Move fra animere Meny. Forsikre Fade uovertruffen objekter er sjekket av, Match etter objekt, Akselerasjon er satt til Lett og lett, og overgangen starter Automatisk med en 0s forsinkelse. Som resten av animasjonene, Varighet er etter eget skjønn-jeg satte det på 1,50s for den første tittelen på informasjonspanelet.
Legg til Magic Move animasjoner. Legg til Magic Move animasjoner til lysbildene 4 og 6, holder alt det samme med unntak av Varighet, som kan endres til din smak. Jeg satte meg til 2.00s og 1,00s henholdsvis.
Slide 5 skal ikke inneholde animasjon, men sørg for å være sikker Start overgang er satt til Automatisk med en 0s forsinkelse for at demoen skal løpe jevnt. Slide 7 krever ingen animasjon som det er den siste lysbilde av Keynote.
Sett Start overgang til Automatisk med en 0s forsinkelse. Og voila-det er informasjon panel effekten, fullført.
Når alt innholdet er på plass og alt er animert som det skal være, er det på tide å rydde opp.
Den enkleste måten å gjøre dette på er å lage en bakgrunn for videoen. For å gjøre det, opprett fire rektangler ved hjelp av Form verktøy som rammer iPhone, men ikke overlapper med iPhone-skjermen. Bruk verktøyene i Format panel for å gjøre hver av boksene likne hverandre.
Lag en bakgrunn ved å utforme iPhone. Tips: En fargefyll som utfyller fargene som reflekteres i appen din, fungerer best for bakgrunnen. Gradienter og bildefyller har en tendens til å se rotete og inkonsekvente. Unngå å bruke skygger også.
Velg hver av boksene ved kontroll klikke. Høyreklikk på en av de valgte boksene og klikk Gruppe å lage en form. Deretter klikker du på iPhone-bildet for å velge det, Høyreklikk, og klikk Ta med til fronten å skape bildet av en bakgrunn bak iPhone. Kopiere bakgrunnsformen og lim inn det på hvert lysbilde Sørg for å ta med iPhone foran på hvert lysbilde for å fullføre effekten.
Bakgrunnen legger til slutt på demoen. Alt som er igjen å gjøre er å eksportere lysbildeserien som en video. For å gjøre det, klikk Fil> Eksporter til> QuickTime.
For å eksportere videoen, velg Fil> Eksporter til> Quicktime. Sett avspilling til Slideshow Opptak. Format bestemmer kvaliteten på videoen, som kan settes til dine preferanser. Når du har konfigurert disse alternativene etter eget ønske, klikker du neste å eksportere videoen din.
Konfigurer eksportinnstillingene. Alt arbeid i Keynote er nå ferdig. Opptaket kan brukes som-er eller redigeres videre i andre programmer, for eksempel Final Cut eller iMovie, hvis du vil legge til lyd eller andre videoelementer.
I denne opplæringen instruerte jeg hvordan du demokart animasjoner for et iOS-program i Keynote. Ved hjelp av Keynote's Magic Move-animasjon kan du opprette jevne animasjonsmodellerings-søk-og-pan og informasjonspanel-effekter som kan finnes i et kartbasert iOS-program.
Hvis du har ytterligere spørsmål eller bekymringer, eller ønsker å se hvilke andre typer animasjoner som kan modelleres i Keynote, er du velkommen til å legge igjen en kommentar nedenfor!
Accentsconagua