Accentsconagua
Share
Materialet Design-språk skapades för att hantera problem med platt design på mindre skärmar genom att ge visuella signaler till interaktiva element. I den här artikeln kommer du att lära dig om några av de grundläggande begreppen animering och hur de kan användas för att ge en naturlig, livliknande känsla till element. Du får se hur du använder dessa idéer för att glädja dina användare samtidigt som de hjälper dem att förstå din App-användargränssnitt.
Google föreslår att alla animeringar ska vara mottagliga, naturliga, medvetna och avsiktliga. Objekt på skärmen ska fungera som om de är gjorda av specifika material, med egen vikt och volym som dikterar hur de rör sig och verkar på skärmen.
Animationer som uppstår bör vara direkt korrelerade med en åtgärd och bör känna sig målmedvetna och levande. De ska vara meningsfulla och hjälpa dig att vägleda användaren genom din ansökan genom att ha ett syfte och tjäna det. Animationer ska skapa kontext för dina användare och hjälpa till att styra ögonen på skärmen så att de är medvetna om vad som är möjligt med din app.
Motion bör vara mer oroad över hur lång tid det tar att komma från punkt A till punkt B, i stället för det avstånd som behöver täckas. Avstånden kommer att ändras beroende på skärmens storlek, men hastigheten på ett objekt kommer att lägga tonvikten och hjälpa användaren att förstå vad som händer.
När ett objekt måste tas bort och ett annat läggs till på skärmen (t.ex. en knapp som ändras från spel till paus), ska du morph det första objektet till det andra. På samma sätt kan du signalera betydande förändring i ett objekt genom att ändra färg och alfa för skärmobjektet. På detta sätt är användarna medvetna om vad som har förändrats, och du kan betona vad som är tillgängligt i dina appar för att användare ska interagera med.
En av de största referenserna för att förstå naturliga animationer är boken Illusionen av livet av Frank Thomas och Ollie Johnston, som har ett kapitel som beskriver de animationsprinciper som används av Disney i sina animerade filmer. Thomas och Johnston beskriver 12 grundläggande principer i sin bok. I det här avsnittet kommer vi att diskutera några av dessa principer och hur de kan relateras till materialdesign.
När ett föremål fortskrider genom en åtgärd kommer det att visa förändringar i sin form baserat på materialet som det är gjord av.
Detta begrepp representeras av Squash and Stretch-principen, som kan illustreras bäst genom att tänka på en studsande boll. När externa krafter verkar på bollen, såsom tyngdkraft eller uppåtgående acceleration, kommer bollen att sträcka sig. När objektet träffar marken, kommer det att kasta upp och squash mot ytan. Objekt som rör sig och interagerar med ytor i din app ska använda denna idé för att ge illusionen av vikt och volym till ditt objekt när det rör sig.
Inga större åtgärder bör hända ur det blå. När du utför en animering i dina appar ska du ha en annan, mindre åtgärd som leder fram till huvudanimationen. Denna princip kallas förväntan, och det hjälper till att förhindra situationen där användaren frågar, "Varför hände det här?" Naturlig rörelse börjar i allmänhet med en uppvärmning snarare än att helt enkelt börja. I Android kan du använda AnticipateInterpolator klass för att skapa en animering som först backar upp ett litet avstånd innan du går framåt.
Syftet med staging är att göra innehållet klart och begripligt för dina användare. Din användargränssnitt och animationer ska känna sig naturliga och förankrade till en kärnuppgift eller -koncept, snarare än att lämna användaren osäker på varför något hände på ett visst sätt. Du bör bara utföra en stor åtgärd i taget för att hålla sakerna enkla och medvetna.
När ett rörligt föremål stannar, stoppar det inte alla omedelbart (kort om man slår ett annat solidt föremål, men det är där Stretch and Squash kommer i spel). Tillägg av ett objekt fortsätter att flytta en kort stund efter att kärnan i objektet har stoppats.
När du skapar materialanimeringar ska du försöka använda två olika positioner: önskad stopppunkt och en som ligger lite längre fram, vilken animation helt kan stoppa vid och sedan studsa tillbaka till din slutliga position. Detta förhindrar att din animering verkar platt och mekanisk. Denna typ av animation kan åstadkommas med hjälp av BounceInterpolator eller OvershootInterpolator klasser.
Naturlig rörelse sker inte i en jämn hastighet, och inte heller bör dina animeringar.
När ett objekt rör sig från utsidan av synfältet och in i skärmen, ska det göra så snabbt och sedan sakta ner när det kommer till sin slutliga position. Snabbrörelsen kommer att fånga användarens uppmärksamhet och ge tillräckligt med tid för att de ska märka var det slutar.
Omvänt ska ett objekt som lämnar skärmen starta långsamt och påskynda när det lämnar skärmen. Detta kommer att ge din användare tillräckligt med tid att märka att objektet rör sig, och när det går fort att lämna de kommer de att förstå att de borde sluta ta hand om det där objektet på skärmen.
När ett föremål flyttar från ett läge på skärmen till ett annat, utan att lämna skärmen när som helst, borde du kombinera dessa två idéer så att användaren ser vad som händer medan animeringen bibehåller en naturlig känsla. Denna princip tillämpas också på listor, eftersom de snabbt bläddrar när en användare slänger dem och sedan saktar ner tills de slutar. När en lista hoppar mellan sektioner blir den mindre nedsänkt och känns mekanisk. Du kan använda LinearOutSlowInInterpolator, FastOutLinearInInterpolator, eller FastOutSlowInInterpolator att lägga till dessa animeringseffekter.
Med mycket få undantag sker naturlig rörelse i bågar snarare än exakta raka linjer. När du flyttar objekt över skärmen bör du, förutom den långsamma in och ut principen, försöka flytta objektet i en spårväg för att undvika en mekanisk, onaturlig känsla i din animering. Du kan använda Android ArcMotion föremål för att flytta dina föremål längs en krökt väg.
Sekundära åtgärder är mindre, enklare handlingar som stöder tanken på den viktigaste åtgärden. Sekundära åtgärder bör inte överskugga eller vara mer intressanta än huvudåtgärden, eftersom de existerar helt enkelt för betoning.
Ett exempel på en sekundär åtgärd är när du öppnar navigeringslådan i en Android-applikation. Medan skivan glider öppen är huvudsaken, är hamburgerikonet till pilanimering en enkel effekt som betonar vad som händer utan att skymma huvudändringen på skärmen.
När du arbetar med animeringar är timing allt. Om en animering rör sig för långsamt eller snabbt kommer användaren att märka att något känns "av".
Det är viktigt att komma ihåg att materialdesign kräver att föremål visas som om de är gjorda av något slags material. Om ett föremål är tänkt att känna sig som en pappers glidning på en yta, ska den inte flyttas snabbt över skärmen. Förståligt, det finns ingen säker formel för animationshastigheter i appar, men med viss tid och övning borde du kunna bygga bra tidsinställda animeringar som passar med temaet och syftet med din app.
Nu när du är medveten om de stora begreppen Material Motion och några av de grundläggande principerna för animering, kan du börja leka med de olika tillgängliga verktygen för att animera din app och lägga till den lilla extra popen som glädjer dina användare.
Om du vill lära dig mer om att skapa animering i Android, kolla in den djupgående kursen Animate Your Android App från Ashraff Hathibelagal, här på Envato Tuts+.
Eller kolla in några av våra andra handledning på animering i Android!
