Innan 2010 dominerades webbanimationen av Adobes Flash, och en av dess riktiga styrkor var att det gav utvecklare och designers ett universellt verktyg och arbetsflöde för animation och rörelse på webben (Nabors, 2014). I Flash glansdagar var ”rörelse” en underdrift, och många webbsidor var i stort sett interaktiva filmer. Om vi tar sidan marvismint.com som exempel, så har den ett överflöd av animation och rörelse. Marvis hemsida är förmodligen ett väldigt påkostat projekt, men det enda animationerna tillför är på sin höjd en liten ”wow-effekt”. Det är snarare så att det blir svårare att ta till sig innehållet och att navigera blir en pina med alla långa väntetider medan animationerna laddas.

”Make sure your animation supports the interactions in the experience and doesn’t detract or confuse.” -(Hinman, 2012).

Det som blev början till slutet för Flash var då Steve Jobs 2010 annonserade att Apples iPhone och iPad aldrig skulle stödja Flash (Nabors, 2014). Flash tvingades tillslut ut ur bilden och designers och utvecklare stod utan bra verktyg för rörelse och animation på webben.

Animation med JavaScript och jQuery var ett stort steg framåt, men det var resurskrävande och var tvunget att användas sparsamt (Thomas, 2015).

Det var så sent som 2011 som de stora webbläsarna började stödja CSS-animationer, och till och med idag krävs webbläsarprefix för att de ska fungera överallt (Thomas, 2015). Idag har designers och utvecklare möjlighet att utnyttja hårdvaruacceleration, och kan kontrollera rörelse med hjälp av CSS3 och javascriptramverk som är utvecklade och optimerade för animering (Thomas, 2015).

Varför är animation viktigt?

Förutom av rent estetiska skäl så animationer bra eftersom de hjälper användaren att förstå vad det är som händer på en webbplats eller i en app; om gränssnittet ger en respons på användarens interaktioner så tillför det en känsla av att uppgiften är utförd:

”When a button has been clicked, do you feel that it has reacted to the pressure of your mouse? When a file has been saved, do you get the strong sense that your data has truly been transferred and stored?” -(Shapiro, 2014b).

Genom att animera element på en hemsida, istället för att de helt abrupt bara dyker på mitt på skärmen, skapar vi en kontext. Användaren förstår var elementet kom ifrån, och varför. Det hjälper därför användaren att fokusera mindre på gränssnittet, och mer på innehållet (Thomas, 2015).
Om en användare klickar på en ikon och helt plötsligt tas hela skärmen upp av en meny, har de ingen uppfattning om var menyn kom ifrån. Det är kanske inte helt förödande, men det är ingen trevlig användarupplevelse.
Våra hjärnor är programmerade att lägga märke till rörelse, vilket har utnyttjats av bland annat magiker som alltid använt rörelser för att avleda vår uppmärksamhet, och på samma sätt kan vi utvecklare använda rörelser för att rikta användares uppmärksamhet på det vi vill (Head, 2014) — t.ex. en produkt som glider ner i varukorgen, eller en låttitel som graciöst placeras i en spellista.

I takt med att animationerna blir effektivare och inte kräver lika mycket resurser, och hårdvaran blir bättre, ser vi fler animationer inom UI-design på webben (Thomas, 2015).

Javascript eller CSS?

CSS är kanske det vanligaste valet när det kommer till enklare animationer. Det är lätt att skapa så kallade static animations (Nabors, 2014) där något animeras mellan olika tillstånd, helt utan bakomliggande logik. Ta en laddningsindikator som exempel.

En annan typ av animation är så kallade statefull animations, där animeras ett element mellan två tillstånd, oftast med en boolesk operator (sant/falskt) som argument (Nabors, 2014). Det vanligaste är att en css-klass som innehåller det ena tillståndets parametrar appliceras och tas bort — och därmed transformerar elementet mellan två olika stadier — till exempel när användaren klickar på en menyikon för att fälla ut och in en fly out-meny. För att lägga till och ta bort klasserna används ett lämpligt javascriptramverk.

En tredje typ är dynamic animations som har olika utfall beroende på inmatning från användaren eller andra variabler och faktorer. De använder sin egen logik för att avgöra animationens resultat (Nabors, 2014). Det kan vara allt från att användaren flyttar ett element genom att dra det med musen eller fingret, till att dynamiskt rita upp en graf när ny data kommer in (Nabors, 2014). Detta är den mest avancerade av de tre animationsvarianterna och är inte möjlig att utföra med enbart CSS. Notera att en animation med flertalet förutbestämda utfall fortfarande räknas som statefull animation, sann dynamic animation har fler utfall än vad som är möjligt att förutse (Nabors, 2014).

Rätt verktyg

jQuery är bra till många saker — animering är inte en av dem. När jQuery används för animering orsakar det så kallad layout trashing (Geyer, 2014).

When the DOM is written to, layout is ‘invalidated’, and at some point needs to be reflowed. The browser is lazy and wants to wait until the end of current operation (or frame) to perform this reflow.
Although, if we ask for a geometric value back from the DOM before the current operation (or frame) is complete, we force the browser to perform layout early, this is known as ‘forced synchonous layout’, and it kills performance!
The side effects of layout thrashing on modern desktop browsers is not always obvious; but has severe consequences on low powered mobile devices. -(Page, 2013)

jQuery använder sig också av setInterval istället för requestAnimationFrame (Shapiro, 2014a). RequestAnimationFrame är utvecklat för animering medför att webbläsaren kan optimera animationerna och få dem att gå så mjukt och smidigt som möjligt. Animationen pausas om sidans flik blir inaktiv, vilket bland annat medför att sidor som inte används inte drar onödigt med batteri på mobila enheter och inte tar upp onödiga resurser (Irish, 2012).

jQuery har startar frekvent garbage collection (upprensning av minnet), som i värsta fall fryser animationerna tillfälligt, vilket resulterar i att animationerna känns hackiga (Shapiro, 2014a).

För att sammanfatta kan vi säga att layout trashing är det som orsakar hack i början på animationen, garbage collection är det som orsakar hack i under animationsförloppet, och bristen på requestAnimationFrame är det orsakar ett lågt framerate (antal bilder per sekund) (Shapiro, 2014a).

CSS transitions har betydligt bättre prestanda än jQuery genom att lämpa över animationslogiken till webbläsaren. Webbläsaren är effektiv på att hantera DOM-interaktioner och minneshantering och kan därmed generera mer ”flytande” animationer med ett högre framerate. CSS transitions använder också requestAnimationFrame samt hårdvaruacceleration för att öka prestandan (Shapiro, 2014a). Värt att tänka på vid animering med CSS transitions och CSS animations är att man bör hålla sig till att animera transforms (http://www.w3schools.com/cssref/css3_pr_transform.asp) och opaciteten, eftersom parametrar som påverkar layouten (height, width etc.) skapar problem med bland annat layout trashing. (Geyer, 2014).

Javascriptramverk som Velocity.js, GSAP och Transit använder samma optimeringstekniker som CSS och kan till och med generera bättre, mjukare och snabbare animationer än vad som är möjligt med bara CSS (Shapiro, 2014b). Den stora fördelen kommer från att javascript kan avgöra när tex hårdvaruacceleration ska användas, och när det inte ska det. Hårdvaruacceleration belastar nämligen GPUn vilket kan resultera i hackiga animationer, framförallt på mobila enheter (Shapiro, 2014a). Javascriptramverken har också ett bättre system för att hantera fallbacks och fungerar därmed i alla webbläsare, till och med IE8 och IE9.

Källor

Geyer, M. (2014). The Art of UI Animations, Lean UX SF. [online] Markgeyer.com. Available at: http://markgeyer.com/pres/the-art-of-ui-animations/#/ [Accessed 30 Jan. 2015].

Head, V. (2014). UI Animation and UX: A Not-So-Secret Friendship. [online] Alistapart.com. Available at: http://alistapart.com/article/ui-animation-and-ux-a-not-so-secret-friendship [Accessed 29 Jan. 2015].

Hinman, R. (2012). A New Mobile UX Design Material – Smashing Magazine. [online] Smashing Magazine. Available at: http://www.smashingmagazine.com/2012/10/30/motion-and-animation-a-new-mobile-ux-design-material/ [Accessed 29 Jan. 2015].

Irish, P. (2011). requestAnimationFrame for smart animating – Paul Irish. [online] Paulirish.com. Available at: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/ [Accessed 30 Jan. 2015].

Nabors, R. (2014). The State Of Animation 2014 – Smashing Magazine. [online] Smashing Magazine. Available at: http://www.smashingmagazine.com/2014/11/18/the-state-of-animation-2014/ [Accessed 29 Jan. 2015].

Page, W. (2013). Preventing ‘layout thrashing’ | Wilson Page. [online] Wilsonpage.co.uk. Available at: http://wilsonpage.co.uk/preventing-layout-thrashing/ [Accessed 30 Jan. 2015].

Shapiro, J. (2014a). CSS vs. JS Animation: Which is Faster?. [online] David Walsh Blog. Available at: http://davidwalsh.name/css-js-animation [Accessed 30 Jan. 2015].

Shapiro, J. (2014b). Faster UI Animations With Velocity.js – Smashing Magazine. [online] Smashing Magazine. Available at: http://www.smashingmagazine.com/2014/06/18/faster-ui-animations-with-velocity-js/ [Accessed 29 Jan. 2015].

Thomas, D. (2015). Using Motion For User Experience On Apps And Websites – Smashing Magazine. [online] Smashing Magazine. Available at: http://www.smashingmagazine.com/2015/01/19/using-motion-for-ux-on-apps-and-websites/ [Accessed 29 Jan. 2015].