Hvorfor animerer vi?

Funksjonelle animasjoner er nyttige virkemidler for å kommunisere respons fra brukergrensesnitt. Subtile bevegelser kan være veldig hjelpsomme i å redusere kognitiv belastning ved å tydeliggjøre hvordan et grensesnitt 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?

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.

Eksempler på funksjonelle animasjoner