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 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?
- 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
Nei
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.
// Lesstransition: all @ffe-transition-duration @ffe-ease-in-out-back;
// CSS output
transition: all .2s cubic-bezier(.46, -0.265, .48, 1.38);