Accentsconagua
Share
Materialet Design-språket ble opprettet for å løse problemer med flat design på mindre skjermer ved å gi visuelle signaler til interaktive elementer. I denne artikkelen vil du lære om noen av de grunnleggende konseptene animasjon og hvordan de kan brukes til å gi en naturlig, livlig følelse til elementer. Du får se hvordan du bruker disse ideene til å glede brukerne dine samtidig som de hjelper dem å forstå appens brukergrensesnitt.
Google foreslår at alle animasjoner skal være lydhør, naturlig, bevisst og forsettlig. Objekter på skjermen skal fungere som om de er laget av bestemte materialer, med egen vekt og volum som dikterer hvordan de beveger seg og fungerer på skjermen.
Animasjoner som oppstår bør være direkte korrelert til en handling og bør føle seg målrettet og levende. De burde være meningsfylte og hjelpe brukeren gjennom søknaden din ved å ha en hensikt og tjene det formålet. Animasjoner bør skape kontekst for brukerne dine og hjelpe med å veilede øynene deres på skjermen, slik at de er klar over hva som er mulig med appen din.
Bevegelse bør være mer opptatt av hvor mye tid det tar å komme fra punkt A til punkt B, i stedet for avstanden som må dekkes. Avstandene vil endres avhengig av størrelsen på skjermen, men hastigheten på et objekt vil legge vekt på og hjelpe brukeren til å forstå hva som skjer.
Når en gjenstand må fjernes og en annen legges til skjermen (for eksempel en knapp som skifter fra spill til pause), bør du morph det første objektet i det andre. På samme måte kan du signalere signifikant endring i et objekt ved å endre farge og alfa for skjermelementet. På denne måten er brukerne klar over hva som har endret seg, og du kan legge vekt på hva som er tilgjengelig i appene dine, slik at brukerne kan kommunisere med.
En av de største referansene for å forstå naturlige animasjoner er boken Illusjonen av livet av Frank Thomas og Ollie Johnston, som har et kapittel som beskriver prinsippene for animasjon brukt av Disney i sine animerte filmer. Thomas og Johnston skisserer 12 grunnleggende prinsipper i sin bok. I denne delen diskuteres noen av disse prinsippene og hvordan de kan relateres til Material Design.
Når et objekt utvikler seg gjennom en handling, vil det vise endringer i sin form basert på materialet den er laget av.
Dette konseptet er representert av Squash and Stretch-prinsippet, som kan illustreres best ved å tenke på en hoppende ball. Som eksterne krefter virker på ballen, som tyngdekraften eller oppover akselerasjon, vil ballen strekke seg. Når objektet treffer bakken, vil det slå opp og squash mot overflaten. Objekter som beveger seg og interagerer med overflater i appen din, bør bruke denne ideen for å gi illusjonen om vekt og volum til objektet når det beveger seg.
Ingen store handlinger skal skje ut av det blå. Når du utfører en animasjon i appene dine, bør du ha en annen, mindre handling som fører opp til hovedanimasjonen. Dette prinsippet kalles forventning, og det hjelper til med å forhindre situasjonen der brukeren spør, "Hvorfor skjedde dette?" Naturlig bevegelse starter vanligvis med en oppvarming i stedet for bare å starte. I Android kan du bruke AnticipateInterpolator klasse for å lage en animasjon som først støtter opp en liten avstand før du går videre.
Formålet med opprettingen er å gjøre innholdet ditt klart og forståelig for brukerne. Din brukergrensesnitt og animasjoner bør føles naturlige og forankret til en kjerneoppgave eller konsept, i stedet for å la brukeren være usikker på hvorfor noe skjedde på en bestemt måte. Du bør bare utføre en stor handling om gangen for å holde ting enkelt og bevisst.
Når et bevegelige objekt kommer til et stopp, stopper det ikke alle samtidig (kort om du treffer et annet solidt objekt, men det er der Stretch and Squash kommer inn i spill). Vedlegg av et objekt vil fortsette å bevege seg i kort tid etter at kjerne av objektet har stoppet.
Når du lager materielle animasjoner, bør du forsøke å bruke to forskjellige posisjoner: ønsket stopppunkt, og en som ligger litt lenger, som animasjonen helt kan stoppe ved og deretter hoppe tilbake til din endelige posisjon. Dette forhindrer at animasjonen din ser ut som flat og mekanisk. Denne typen animasjon kan oppnås ved hjelp av BounceInterpolator eller OvershootInterpolator klasser.
Naturlig bevegelse skjer ikke med jevn hastighet, og heller ikke animasjonene dine.
Når en gjenstand beveger seg utenfor utsikten og legger inn skjermen, bør den gjøre det raskt og deretter sakte når det kommer til sin endelige posisjon. Den raske bevegelsen vil ta brukerens oppmerksomhet og gi deg nok tid til å legge merke til hvor det ender.
Omvendt bør en gjenstand som forlater skjermen starte sakte og øke hastigheten når den forlater skjermen. Dette vil gi brukeren nok tid til å legge merke til at objektet beveger seg, og ettersom det går fort til å forlate, vil de forstå at de bør slutte å bry seg om det aktuelle elementet på skjermen.
Når et objekt beveger seg fra en posisjon på skjermen til et annet, uten å forlate skjermen når som helst, bør du kombinere disse to ideene slik at brukeren ser hva som skjer mens animasjonen opprettholder en naturlig følelse. Dette prinsippet er også brukt på lister, da de raskt vil rulle når en bruker flenger dem, og deretter vil dempe til de stopper. Når en liste hopper mellom seksjoner, blir den mindre nedsenkende og føles mekanisk. Du kan bruke LinearOutSlowInInterpolator, FastOutLinearInInterpolator, eller FastOutSlowInInterpolator for å legge til disse animasjonseffekter.
Med svært få unntak skjer naturlig bevegelse i buer i stedet for nøyaktige rette linjer. Når du beveger objekter over skjermen, bør du i tillegg til det sakte inn og ut prinsippet forsøke å bevege objektet i en buet bane for å unngå en mekanisk, unaturlig følelse i animasjonen. Du kan bruke Android ArcMotion gjenstand for å flytte objekter dine langs en buet sti.
Sekundære handlinger er mindre, enklere handlinger som støtter ideen om den viktigste hendelsen. Sekundære handlinger bør ikke overskygge eller virke mer interessant enn hovedhandlingen, da de bare eksisterer for vektlegging.
Et eksempel på en sekundær handling ville være når du åpner navigasjonsskuffen i en Android-applikasjon. Mens skuffen skyver åpen er hovedaksjonen, er hamburgerikonet til pilanimasjon en enkel effekt som understreker hva som skjer uten å overskygge hovedendringen på skjermen.
Når du arbeider med animasjoner, er timingen alt. Hvis en animasjon beveger seg for sakte eller raskt, vil brukeren legge merke til at noe føles "av".
Det er viktig å huske at Material Design krever at objekter vises som om de er laget av en slags materiale. Hvis en gjenstand er ment å virke som papir som glir på en overflate, bør den ikke flyttes raskt over skjermen. Forståelig, det er ingen sikker formel for animasjonshastigheter i apper, men med litt tid og praksis bør du kunne bygge godtidede animasjoner som passer med temaet og hensikten med appen din.
Nå som du er klar over de store konseptene Material Motion og noen av de grunnleggende animasjonsprinsippene, kan du begynne å leke med de forskjellige tilgjengelige verktøyene for å animere appen din og legge til den lille ekstra popen for å glede brukerne dine..
Hvis du vil lære mer om å lage animasjon i Android, sjekk ut det grundige kurset Animer Android-appen din fra Ashraff Hathibelagal, her på Envato Tuts+.
Eller sjekk ut noen av våre andre opplæringsprogrammer på animasjon i Android!
