Animasjoner

Vi bruker animasjoner til å skape levende grensesnitt med personlighet, og for å redusere kognitiv belastning

Hvorfor animerer vi?

Funksjonelle animasjoner er nyttige virkemidler for å kommunisere respons fra interface. Subtile bevegelser kan være veldig hjelpsomme i å redusere kognitiv belastning ved å tydeliggjøre hvordan et interface oppfører seg og endrer seg ved interaksjon, og hvordan man som bruker må forholde seg til forskjellige elementer.

Dekorative animasjoner kan i tillegg bidra til å skape levende produkter og grensesnitt med personlighet, og på den måten underbygge merkevare, profil og visuell identitet.

Når bruker vi funksjonelle animasjoner?

  • Visuell feedback på interaksjoner
  • Kommunisere hvordan systemet responderer på brukerhandlinger
  • Indikere at elementer trenger oppmerksomhet
  • Visuelle hint om hvor og hvordan bruker må forholde seg til elementer

Hvordan designer vi funksjonelle animasjoner?

  • Fysiske lover - elementer oppfører seg som om de har masse
  • Naturlige bevegelser
  • Easing
  • Akselerasjon/deselerasjon

Easing

 

Lineær

 
  • Tyngdekraft
  • Bevegelse langs kurver fremfor linjer
  • Interaksjonselementer som utgangspunkt for bevegelser

Kurve

 

Linje

 
  • Timing
  • Raske bevegelser
  • Unngå venting på animasjoner

0.2s

 

1.0s

 
  • Ease-in-out-back
  • Overlappende kurve med negativ ease når elementer transformeres eller flyttes

ease-in-out-back

 

ease

 
  • Koreografi
  • Sekvensielle bevegelser når mange elementer skal animeres samtidig

Sekvens

  •  
  •  
  •  
  •  
  •  

Samtidig

  •  
  •  
  •  
  •  
  •  
  • Subtilt
  • Animasjoner som middel, ikke mål

Subtilt

  •  
  •  
  •  
  •  
  •  

Nja

  •  
  •  
  •  
  •  
  •  
  • Bevegelse i X- og Y-aksen - ikke Z (3D)

Ja

Nei

  • Unngå å flytte på elementer under transisjon

Ja

ExpandCollapse

Nei

ExpandCollapse

Felles variabler for utviklere av funksjonelle animasjoner

For å sikre konsistens bruker vi felles variabler for timing og lengde på transitions.

@ffe-transition-duration
Default lengde for transitions på mindre elementer
@ffe-ease-in-out-back
Default timing-funksjon for å transformere eller flytte mindre elementer (rotate, translate, etc)
@ffe-ease
Timing-funksjon for transitions som ikke involverer plassering eller endring av form (color, opacity, etc)

Variablene brukes i LESS-filer som erstatning for transition-duration og transition-timing-function.

// Less

transition: all @ffe-transition-duration @ffe-ease-in-out-back;

// CSS output

transition: all .2s cubic-bezier(.46, -0.265, .48, 1.38);

Eksempler på funksjonelle animasjoner

0.2s

1.0s

Ingen animasjon