Att göra CSS-Animationer Känns Mer Naturliga

0
77

Det brukade vara som formgivare designat och kodare som kodade. Det var ingen crossover, och det är så det var. Men med tillkomsten av CSS övergångar och animeringar, de linjer suddas ut lite. Det är inte längre lika enkel som den designer som dikterar design och coder transkribera—designers måste nu veta något om koden, och kodare ska känna till något om design för att effektivt samarbeta.

Som ett exempel, låt oss säga att en designer ber utvecklare att göra en låda studsa. Det är det—ingen ytterligare undervisning. Utan några kors-kunskap och ett gemensamt språk, båda sidor är lite vilse i detta meddelande: utvecklaren inte har tillräckligt med information för att till fullo inse designerns vision, men designern egentligen inte vet vad alternativen är och hur man kan kommunicera med dem. Med en mycket grundläggande tolkning, kan du avsluta med något som ser ut så här:

Se Pennan Studsande Box 1 av Brandon Gregory (@pulpexploder) på CodePen.

Inte mycket spännande. Men, för att vara rättvis, är detta inte uppfyller alla de kriterier som anges. Vi kan definitivt bli bättre än detta, dock.

Den första sak att titta på är tidpunkten funktion. I ovanstående exempel, vi använder en linjär timing funktion, vilket innebär att lådan är ständigt rör sig i samma hastighet. I vissa fall, detta är önskvärt, men i den verkliga världen, motion brukar inte fungera så.

En enkel lösning är att helt enkelt ändra tidpunkten funktion för att underlätta. Detta gör i början och slutet av varje animation lite långsammare än den mellersta delen, vilket ger en mer naturlig look till några animeringar. Här är lådan med de lättnader funktionen påslagen:

Se Pennan Studsande Box 2 av Brandon Gregory (@pulpexploder) på CodePen.

Detta är en liten förbättring, men det finns fortfarande mycket arbete att göra. Rutan ser fortfarande mekaniska och stel, med samma animation som förekommer inom samma tidsram om och om igen. Lägga till en liten fördröjning mellan studsar lägger till några visuell kontrast som verkar vara en lite mer naturlig:

Se Pennan Studsande Box 3 av Brandon Gregory (@pulpexploder) på CodePen.

Rutan som nu ser ut som det är att hoppa snarare än att helt enkelt flytta upp och ner. Det är en liten vind-och nedvarvning mellan hopp som härmar vad en levande varelse kan göra om de får samma undervisning. Även om vi har ingen referens för vad en hoppande rutan skulle se ut, vi har alla en ganska bra uppfattning om vad en hoppande varelse skulle se ut. Eftersom vi vet vad som skulle hända i naturen, genom att härma, animation känns mer naturlig. Men vi kan göra mer för att göra som vind-up känna mig lite mer tungt vägande.

Om du tittar på tecknade serier, du kommer att märka att naturliga rörelser är ofta överdrivna, att skapa en karikatyr av verkligheten. När du väl gjort det kan kännas lika naturligt som något i den verkliga världen, med den extra bonusen av att ingjuta lite charm och karaktär i animation.

I detta skede, ett samarbete mellan designer och utvecklare är avgörande — men många designers kan inte ens vara medveten om att dessa alternativ finns. Det kan vara upp till utvecklaren att planen denna möjlighet till designer.

Genom att lägga till några små snedvridning till omfattningen av rutan, vi kan lägga en hel del att animeringen:

Se Pennan Studsande Box 4 av Brandon Gregory (@pulpexploder) på CodePen.

Nu har lådan karaktär. Det känns levande. Det finns många saker att ändra, men det är redan rör sig mycket längre än den ursprungliga instruktionen på ett mycket bra sätt!

Vi kommer att gå ett steg längre och lägga till en liten uppgång i slutet av hopp:

Se Pennan Studsande Box 5 av Brandon Gregory (@pulpexploder) på CodePen.

Den andra studsa gör detta att känna sig mer levande, men något verkar fortfarande avstängd. Bounce ser stel jämfört med resten av animation. Vi behöver lägga till en annan bit av distorsion som vi gjorde för wind-up:

Se Pennan Studsande Box 6 av Brandon Gregory (@pulpexploder) på CodePen.

Att subtila distorsion vid slutet gör återhämtning verkar vara mycket mer naturliga. Sammantaget en enorm förbättring från våra grundläggande linjär studsa i det första exemplet.

Att just det kan vara exakt vad vi letar efter, men ytterligare förändringar i graden av rörlighet kan göras med en egen kubikmeter Bézier-kurvan:

Se Pennan Studsande Box 7 av Brandon Gregory (@pulpexploder) på CodePen.

Utan både designer och utvecklare medveten om animering grundläggande principer och kontroller, kan denna nivå av anpassning är omöjligt. Verkligen, denna artikel bara skrapar på ytan av båda fälten. Om du är en webbdesigner eller webbutvecklare som arbetar med designers, jag vill starkt uppmana er att läsa upp på båda.

För animation principer, en Illusion av Liv: Disney Animation av Ollie Johnston och Frank Thomas är en bra primer på hur man gör för att karikatyr av verkligheten verkar levande och verkliga. Med det gemensamma språket på plats, kommunikation och samarbete mellan designers och utvecklare blir mycket lättare.

För tekniska kontroller och varianter av CSS-animation, möjligheterna är nästan oändliga. Dröjsmål och timing är enkla att justera. Som nämnts ovan, om du inte gillar out-of-the-box enkel timing funktion, det är mycket möjligt att skapa din egen med hjälp av en kubik-bezier(). Du kan också justera nivån av distorsion som du vill ta med den animation som är närmare eller längre bort från verkligheten. Det viktiga är att både designer och utvecklare funderar på att dessa variationer i stället för att blint ta allt utan anpassning. Delad kunskap och samarbete kan göra även enkla animationer till riktigt stora.

Fler Resurser

  • 12 grundläggande principerna för animation – Wikipedia inlägg som beskriver de begrepp som introduceras i en Illusion av Liv.
  • Guide till CSS-Animering: Principer och Exempel – Smashing Magazine artikel som ger en heltäckande guide till CSS-animationer.
  • Animation i Design System – 24 Vägar artikel av Sarah Drasner
  • Animation egendom – CSS-Tricks almanackan inlägg som omfattar fastigheten och dess värderingar
  • Övergången egendom – CSS-Tricks almanackan inlägg som omfattar fastigheten och dess värderingar
  • CubicBezier.com – Resurs för att skapa en anpassad animering kurvor med ett användarvänligt gränssnitt.