Animationsprincipper for nettet

Som "front-end"-designere og udviklere bruger vi CSS til udseende, position og skabelsen af flotte sites. Vi bruger ofte CSS til at skabe bevægelse i sider i form af overgange eller sågar animationer, men vi går for det meste ikke længere end det.

Animation kan være et kraftfuldt værktøj til at hjælpe vores besøgende og vores kunder med at forstå og få fordel af vores designs. Der er principper, som vi kan anvende i vores arbejde, for at få mest ud af denne kraft.

Veletableret som fundamentale arbejdspraksis ved Disney var de 12 animationsprincipper udgivet som "The Illusion of Life: Disney Animation" i 1981. Disse principper beskriver hvordan animation kan blive brugt til at drage beskueren ind i en troværdig verden.

I denne artikel vil jeg gennemgå hver af de 12 principper og diskutere hvordan de kan blive anvendt når man laver web-sider. Du kan finde HTML- og CSS-kilden på Codepen for dem alle her.

Mase og strække

Det er denne angivelse at et objekt har en fysisk masse og når det bevæger sig forbliver denne masse den samme. En bold vil blive bredere når den rammer jorden mens den hopper, men vil også blive kortere når dens masse bliver omdelt igen.

Dette er mest brugbart når man skaber objekter, som vi vil have anset for fysiske, såsom mennesker, ure eller hoppende bolde.

Det er muligt at ignorere denne regel med elementer fra en web-side. DOM-elementer er ikke nødvendigvis associeret med fysiske objekter og kan gro og skrumpe på skærmen efter nødvendighed. For eksempel: En knap kan gro og gradvist forvandle til en informationskasse eller fejlmeddelser kan vises og skjules.

Stadigt, denne mase- og strækketeknik kan blive anvendt til at give et objekt følelsen af fysisk masse. Selv små skift i form kan skabe diskrete men iøjefaldende effekter.

Forventning

Bevægelser forekommer ikke pludseligt. I virkeligheden forekommer der for det meste en form for opbygning til en bevægelse. Om det så er en bold der begynder at rulle før den falder af et bord, eller om det er en person, som bukker deres knæ som forberedelse til et hop.

Vi kan bruge dette til at lave vores overgange og animation mere livstro. Forventningen kan være i form af diskrete ændringer, som hjælper personer med at forstå hvad der skifter og holde styr på objekter på skærmen.

For eksempel: Et element kan skrumpe en smule før det gror sig større ved et "hover". Tilføjelsen af ekstra ting til en liste kan blive introduceret ved at andre objekter flytter sig ud af vejen først.

Opsætning

Opsætningen er at blive sikker på et objekt har focus i scenen når andre objekter eller aspekter af scenen gør plads for hvor den hovedsagelige begivelse tager sted. Dette betyder at enten placere den hovedsagelige begivelse i en prominent position eller at maskere andre elementer, for at fokusere på hvad brugeren har brug for at se.

I web-termer kunne en tilgang være at bruge en "modal"-overtrækning for bestemt indhold. Tilføjelsen af en mørk overlægning på en eksisterende side, og derefter placere indholdet foran, opsætter det og viser det som det primære fokuspunkt.

En anden tilgang er bevægelse. Når mange objekter er i bevægelse er det svært at forstå hvilke, som kræver opmærksomhed. Hvis alle andre objekter er stillestående og kun ét objekt bevæges, selv en smule, kan det blive meget nemmere at få øje på.

En teknik er at give en "Save"-knap en slyngende eller blinkende effekt i et kort øjeblik for at hentyde for brugeren at de måske burde gemme et dokument. Med resten af sidens indhold holdt statisk og stillestående vil selv små bevægelser stå ud.

"Ret-fremad"-aktion og "posering-til-posering"

"Ret-fremad"-aktion er når hver del af en animation er tegnet. "Posering-til-posering" er når en serie af nøglepunkter er defineret og resten af intervallerne fyldes ind senere - for det meste af en assistent.

Med web-animation bruges "posering-til-posering"-animation. Overgangen mellem nøglepunkter kan blive håndtereret af browseren, som interpolere forskellen mellem hvert nøglepunkt og tegner så mange dele, som den kan, for at gøre animationen flydende.

En undtagelse til dette er steps timingfunktionen. Med denne funktion træder browseren igennem så mange individuelle dele, som er defineret. På denne måde kan man tegne en serie af billeder og få browseren til at fremvise dem i en sekvens, hvilket skaber en "ret-fremad"-aktionsstil.

"Følg igennem" og "overlappende aktion"

Ting sker ikke nødvendigvis på samme tidspunkt. Når en bil pludseligt stopper tilter den fremad med røg fra hjulene og chaufføren indeni, som fortsætter fremad until de bliver stoppet eller forsvinder.

Disse detaljer er nemlig eksempler på "følg igennem" og "overlappende aktion". De kan blive brugt på nettet til at fastslå at noget stopper og har ikke bare glemt at animere. For eksempel: En ting tilføjet til en liste glider måske ind, fortsætter lidt for langt, og korregerer sig selv til den rigtige position.

For at skabe følelsen af overlappende aktion kan vi bevæge elementer i hver deres forskellige tempo. Det er en teknik der bliver anvendt godt i iOS-operativsystemer med overgange mellem brugergrænseflader. Nogle knapper og elementer bevæger sig i forskellige hastigheder og den kombinerede effekt er derfor mere livstro og mindre flad end hvis alting bevægede sig samtidigt. Den kombinerede bevægelse giver tilskueren tid til ordenligt at forstå ændringen.

I web-termer kan dette indebære at stable overgange og animationer hvilket skaber effekter som arbejder i forskellige hastigheder.

Langsomt-ind og langsomt-ud

Objekter går sjældent fra stillestående til maksimal hastighed øjeblikkeligt. De har det med at gradvist få fart og sætte farten ned før de stopper. Uden acceleration og aftagning føles bevægelser robot-agtige.

I CSS-termer er langsomt-ind og langsomt-ud kendt som easing. Easing er kendt som timingfunktioner og er en måde at beskrive intervallet gennem forløbet af en animation.

Ved at bruge timingfunktioner kan animationer starte langsomt og tage fart (ease-in), starte hurtigt og aftage (ease-out) eller mere komplekse effekter ved brug af cubic-bezier timingfunktionen.

Kurver

Mens objekter er mere livstro når de følger "langsomt-ind og langsomt-ud", bevæger objekter sig sjældent i en lige linje. De har det med at bevæge sig i kurver.

Vi kan opnå kurvede bevægelser med CSS på en række forskellige måder. En er kombinationen af forskellige animationer. For eksempel kan en animation af en hoppende bold blive lavet udfra en animationen, som bevæger bolden op og ned, og en anden, som bevæger den fra side til side, samtidigt. Bolden ville derefter bevæge sig i en kurve henover skærmen.

En anden mulighed er at rotere et element. Vi kan justere et elements rotationscenter ved at sætte dets transformationsoprindelse udenfor elementet. Objektet vil derefter rotere i en kurve, hvis det bliver roteret.

Sekundær aktion

Når en primær aktion finder sted, kan en sekundær animation hjælpe med at lægge vægt på aktionen. Dette kunne være de svingende arme af én, som går, eller deres tiltende hoved. Eller en hoppende bold, som skyder en smule støv op.

På web-sider kunne sekundære aktioner være elementer, som bevæger sig ud af vejen, når det primære fokuspunkt introduceres, såsom at trække en ting og placere den i midten af en liste.

Timing

En animationstiming er hvor lang tid den er om at blive færdig. Timing kan blive brugt til at få objekter med vægt til at se tunge ud i bevægelse, eller tilføje personlighed til en bevægelse.

På nettet kunne dette være så simpelt som justeringen af animation-duration eller transition-duration værdierne.

Det er nemt at lade animationer tage længere tid end de behøver. Justeringen af timingen kan hjælpe med at få animationen væk fra indholdet eller interaktionen.

Overdrivelse

Mest almindeligt brugt i tegnefilm, overdrivelse kan drage opmærksomhed til bestemte aktioner eller gøre dem mere dramatiske. En ulv, som forsøger at bide, kunne have sine kæber mere åbne end normalt for at gøre effekten mere uhyggelig eller humoristisk.

På en web-side kan objekter blive skaleret op eller ned for at lægge vægt på dem og drage opmærksomhed. For eksempel ved udfyldelsen af en form kan den aktive sektion gro, mens de andre skrumper og falmer.

Solide tegninger

Ved animeringen af tre-dimensionelle objekter bør der være påpasselighed for at sikre de følger perspektivreglerne. Folk er vandt til at leve i en tre-dimensionel verden, så når objekter ikke opfører sig, som forventet, ser det forkert ud.

Moderne browsere har udemærket understøttelse til tre-dimensionelle transformationer. Dette betyder at vi kan rotere og placere objekter i en scene og browseren kan håndtere overgangene automatisk.

Appellering

Appelleringen er kuntsværkets personlighed og hvordan det får os til at forstå kunstnerens intention. Ligesom en skuespillers charisma er det kombinationen af detaljer og bevægelser, som kreerer et appellerende resultat.

Animationer skabt med megen omhu på nettet kan skabe appellering. Firmaer, såsom Stripe, har haft god brug af animationer for at skabe troværdighed til deres checkout-proces.

Prøv det selv!

Brugen af de forskellige principper er en god måde at forbedre animationer. Animationer som bevarer den fysiske vægt, forbereder forandringer, gør brug af sekundære aktioner og har god timing er kostbare og hjælpsomme tilføjelser til dit indhold.

Når du har chancen for at tilføje animationer til dine sider vil brugen af et eller flere af principperne gøre dem mere effektive og appellerende.