Principer för motion design för dig som inte animerar

Principer för motion design är tumreglerna som får rörelse att kännas naturlig i stället för slumpmässig. Klassisk karaktärsanimation har sina berömda tolv, formulerade av Disneyanimatörerna Frank Thomas och Ollie Johnston i The Illusion of Life. För designarbete, som inlägg, webbplatser, logotyper och presentationer, gör fem nästan allt jobbet: syfte, timing, easing, hierarki och återhållsamhet. Du kan använda dem utan att någonsin öppna ett animationsprogram.

Syfte: varje rörelse ska göra ett jobb

Rörelse är högljudd. Allt som rör sig drar till sig ögat, så att röra något är ett påstående om att det är viktigt just nu. Innan du animerar, sätt ord på jobbet. Kan du inte det, låt det stå still.

Timing: hur lång tid rörelse ska ta

Varaktighet är den princip de flesta gör fel på, oftast genom att vara för långsamma på små saker och för snabba på stora. Två regler hjälper. Små, frekventa rörelser ska vara snabba, eftersom folk ser dem hela tiden. Rörelser som färdas längre eller ändrar mer ska ta längre tid, eftersom ögat behöver tid att följa med.

Ett användbart test: om folk lägger märke till själva animationen snarare än det den visar är den för långsam eller för stor. Om de missar förändringen helt är den för snabb.

Easing: därför ska ingenting röra sig i konstant fart

Verkliga föremål tar fart och bromsar in. Rörelse i en konstant fart, kallad linjär, ser mekanisk ut eftersom ingenting i världen rör sig så. Easingkurvor lägger till acceleration och inbromsning, och att välja rätt är enkelt när du känner till tre fall.

• Kommer in: ease out. Kom snabbt och sätt dig mjukt, som en bil som parkerar. De flesta entréer använder det här.
• Lämnar: ease in. Börja mjukt och försvinn i fart. Utgångar kan också vara kortare än entréer.
• Rör sig inom bilden: ease in och ut. Starta och stanna mjukt.
• Loopar och rotationer: linjärt. Kontinuerlig rörelse ska hålla jämn takt, annars ser den ut att tveka vid skarven.

.panel-enter {
  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);  /* ease out */
}
.panel-leave {
  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1);  /* ease in, and shorter */
}
.background-drift {
  animation: drift 20s linear infinite;                    /* steady loop */
}

Hierarki: flytta det viktiga först

Rörelse skapar en läsordning, precis som storlek och vikt gör i en stilla design. Det som rör sig först läses först. När flera element animeras, stagga dem i ordning efter vikt, med ett kort avstånd på ungefär 50 till 150 millisekunder mellan varje, och låt bara ett element leda åt gången. Visuell hierarki tar upp den stilla versionen av samma idé.

1. 1

   Bakgrunden lugnar sig

   Fältet rör sig redan långsamt när inlägget dyker upp. Det sätter stämningen utan att be om att bli läst.

2. 2

   Rubriken kommer in

   En tydlig entré, ease out, på under en sekund.

3. 3

   Stödjande rader följer

   Etiketten och detaljerna kommer strax efter, i läsordning, med en mindre rörelse.

4. 4

   Allt hålls kvar

   Orden stannar och står stilla tillräckligt länge för att läsas. Bara bakgrunden fortsätter röra sig.

Återhållsamhet: använd mindre rörelse än du tror

Stillheten är det som gör att rörelse betyder något. Om allt rör sig sticker ingenting ut, och designen känns orolig. Välj en ledande rörelse per verk, håll avstånden korta och låt orden stå stilla när de har kommit fram. Återhållsamhet handlar också om människor: vissa tittare tycker att rörelse är obehaglig eller till och med illamående, så varje verk ska fungera med rörelsen avstängd. Reducerad rörelse förklarar hur du planerar för det.

Konsekvens: ett litet rörelsesystem

Varumärken håller färger och typsnitt konsekventa, och rörelse förtjänar samma omsorg. Skriv ner ett litet system och återanvänd det: tre varaktigheter, två eller tre easingkurvor och en husrörelse för bakgrunder. Det hindrar varje nytt verk från att uppfinna sin egen fart, och det gör din rörelse igenkännbar på det sätt som rörelse för stilla varumärken beskriver.

:root {
  --motion-quick: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-quick: 1ms;
    --motion-base: 1ms;
    --motion-slow: 1ms;
  }
}

Använd samma principer när du animerar en logotyp, ett inlägg eller en webbplats hero. Animerade logotyper och animerade inlägg visar dem i arbete.