Den ultimata guiden till webbanimering

Animation är en av mänsklighetens livslånga drömmar (om några historiker ska tros). Teorin börjar med grottmålningar: I vissa grottmålningar är det vanligt att se varelser ritade med alltför många lemmar.

Det finns några teorier bakom detta. Några tyder på att detta bara berodde på att konstnärerna inte hade något sätt att radera lemmarna och lämna sina misstag på väggarna för eftertiden. Andra tror att dessa var de tidigaste försöken att fånga idén om rörelse i en statisk bild. Jag väljer att tro på den andra teorin.

Och vad är mer naturligt än en önskan att fånga rörelse? Allt i naturen rör sig. Människor som går, vattenlöpande, växter som utvecklas, det enda som verkligen är konstant i naturen är förändring, i form av rörelse. En del av det händer i en suddighet, och en del av det är för långsamt för att uppfattas, men det händer alltid.

Animering är förändring och rörelse. Det är det närmaste vi får för att fånga livet i vår konst. Det här är varför människor alltid säger saker som "animering gör att våra webbplatser (eller presentationer eller vad som helst) kommer att leva ." Det kan vara överanvändt, men det är en fras som elegant tar upp syftet med animering i webbdesign.

Den illusionen av rörelse, när den tillämpas korrekt, är det som säger användarna att de faktiskt har gjort något. De har lyckats interagera med gränssnittet och har orsakat något att ändra.

Detta utlöser samma känslor (eller åtminstone mycket liknande känslor) i dem som de upplever när de interagerar med fysiska föremål. På ett sätt är animation skeuomorf. Det stämmer, jag sa "s" -ordet.

När den används rätt är animering utformad för att efterlikna interaktioner i verkligheten. På ett sätt har vi kommit i full cirkel. Vi kanske inte använder alltför många lädertexturer längre, men vi försöker fortfarande efterlikna den verkliga världen.

Animering på webben: en kort historia

Innan vi går in på mer praktiska saker, låt oss ta en titt på hur animering på Internet kom till dess nuvarande (och mycket coola) tillstånd. Det började ganska mycket med gifs ...

.gif-filer är, det visar sig äldre än jag är i ungefär två år. De introducerades 1987, precis i tid för Internetens tidiga dagar som vi vet (mer eller mindre). Således började epoken med dansande spädbarn och andra grymheter som mest glömdes.

Fortfarande, om populariteten hos gifs visade oss någonting, var det att folk ville föra animering till sina webbsidor. Tänk på dig, de flesta hade nog inte funderat på de sätt som animering kunde förbättra användbarheten. Det handlade om att föra en liten stil och lite liv till den annars statiska riken på webbsidan.

När funktionerna i .gif-filer var uttömda önskade människor nya och bättre sätt att lägga till animering på sina webbplatser. Och ljud! Åh, härligt ljud. Hur fantastiskt skulle det vara om folk öppnade din webbsida och din favoritlåt spelade? Och som, den faktiska sången ... ingen av den MIDI-skiten, eller hur?

Det var Flash som gjorde det möjligt för oss att lära oss den lektionen på det svåra sättet. Låt oss inte glömma att Flash var ganska fantastiskt för sin dag. Det var faktiskt en innovation. Det var framsteg. Det var coolt .

Oavsett hur mycket det missbrukades senare måste det erkännas att Flash tillät oss att göra saker med Internet som vi inte hade känt förut. Det utvidgade kreativa horisonter, skapade jobb för människor i en helt ny industri, gav oss "webbkartor" och den bästa någonsin att hända på 90-talet (förutom Nirvana): Flash-spel. Även nu hittar jag de sakerna mycket beroendeframkallande.

Med tiden gick många designers över till JavaScript-baserad animering för mindre saker, som dropdown-menyer och andra navigationselement. Det var ju mer SEO-vänligt, trots allt, om du gjorde det rätt. Andra använde bara JavaScript eftersom det var hur FrontPage och DreamWeaver bytte knappbilder, men långsamma framsteg är fortfarande framsteg.

I mitten av det senaste decenniet arbetade W3C redan med att inkludera animering i CSS-specifikationen. Under 2009 släpptes det första offentliga utkastet till CSS-animationsspecifikationen.

Och nu? Nu hittar vi sätt att tvinga hårdvarubildning, kombinera CSS-animationer med SVG-filer, JavaScript-biblioteken för att utöka grundläggande animeringsfunktionalitet och mer.

Nu letar vi efter sätt att göra mer än att lägga till stil på webbplatser. Nu försöker vi öka användbarheten, informera och utbilda användarna och göra det lättare för dem att räkna ut vad de gör.

Animering är inte längre en nyhet för webbdesigners. I film blev det grunden för en helt ny typ av berättande. För oss blir det en grund för effektiv interaktionsdesign.

Det har aldrig varit en bättre tid att fokusera på animering i förhållande till webbaserade gränssnitt och appar. Tekniken är ännu inte helt formad (när är det någonsin?) Eller helt stöds (när är det någonsin?) Men vi hittar nya sätt att leverera det till människor utan att använda plugins eller proprietär kod.

Ju mer vi baserar vår animering på öppna standarder, ju fler människor kommer faktiskt att kunna se det i första hand. Och med det senaste fokuset på att använda det för att driva interaktion är det en väldigt bra sak.

Det är dags att vara en tidig adopterare.

Typer av webbanimering

Låt oss komma till saken. Vilka typer av animationer pratar vi om? Jag menar, jag sa mycket om att använda animering för att förbättra våra användargränssnitt. men vad betyder det egentligen?

Det är uppenbarligen inte tillräckligt för att kasta animering på våra webbsidor och hoppas det förbättrar vår konverteringsfrekvens. Det skulle vara dumt. Precis som alla andra aspekter av design, måste du noggrant överväga vilken typ av animation du använder, och när du använder dem.

Så också måste de faktiska detaljerna i genomförandet beaktas. Om dina animeringar är så resurskrävande att de väger ner dina användares mobila enheter, eller sämre, deras skrivbord, har du ett problem. Eller fem.

Låt oss börja med att titta på de olika typerna av animeringar som vanligtvis används på webben:

Gränssnittets animering

Jag vet inte om det här är den vanligaste typen av animering, men på ett gissning är det förmodligen det. Och så borde det vara. Detta är enligt min mening den mest användbara typen animering som vi har tillgång till.

Som jag sa i introduktionen är detta animationen som låter dina användare veta att deras åtgärd (klicka, till exempel) har registrerats. Deras klick var katalysatorn som behövdes för att få något att hända, oavsett om det skulle navigera till en annan sida, öppna ett sidofält eller ett modalfönster eller skicka ett e-postmeddelande från ditt kontaktformulär.

Den feedbacken är inte bara trevligt att ha, det är viktigt nu, i den här plattformen. Människor behöver veta skillnaden mellan gränssnitt och dekoration. Att animera våra element på enkla och subtila sätt på interaktion ger dem den feedback de behöver.

Det kan vara så enkelt att göra knappbakgrundsändringar eller göra dem studsa. Den här kategorin täcker också de animeringar som gör sidor "glida" på sidan, och de som gör modala fönster blåser upp sig till existens.

Väntar animeringar

Och än en gång handlar det om att ge feedback till användaren. Det här är de animationer som du kommer att visa för användaren när något händer i bakgrunden, och du vill inte att de ska freak out.

Användningen av dessa animationer visades för länge sedan, då grafiska användargränssnitt först uppfanns. Det började med hur muspekaren skulle förvandlas till en timme glas och även framdriftsstänger. Apple introducerade "spinnande stranden boll av döden", någon gång, och windows visade att filer flyter graciöst från en mapp till en annan.

Dessa konventioner antogs på webben så snart som möjligt och med god anledning. När folk börjar undra på vad som händer, fortsätter de att klicka eller tappa. Det kan vara ett uttryck för frustration. De kanske tror att det faktiskt gör sakerna snabbare.

Hur som helst berättar användaren vad som händer, till och med via en enkel framdriftslinje, att man lättare kan tänka sig ... även för de av oss som har använt datorer länge.

Beegit, skrivappen som jag brukade skriva och redigera den här artikeln ger mig en praktisk "progresscirkel" för att berätta när mina bilder ska laddas upp, vilket du kan se i den övre vänstra delen av modalfönstret:

Story-telling animationer

Nu berättar historia med animering utöver tecknade film. Faktum är att jag inte pratar om dem alls. Snarare designar vissa människor webbplatser så att en användare interagerar med dem (till exempel: genom att rulla ner sidan) utlöses animationer som berättar en historia.

Några vanliga exempel är de sidorna som visar upp en ny produkt genom att "montera" den före dina ögon. Andra spelar ut mer som en tecknad film, med små tecken som följer dig ner på sidan och allt.

Effektiviteten av dessa animationer är ... diskutabel. Vanligtvis är de inte avsedda att förbättra användbarheten, men för att imponera på användaren och ge dem lite kontext för ämnet på sidan. De kan försöka visa upp en hantverks hantverk eller dela med sig av de erfarenheter som ledde till ett företags skapande.

Oavsett huruvida de uppnår dessa saker skulle det troligen bero på animeringarnas kvalitet, oavsett huruvida de otillbörligt påverkar webbplatsens prestanda och innehållet på själva sidan. Om en användare inte hittar det de söker efter på din webbplats kan alla animationer i världen inte fixa det.

Två exempel som jag tycker om, är mycket, kommer från märken som har stor erfarenhet av denna typ av sak: Apple och Sony.

Sidan tillägnad Mac Pro visar exakt vad som ligger under huven när du rullar ner:

Samtidigt visar de på Sony att flera olika enheter är, ja, inte så mycket "monterade" att ha sina delar krossade tillsammans, komplett med brandpåverkan.

Rent dekorativa animeringar

För bättre eller sämre sätter vissa människor animering på deras webbplats som inte har någon annan avsikt än att ses. Är det värt det?

Ja och nej…

Jag skulle vanligtvis undvika det eftersom det är distraherande. Du vill ha människors ögon dras av orsakerna till att de borde köpa allt du säljer och dina uppmaningar till handling. Du vill att dom ska få vad de kom för. Om din webbplats inte tjänar någon mening till användaren, eller om de blir för distraherade när de försöker bestämma sitt syfte, kanske de inte kommer tillbaka.

Dekorativ animation borde vara dold, helt. Visa det efter att folk har slutfört ditt uppmaning till handling. Du kan också inkludera subtila animeringar som bara utlöses när användaren gör något mycket specifikt, som att sväva musen över något litet i sidhuvudet / sidfoten.

Här på WDD, som svävar över logotypen, animerar den, men det kan hävdas att eftersom logotypen är en länk, är det inte rent dekorativt, men det är ett bra exempel ändå. En enkel Google-sökning kommer att avslöja att det finns flera webbplatser där användandet av konami-koden kommer att göra någonting hända (som att göra Godzilla pop och roar ... Jag skämtar inte).

Andra exempel är Googles många kända påskägg , och den här från photojojo.com:

Rulla hela vägen ner till botten av en sida, och en vänlig dinosaur kommer "ta din bild". Vidare, på sidor som har det, kommer den ballong som ses på skärmbilden att flyta subtilt från sida till sida.

Animering i reklam, eller: min tarm säger nej, men min plånbok säger ja

Reklam. För vissa är det deras inkomst ( hosta ahem hosta ), och för andra, en plåga. Lägg till animering i en annons och boom! Ögonen dras mot det mot deras vilja. Det är en reflexåtgärd.

Lägg till ljud, och de kommer att känna intensiv hat ... också en reflexhandling.

Men det är nästan oundvikligt. Om du vill få folk att titta på dina annonser är det ett bra sätt att animera dem. Det kan göra dig ovälkommen på några moderna annonsnätverk som är stolta över "diskreta annonser", men om animerade annonser inte fungerade skulle vi inte ha dem.

Men den animationen kommer med samma problem som uppstår genom dekorativa animationer: det distraherar användaren från deras uppgift. I världen av online-försäljning kan distraktion vara döden.

I slutändan kommer det vara upp till dig att väga för och nackdelar. Inga annonser, diskreta annonser eller animerade annonser, det är en avvägning.

Du kanske märker att ingenstans på denna lista nämnde jag skärm animeringar. Det beror på att jag förväntar mig att alla ska veta bättre.

Implementera Animation

De tekniska aspekterna av implementeringen spelar roll, men om du använder .gif, video, CSS, SVG eller till och med Flash (shudder), finns det några principer som betyder mer. Glöm, för ett ögonblick, den teknik eller teknik som du planerar att använda, och gör dig redo för en lite mer teori. Dina användare kommer tacka dig.

Prestanda, prestanda, prestanda

Du kanske tror, ​​"Okej, det låter självklart. Animationer ska springa fort, inte långsamt. "Du har rätt, det är uppenbart, teoretiskt. Problemet är att jag fortfarande hittar webbplatser, byggda med all den senaste tekniken, med hakig animering.

Jag har ett Nvidia GTX 750 TI-grafikkort som kostar mig ca 200 kronor. Din animering ska inte vara hakig. Jag var på några webbplatser nyligen som fick mig att tänka, "Skyrim löper snabbare än detta." Och jag skämtade inte eller överdriver.

Tänk nu hur det skulle vara att navigera på samma webbplatser på en tablett eller smarttelefon av låg kvalitet. Å ena sidan skulle det vara ett bra sätt att verkligen testa någons karaktär, men å andra sidan kommer det inte att få de långsamma webbplatserna mer verksamhet. Om dina enda alternativ är långsam animering eller ingen animering alls, är du bättre med ett gränssnitt som bara sitter där.

Det vill säga ingenting om webbplatser som är byggda med så mycket animering och så många specialeffekter som de behöver ladda upp skärmar med progressfält. Ingen borde behöva vänta på animeringar att ladda innan de får se den information de vill ha eller behöver. Någonsin. Att få folk att vänta är hur du förlorar affärer.

Låt oss bryta allt detta ner till kula punkter:

• Om Skyrim löper mer smidigt än din webbplats på skrivbordet, är det dåligt.
• Om din webbplats behöver en laddningsfält innan användarna får se hemsidan är det verkligen dåligt.

Och här kommer jag att ge bara lite tekniskt råd: var hårdvaruacceleration och prestanda är CSS nästan alltid bättre än JavaScript. När du har ett val, använd CSS-baserad animering och använd JS som en återgång.

Börja med de små sakerna

När man överväger animering som ett designverktyg, snarare än ett stilistiskt val, är det bäst att börja små. För en, utför en liten och diskret animering bättre (se avsnittet ovan). För det andra måste stor och prickig animering ha en avsikt utöver att bara "se bra ut" för att vara användbar.

De flesta webbplatser behöver ingen animering utöver det slag som används för att använda användargränssnittet, känner "real" och semi-naturligt. Innan du börjar kasta parallax som ris vid ett bröllop, fråga dig själv om det faktiskt kommer att förbättra upplevelsen för dina användare. Skulle stora och prickiga saker som rör sig på skärmen informera och styra dina användare bättre än den vanliga texten och vackra bilder?

I de flesta fall är svaret förmodligen "nej". Det kommer givetvis undantag. Det finns nästan alltid. För det mesta kan det dock vara bättre att bara animera dina knappar, göra din dolda navigationsfältet glid in och animera helvetet ur det framgångsrika meddelandet som visas efter att någon använde din kontaktformulär.

Subtilitet är nyckeln till bra design, men ändå så undervärderad. Börja där. Och så, om det blir klart att göra något större och flashier skulle tjäna ditt syfte ur en användarupplevelse ståndpunkt, gå ut!

Håll varaktigheten låg, eller: Jag känner behovet ... behovet av hastighet

Animationer ska vara snabba, eller snarare, de borde hända snabbt. Jag pratar inte om prestanda här, utan snarare den aktuella tiden som ett objekt spenderar i rörelse.

Tänk på hur vi interagerar med verkliga objekt. Ibland flyttar vi snabbare, ibland långsammare. Den hastighet med vilken vi interagerar med ett objekt kan bero på dess storlek, uppgiften till hands, eller om den är full av en vätska som vi inte vill spilla; men i allmänhet plockar vi upp saker och flyttar dem ganska snabbt. Individuella rörelser kan hända i millisekunder.

"Millisekunder" är generellt den tid som vi vill mäta användargränssnittet. När som helst, och folk börjar förlora tålamod med sin maskin, eller din produkt, eller båda. Du måste hålla det kort, eller saker bara känns långsamma.

Detta gäller särskilt för produkter som människor måste använda flera gånger. Även om animationen är supersnygg och underhållande, kommer den att förlora sitt överklagande senast den tionde gången någon måste se den. Det är en studsande knapp eller en glidande meny, inte introen till din favorit TV-show. Ingen sjunger med, här.

Gör saker studsa, en gång i taget

Fysiska objekt studsar. Vissa av dem gör det inte bra, men i stort sett alla saker studsar lite om du släpper dem tillräckligt långt på en hård yta och om det inte finns för mycket luftmotstånd och ... får du min poäng.

Att interagera med UI-element är som att interagera med små hårda föremål. Du kasta dem till ena sidan, studsar de lite. Du släpper dem, de studsar lite.

Därför kan det vara till hjälp när det är lämpligt att göra animationerna "studsa", speciellt om de har flyttat vertikalt. Det handlar om att upprätthålla illusionen.

Saker stannar normalt inte på en dime

Saker på gång brukar ta lite tid att sluta. Stationära föremål som sätts i rörelse tar vanligtvis lite tid att påskynda. Yay fysik!

Så, när du gör föremål rörande, eller sluta flytta, kom ihåg att ge dem en liten tid (i millisekunder) för att sakta ner eller påskynda. Detta kallas "lättnad", och det finns funktionalitet för det byggt direkt in i CSS.

länkar

Ingen Ultimate Guide artikel skulle vara komplett utan minst en sektion full av länkar. Så här går du. Vi har länkar till artiklar om grundläggande teori bakom animering i webbdesign, handledning för att komma igång och massor av exempel. Njut av.

Web animationsteori

Vill du ha mer information innan du börjar animera saker? Inga problem. Här är en hel massa råd från mycket smarta människor, och en viss generell spekulation om animationens framtid på Internet.

Animationsprinciper för webben
Denna artikel över på cssanimation.rocks skisserar de mest grundläggande principerna bakom animerande objekt i allmänhet. Var noga med att kolla in resten av deras hemsida för exempel, tutorials och en e-postkurs. (E-postkursen kostar pengar, men.)

Osynlig animation
Steven Fabre berättar hur animation, som designen själv, borde vara i princip osynlig. Det låter bara paradoxalt tills du läser det. Gå gör det.

Kommer animering att vara den stora UI-trenden för 2015?
En spekulativ bit med en bra, om kort, förklaring av några av de ledande principerna för animering.

Animationens roll i webbdesign
En annan bit med enkel, grundläggande rådgivning. Det är kort och enkelt, men kanske värt att omläsa varje gång du måste göra ett stort animationsrelaterat beslut. Tänk på det som ett fusklag för att hålla perspektivet.

Animationsstaten 2014
En utmärkt översikt över hur webanimering (mer eller mindre) för närvarande görs av Rachel Nabors. Du kommer att se hennes namn här några gånger, eftersom hon är något av en expert på ämnet.

Fem sätt att animera på ett ansvarsfullt sätt
En annan fantastisk artikel av Rachel Nabors (jag sa till dig att du skulle se mer av hennes grejer ...). I det här går hon över fem sätt att lägga till animering i ditt arbete utan att förvandla dina användare.

Handledningar

Hämta dina keyframes här! Läs mer CSS egenskaper än du någonsin trodde var möjligt / nödvändigt. Lär skillnaden mellan easeIn och easeOut - Jag vet att jag var tvungen att slå upp det.

4 enkla CSS3-animeringstutorials
Hoppa över intro och gå rakt på de bra sakerna, om det är så du jobbar. Jag har tagit med en hel del introduktionsövningar nedan. Om du hellre vill gå direkt till en grundläggande kod startar du här.

En nybörjar Introduktion till CSS Animation
Exakt vad det står i titeln. Så länge du har grundläggande kunskaper om HTML och CSS, kan du följa denna handledning och få en fungerande kunskap om CSS-baserad animering.

Guide till CSS-animering: Principer och exempel
Smashing Magazine tar sina läsare genom ett antal grundläggande animeringar. Det är enkelt, men värdefull kunskap.

Flashless Animation
En annan bra introduktion till CSS animation, skrivet av den ständigt fantastiska Rachel Nabors. Ja, det är från 2012, men den enda skillnaden mellan då och nu är att tekniken som hon tillhandahåller har mer webbläsarsupport.

Codrops tutorials
Jag kan inte, och det betyder jag allvarligt, jag kan helt enkelt inte rekommendera killarna på Codrops nog. De har gjort massor av exempel, bevis på koncept, idésamlingar och ja, handledning. De älskar animering, och de gör mycket för att dela den kärleken.

Här är bara några av de animationsrelaterade handledning som de har skapat:

• Tilted Content Slideshow
• Sidförladdningseffekt
• Slide Header Layout
• Lekfull Trampolin Effekt
• Hur man skapar (animerade) textfyllningar

CSS3 Transitions, Transforms, Animation, Filters och mer!
En interaktiv, djupgående handledning med levande massor av levande exempel. Kom hit när du är färdig med de mest grundläggande handledningarna. Det ger dig massor av idéer att träna med.

Övergångar & Animationer
En guide till enkel CSS-animering med ett särskilt fokus på övergångar och övergångsegenskaper.

Skaka upp webben med CSS3 (hur man gör länkar skaka)
En handledning med betoning på att skaka saker. Jag menar, där går du.

Högpresterande animationer
Denna handledning, medförfattare av den mycket älskade Paul Lewis och Paul Irish, fokuserar på hur man animerar saker på ett sätt som inte saktar webbläsaren. Eftersom detta kan vara särskilt viktigt på mobila enheter är det mycket värt att läsa.

Handledning: Använd animation-fyll-läge i dina CSS-animationer
Efter att ha läst så mycket om hur man gör saker rör sig kan det vara en bra idé att lära sig om beteendet hos föremål som inte har flyttat än, eller just har avslutat sin animering. Ibland kan stylingen bli svårt, och det är där animations-fill-mode kommer in.

Keyframe Animation Syntax
Ett utdrag som tillhandahålls av den alltid hjälpsamma css-tricks.com. Minns inte hur man gör de keyframe sakerna gör vad du vill? Bokmärk detta och sluta oroa dig för det.

En titt i: Cubic-Bezier I CSS3 Övergång
Det här handlar om timing. Jag menar den bokstavliga tidpunkten för din animering. Mer specifikt handlar det om att använda Bezier-kurvan för att få din animeringstid bara rätt.

Flip saker!
Jag hittade två olika fantastiska handledning om hur man skapar flippande animeringar. Var och en ger ett annat tillvägagångssätt till bordet, och några extrafunktioner som den andra inte gör. Så i stället för att bara tänka mig, har jag tagit med dem båda.

Skapa en CSS Flipping Animation
CSS Transitions, Transforms & Animations - Flipping Card

Animera CSS3-gradienter
De flesta animationstutorials antar att du vill animera ett objekts geometri eller position på sidan. Den här lär dig hur man animerar vad som finns inom dem ... i detta fall en gradient.

Utvald bild, animationsbild via Shutterstock.

• ← Så här exporterar du SVG-mönster
• 3 viktiga lektioner för webbplatser som fungerar →