Å lage CSS-Animasjoner og Føles Mer Naturlig

0
70

Det pleide å være at utformet for designere og programmerere kodet. Det var ingen crossover, og det er slik det var. Men med framveksten av CSS overganger og animasjoner, disse linjene viskes ut litt. Det er ikke lenger så enkelt som designer diktere design og koder transkribere—designere må nå vite noe om koding, og programmerere må vite noe om design for effektivt å kunne samarbeide.

Som et eksempel, la oss si en designer spør en utvikler til å lage en boks sprette. Det er det—ingen ekstra undervisning. Uten noen cross-kunnskap og et felles vokabular, begge sider er litt tapt i denne kommunikasjon: utvikleren ikke har nok informasjon til å realisere designer visjon, men designeren vet ikke hva alternativene er og hvordan de skal kommunisere med dem. Med en svært grunnleggende tolkning, kan du ende opp med noe som ser ut som dette:

Se Penn Hoppende Boks 1 av Brandon Gregory (@pulpexploder) på CodePen.

Ikke veldig spennende. Selv om, for å være rettferdig, er dette ikke oppfyller alle kriteriene som er gitt. Vi kan definitivt gjøre det bedre enn dette, skjønt.

Den første tingen å se på er timing funksjon. I eksempelet ovenfor, kan vi ved bruk av en lineær timing-funksjonen, noe som betyr at boksen er stadig beveger seg i samme hastighet. I noen tilfeller er dette ønskelig, men i den virkelige verden, bevegelse vanligvis ikke slik det virker.

En enkel løsning er å bare endre timingen funksjon å lette. Dette gjør begynnelsen og slutten av hver animasjon litt langsommere enn den midtre delen, som gir et mer naturlig utseende til noen animasjoner. Her er boksen med lettelser-funksjonen er slått på:

Se Penn Hoppende Eske 2 av Brandon Gregory (@pulpexploder) på CodePen.

Dette er en liten forbedring, men det er fortsatt mye arbeid som må gjøres. Boksen ser fortsatt mekanisk og stiv, med samme animasjon oppstår i samme tidsramme over og over. Legge til en liten forsinkelse mellom spretter legger til noen visuelle kontrasten som virker litt mer naturlig:

Se Penn Hoppende Boks 3 av Brandon Gregory (@pulpexploder) på CodePen.

Boksen nå ser ut som det er hopping snarere enn bare å flytte opp og ned. Det er litt vind-opp og kjøle ned mellom hopp som etterligner det av en levende skapning kan gjøre hvis de får den samme undervisningen. Selv om vi har ingen referanse for hva en hoppe boksen vil se ut, vi alle har en ganske god idé om hva en hoppe skapning ville se ut. Fordi vi vet hva som ville skje i naturen, ved å etterligne det, animasjon føles mer naturlig. Men vi kan gjøre mer for å sikre at vind-up, føler meg litt mer tungtveiende.

Hvis du ser på tegneserier, vil du legge merke til at naturlige bevegelser er ofte overdrevne, og skaper en karikatur av det virkelige liv. Når du er ferdig vel, dette kan føles like naturlig som noe i den virkelige verden, med den ekstra bonus for å tilføre litt sjarm og karakter inn i animasjonen.

På dette stadiet, samarbeid mellom designer og utvikler er viktig — men mange designere kan ikke engang være klar over at disse alternativene finnes. Det kan være opp til utbygger å kaste dette mulighet til designer.

Ved å legge til noen subtile forvrengning av omfanget av boksen, vi kan legge mye til animasjonen:

Se Penn Hoppende Boks 4 av Brandon Gregory (@pulpexploder) på CodePen.

Nå, i boksen har tegnet. Det føles levende. Det er mange ting å justere, men dette er allerede beveger seg mye lenger enn den opprinnelige undervisning — på en meget god måte!

Vi kommer til å gå et skritt videre, og legge til et lite oppsving mot slutten av hoppet:

Se Penn Hoppende Boks 5 av Brandon Gregory (@pulpexploder) på CodePen.

Den andre sprette gjør dette føle seg mer levende, men noe synes fortsatt av. Bounce ser stiv i forhold til resten av animasjonen. Vi må legge til en annen bit av forvrengning som vi gjorde for the wind-up:

Se Penn Hoppende Boks 6 av Brandon Gregory (@pulpexploder) på CodePen.

At små forvrengning på slutten gjør returen synes mye mer naturlig. Totalt sett en stor forbedring fra våre grunnleggende lineær sprette i det første eksempelet.

Det kan være akkurat det vi leter etter, men ytterligere tilpasninger til den pris bevegelse kan gjøres med en tilpasset kubikk Bézier-kurve:

Se Penn Hoppende Boks 7 av Brandon Gregory (@pulpexploder) på CodePen.

Uten både designer og utvikler klar over grunnleggende animasjon prinsipper og kontroll, dette nivå av tilpasning er umulig. Virkelig, denne artikkelen bare for riper overflaten på begge felt. Hvis du er en web designer eller en web-utvikler som jobber med designere, vil jeg sterkt oppfordre deg til å lese deg opp på begge.

For animasjon prinsipper, en Illusjon av Liv: Disney Animation av Ollie Johnston og Frank Thomas er en god primer på hvordan å gjøre det karikatur av det virkelige liv, virke levende og ekte. Med det felles språket på plass, kommunikasjon og samarbeid mellom designere og utviklere blir mye enklere.

For de tekniske kontroller og varianter av CSS animasjon, mulighetene er nesten uendelige. Forsinkelse og timing er enkle å justere. Som nevnt, hvis du ikke liker den ut-av-det-box lette timing funksjon, det er veldig mulig å lage dine egne ved hjelp av en kubikk-bezier – (). Du kan også justere nivået av forvrengning du ønsker å bringe animasjon nærmere eller lengre fra virkeligheten. Det viktigste er at både designer og utvikler tenker om disse variasjonene stedet for blindt å ta alt uten tilpasning. Delt kunnskap og samarbeid kan gjøre selv enkle animasjoner i bra.

Flere Ressurser

  • 12 grunnleggende prinsipper for animasjon – Wikipedia-post som beskriver begreper som er introdusert i Den Illusjon av Liv.
  • Guide til CSS-Animasjon: Prinsipper og Eksempler – Smashing Magazine artikkelen å gi en omfattende guide til CSS-animasjoner.
  • Animasjon Design-Systemer – 24 Måter artikkel av Sarah Drasner
  • Animasjon eiendom – CSS-Triks almanac oppføring dekker eiendommen og dens verdier
  • Overgangen eiendom – CSS-Triks almanac oppføring dekker eiendommen og dens verdier
  • CubicBezier.com – Ressurs for å opprette egendefinert animasjon kurver med et brukergrensesnitt.