Share
Vi har bygget komplette guider for å hjelpe deg med å lære CSS og animere css, enten du er bare i gang med det grunnleggende eller du vil utforske mer avanserte teknikker.
Bevegelse har blitt en veldig viktig del av webdesignfeltet de siste årene. Bevegelse og animasjon legger lag med dimensjon til et grensesnitt, hjelper brukeren, gir tilbakemelding, glede og engasjerende underveis.
I denne artikkelen vil jeg gjennomgå trinnene som er involvert i å lære animasjon på nettet, fra hva det handler om, men enkle overganger, mer komplekse animasjoner og nyttige ressurser. Det vil være noen praktiske, interaktive øvelser for å øke poengene hjemme. På slutten har du en solid ide om det nåværende webanimasjon landskapet og hvordan du kan få tak i det.
Vi ser på følgende:
Webdesigndisiplinen er stadig forandring, og et aspekt som har kommet fram de siste årene er evnen til å animere. Nettlesere har blitt bedre, prosessorer raskere, og håndholdte enheter har banet vei for "bevegelser"; swiping, klemme og tvinge berøring.
Motion tilbyr grensesnitt en rekke ting som forbedrer brukeropplevelsen, inkludert:
Motion forbedrer brukeropplevelsen og bringer livet til nettet. Med alt dette i bakhodet er det viktig at du som grensesnittdesigner tar hensyn til animasjon. La oss gå med det grunnleggende!
Eller hoppe rett inn med Craig Campbells praktiske animasjonskurs!
CSS-overganger er ofte en nettdesigners gateway i bevegelsens verden. De instruerer nettleseren til å ta en opprinnelig tilstand av et element, deretter en sluttstat, og overgang jevnt mellom de to. Syntaxen er relativt direkte, bestående av fire egenskaper og en kortfattet versjon:
Accentsconagua
Overgangen-egenskapOvergangen-varighetOvergangen-timing-funksjonOvergangen-forsinkelseLa oss starte med en knapp. I dette eksemplet har vi en knapp med noen basestiler for å få det til å se ut som om det er hevet fra siden litt. Som standard, hvis du svinger over det, endres farge. Så hvis du klikker på den, ser det ut til å bli presset ned. Vi har gjort dette ved hjelp av bakgrunn, de posisjon-top, og posisjons venstre egenskaper, men endringen i hvert tilfelle er øyeblikkelig:
La oss nå gjøre effekten mindre subtil, ved å legge til en overgang til .knapp element. Legge til, for eksempel, overgang: alle 1s; vil sørge for at alle Eiendomsendringer vil bli overført jevnt i løpet av 1 sekund.
Ukjent den første regelen i CSS-panelet, og du får se det få virkning:
Nå har du sett det arbeidet, prøv å uncommenting den andre regelen i stedet. I det andre eksempelet har vi oppført hver av de endrede egenskapene individuelt, slik at vi kan definere forskjellige overgangshastigheter for hver enkelt.
Til slutt, prøv å uncommenting det tredje eksempelet, hvor du vil se vi har lagt til timing funksjoner også. Disse påvirker overgangsgraden-vi snakker mer om dem snart.
Med CSS overganger under beltet ditt, er det på tide å ta ting opp i hakk. CSS keyframe animasjon gir langt mer kontroll, slik at du kan angi endringer langs en tidslinje. To trinn er nødvendige for keyframe-animasjon; definere keyframes selv, og tilordne animasjonen til ditt eget valg.
La oss si at vi starter med en ball.
Nå kan vi definere noen keyframes, setting a fra stat og a til stat. Her sier vi at det er venstre posisjonen vil begynne med 5%, animere til 85%, effektivt flytte ballen over skjermen.
@keyframes flytte fra left: 5%; til venstre: 85%;
Du kan se at vi har nestet den fra og til innenfor en @keyframes erklæring. Og vi har kalt vår animasjon bevege seg. Nå må vi tilordne denne animasjonen til vår ball, som vi liker slik:
.ball animasjon: 1s move;
Dette er implementert i sin enkleste, korteste form. Vi må definere hvor lenge vi vil at animasjonen skal vare, og hvilken animasjon vi søker. Nå når vi laster demoen, ser du animasjonen i kraft:
Merk: animasjonen sparker inn på siden last, så du må treffe reprise knappen i hjørnet av denne innebygde pennen for å se hva som skjer.
Går utover enkelt fra og til stadier, kan vi definere poeng langs tidslinjen ved hjelp av prosenter. Å bruke 0% og 100% ville gi oss nøyaktig det samme resultatet som før:
@keyframes flytte 0% left: 5%; 100% venstre: 85%;
La oss legge til et ekstra trinn i midten, og ta ballen tilbake til startposisjonen. Vi lager også animasjons-iterasjonstellingen uendelig, så det holder looping. Rediger verdiene i pennen under og se dem få virkning:
Det er mulig å legge til flere animasjoner til et enkelt element, endre animasjonsretningen, og for å endre timingen helt. Ta en titt på disse ressursene for å finne ut mer!
Bevegelse bringer statiske gjenstander til liv, og forskjellen autentisk bevegelse kan gjøre til dette er enormt. Bevegelse gir en objektmasse, plasserer den i verdensrommet, og realverden fysikk plutselig gjelder for det. Hvis et objekt beveger seg på en måte vi er kjent med, er vi langt mer sannsynlig å gjøre den helt viktige emosjonelle tilkoblingen. Det er forskjellen mellom en sirkel som beveger seg opp og ned, og en ball hopper:
Forskjellen mellom disse to er tydelig (selv om studiet er langt fra å være perfekt). Lære å gi animasjonens autentisitet er avgjørende.
"De fleste naturlige tiltak har en tendens til å følge en buet bane og animasjon bør følge dette prinsippet ved å følge implisitte" buer "for større realisme." - Tolv grunnleggende prinsipper for animasjon
Vi har dekket "lettelse" et par ganger allerede i denne artikkelen; Det er hastigheten der noe beveger seg, og kan uttrykkes som en kurve langs to akser. I CSS er det noen innebygde timingfunksjoner som du kan bruke med søkeordene sine (lineær, ease-in, ease-in-out etc.), men du kan beskrive disse timings mer presist med a cubic bezier funksjon, som ser slik ut:
.1, 0,25, .1,1Etter hvert som tiden beveger seg langs x-aksen, øker hastigheten på bevegelsen seg og bremser langs y-aksen. Dette eksempelet ovenfor er brukt på vår hoppende ball fra tidligere; du kan tenke deg at ballen beveger seg raskt oppover, og senker da den når sin topp. Ta en titt på denne kurven på cubic-bezier.com for å hjelpe deg med å visualisere det.
Kurven styres av de to håndtakene (som du vil bli kjent med hvis du noen gang har brukt pennverktøyet i Adobe Illustrator eller Sketch), og den kubiske bezier-funksjonen vi kan bruke i CSS, gjenspeiler disse håndtakene. Så, vår funksjon ser ut som:
kubikk-Bezier-(0,1, 0,25, .1,1)
Det er fire verdier, hver for seg (for argumentets skyld) fra 0 til 1 De representerer:
Å forstå hvordan mer behagelig funksjoner fungerer, vil dramatisk forbedre animasjonene dine, spesielt hvis du sikter på autentisk bevegelse.
Koding flotte CSS-animasjoner for hånd kan være tøff, men det finnes en rekke biblioteker som gjør det tungt å løfte for deg. Animate.css, av Dan Eden, er et stilark fylt med keyframe-baserte animasjoner, alle med egendefinerte klassenavn, klare til bruk.
SVG (Scalable Vector Graphics) har blitt nettdesignerens beste venn de siste årene, og gir oss skarp grafikk, lettere sider og animerbare elementer. Noen av det vi har diskutert, kan brukes direkte på SVG-elementer, men mange egenskaper oppfører seg annerledes.
Her er en inline SVG med en overgang påført sin farge på hover. Du ser imidlertid at vi bruker fylle eiendom, ikke den bakgrunnsfarge som vi ville forvente med et HTML-element:
SVG kan animeres med CSS mye som vi har diskutert i resten av denne artikkelen. Hvis du kan transformere eller oversette det med HTML, kan du gjøre det samme med SVG.
Men SVG kan også manipuleres gjennom SMIL (Synchronized Multimedia Integration Language) som lar deg bruke ting som
Dette er en sirkel, som inneholder en cx koordinere i dette tilfellet), fra en posisjon på 50px til 400px, varighet på 2 sekunder, og gjenta på ubestemt tid.
SMIL er et veldig kraftig sett med verktøy, begynner å lese opp nedenfor!
Elske ideen om å animere SVG, men ikke sikker hva å animere? Sjekk ut vektorillustrasjonstjenestene på Envato Studio og se hva som tilbys!
Tegn, Elementer og Objekter klar for Video AnimasjonMange front-end-utviklere første leketøy med JavaScript (eller jQuery) ved å legge til animasjon på nettsider. Hvor nettleserstøtte for CSS-alternativer er sketchy, er JS en god innsats.
jQuery's brukergrensesnittbibliotek leveres med en rekke utenlandske brukerhjelpere, inkludert effekt() metode, vist nedenfor (velg en effekt fra rullegardinmenyen og se på når den er brukt på innholdet:
Utover dette kan JavaScript (i høyre hender, ikke min) tilby seriøs animasjon, og siden Adobe Flash offisielt har gitt opp sin avgang, har noen briljante JavaScript-biblioteker kommet fram. GreenSocks animasjonsplattform (GSAP) er uten tvil den kraftigste utviklerne en hel rekke tidslinjer og tweenbaserte verktøy.
Ta en titt på vår nybegynners kurs og se hvordan du går med GSAP!
Borte er dagene med statiske designleveranser å være nok-bilder og flytdiagrammer kommuniserer ikke nok informasjon. I dag er klare kunder ønsker å se og føle hva du designer, oppleve bevegelsen, og derfor prototyper svarer på langt flere spørsmål.
"Hvis et bilde er verdt 1000 ord, er en prototype verdt 1000 møter." -saying på @ideo
- John Maeda (@johnmaeda) 5. oktober 2014
Prototyper kan være ganske rå, eller reflektere sluttproduktet ganske nøyaktig, men uansett hvor de faller på denne skalaen, skaper de behov for å være effektive. Når det gjelder bevegelse og animasjon, finnes det en rekke applikasjoner som hjelper deg med å formidle designene dine.
Adobe Animate er Flash for neste generasjon, og tilbyr avanserte animasjonsverktøy. Adobe After Effects er et videoproduktverktøy, men tilbyr også avansert tidslinjebasert bevegelse. Men så er det enklere programmer, for eksempel prinsipp for Mac, og til og med Keynote:
Keynote Motion Graphic Experiment, av Linda DongNår bevegelsesdesign er blitt en del av det du gjør, er det et viktig skritt å finne de beste verktøyene for å vise verden!
Og der har vi det! Denne veiledningen burde ha gitt deg en solid forståelse av web animasjon landskapet som det eksisterer i dag. Med alle disse læringsressursene under beltet ditt, vil du bli bevæpnet med et helt nytt sett med ferdigheter for å utforske verden av bevegelsesdesign.
Jeg håper du fant det nyttig. Vennligst del dine egne tips og ressurser i kommentarene nedenfor, eller på Envato-forumet.
