Webanimasjon: hvor, hvorfor og hvorfor. Visuell tilbakemelding
Pas de Deux, Norman McLaren 1968
Animasjon er ikke kunsten å tegne i bevegelse, men kunsten å bevege seg i tegningen. – Norman McLaren
Alle vet hva animasjon er, men hva med hvordan man kombinerer det med web- og mobildesign? I dag bruker mange nettsteder animasjon på et eller annet nivå, men hovedsakelig av hensyn til vakkert bilde, ikke for å forbedre UX.
Akkurat som tradisjonell design, har animasjon et konsept, prinsipper og et ønske om å finne kreative løsninger som får animasjon til å fungere i din favør. Kom i gang med disse fire nyttige tipsene om hvordan du bruker animasjon for å forbedre nettstedet ditt.
Fokuser på bevegelse, ikke kode
Tenk på bevegelsen før du begynner å tenke på koden. Dette vil tillate deg å være mer oppmerksom på animasjonsprosessen. Selvfølgelig er det en sjanse for at ikke hele designet ditt kan kodes perfekt, men på denne måten vil du ha muligheten til å inngå kompromisser.
Tidlige skisser av Bugs Bunny av Chuck Jones viser å tenke på hvordan han kan gi ham form, vekt og bevegelse.
Å begynne å tenke på koden først vil undergrave personligheten til animasjonen ved å bekymre seg for de mulige begrensningene til kodingen.
Det er nesten som å planlegge en illustrasjon basert på fargeblyanten du har (og ikke har). Det er ikke riktig.
Dette dreper enhver grunn til å legge til animasjon til å begynne med. Prøv å fokusere mer på hvordan du vil at animasjonen skal se ut og bevege seg. Implementeringsdetaljer kommer senere.
Til syvende og sist vil koding bare bli et middel til et mål. Din design og psykologiske prosess vil gjøre animasjonen levende.
Fokuser på målet
Hvis animasjonen din ikke har en hensikt, er det verdt å vurdere om den i det hele tatt trenger en. For eksempel har animerte lasteindikatorer et mye dypere formål enn mange designere tror: som "alle gjør det" eller "det ser kult ut."
Lasteanimasjonen er laget for å gi brukerne en form for tilbakemelding (eller i henhold til i det minste, følelse av fremgang). Andre menyanimasjoner kan være nyttige for å vise brukeren hvor menyen er når den er lukket. Begge disse eksemplene er praktiske fordeler for brukeren.
På den annen side var navigasjonsavsløringen og lasting av logoer eksempler på animasjon som var mer dekorativ enn funksjonell. Husk at animasjonen din er laget for å hjelpe brukeren, ikke skaperen. Dette er ikke din pitch for Pixar.
La oss se på dekorativ, prangende animasjon og noe mer funksjonelt.
skriking
elegant
Som du kan se, kan du oppnå nesten det samme resultatet uten prangende, lys animasjon. Dette gir et rent utseende, og får ikke brukeren til å tenke "åh... hva skjedde?" Dessuten ser det ut til at travle animasjoner bremser jo mer du bruker dem.
Lær bevegelsen
Det er vanskelig å lage god animasjon uten å forstå bevegelse. Nøkkelen til god animasjon er å imitere ekte bevegelser i stedet for kunstneriske tolkninger av dem.
Youtube lar deg se videoer med forskjellige avspillingshastigheter ved hjelp av spillerinnstillingspanelet.
Hvis du ikke er sikker på bevegelsen, finn en video av dens virkelige ekvivalent på Internett og lær av den. Lav hastighet. Langsom avspillingshastighet avslører ofte viktige slag. Mange vet ikke at Youtube lar deg se videoer med forskjellige avspillingshastigheter ved å bruke spillerinnstillingspanelet.
Når folk tenker på bevegelse, tenker de vanligvis på å bevege seg opp, ned, til venstre og høyre, men selv om animasjonen din beveger seg på den måten, betyr det ikke at den vil se naturlig ut. Det er alltid verdt å ta hensyn til faktorer som materiale, hastighet, akselerasjon, hopp og refleksjon. Det er viktig å lage sømløs animasjon for å støtte illusjonen og fantasien. Med andre ord, prøv å gjøre animasjonen din nesten "usynlig".
Det er lettere å lage "usynlig animasjon" når du forstår hvordan folk ser bevegelse. Derfor er det en god idé å utforske verden rundt deg.
Studer videospillgrensesnitt - spesielt de fra de siste 3 årene - og vær oppmerksom på hvordan brukere navigerer gjennom dem. Hvis du ikke er i humør til å se spillet, så er det bare å se forskjellige tegneseriefilmer og -serier. Det viktigste er å lage ekte tester før du begynner å bruke animasjon til komplekse prosjekter.
Kilde: Martin Drapeau - Backbone Game Engine.
Prøv å avstå fra uregelmessige og blinkende bevegelser. La animasjonen være stabil. La brukeren nyte og forstå det de ser, spesielt hvis animasjonen formidler viktig informasjon. Bevegelsene av kurver på punkter er ideelle, det er også Glatt overgang gjennom skarpe svinger og svinger om nødvendig.
Fortell historien din harmonisk
Synkronisering - nøkkelord i animasjon. Selvfølgelig vil du gjøre ett element først, så et annet, og så videre, for å lage så mye animasjon som mulig. Men dette er ikke den beste veien å gå. Enhver animasjon du lager, uansett hvor stor eller liten, bør være én sammenhengende blokk.
Den beste måten å gjøre dette på er å lage noe nær en animatikk. Dette er animerte storyboards som består av tegninger eller skisser som er redigert eller arrangert slik at de ligner det endelige resultatet.
Tro meg, dette er veldig nyttig når du jobber med en nettside eller film. Bildet under er storyboardet jeg laget til musikkvideoen. Unødvendig å si at dette ikke var det endelige resultatet, men det hjalp meg ikke å bli forvirret.
Ved å skissere animasjonen din kan du se hvordan alt vil se ut til slutt, og lar deg oppdage ufullkommenheter tidlig. Lasteanimasjonen din er for eksempel en blanding av spinnende bevegelser og låste elementer til nettstedets navigasjon avslører seg selv ved hjelp av sirkler. Å se disse inkonsekvensene kan hjelpe deg med å gjøre de nødvendige endringene eller prøve noe helt annet.
Å gjøre små, men viktige håner og tester som disse først, vil hjelpe deg med å aktivere din generelle harmoniske bevegelse. Det er mange flotte nettsteder som har gjort dette utrolig. Pastor Danger og Every Last Drop brukte hele tiden animasjon for å fortelle historien sin.
Mens begge nettstedene animerer veldig forskjellig, ble hvert element på dem laget for ikke bare å fortelle en historie, men bokstavelig talt hjelpe den med å komme videre.
Bunnlinjen
Animasjon inkluderer stor mengde stiler og tilnærminger, men dette betyr ikke at det ikke finnes sentrale og grunnleggende begreper. Slik får du mest mulig ut av animasjonen din:
- Bli kvitt "kode først"-mentaliteten,
- Gjør animasjon praktisk og nyttig,
- Vent litt for å virkelig forstå hva bevegelsene sier.
Men viktigst av alt, ha det gøy med prosessen med å lage animasjonen din.
Send inn et søknadsskjema
Sett opp bruker-ID og passord
Internasjonale søkere kan få tilgang til kontoene sine etter at de har søkt om en bruker-ID og et passord ved å bruke lenken. Når du har sendt inn et skjema, vil en e-post bli sendt til adressen du oppga under registreringen med din bruker-ID og passord. Sørg for at du har oppgitt riktig e-postadresse. Søknaden om bruker-ID/passord vil bli vurdert innen 72 timer (inkludert helger og helligdager).
Fyll ut skjemaet
Søknadsevaluering
VIKTIG! Godkjenningsprosedyre er obligatorisk for alle utenlandske statsborgere som søker HMS og tilbys gratis. Hvis du har et russisk videregående/gradsbevis utstedt av en russisk akademisk institusjon, må du fortsatt sende inn en søknad om godkjenning av akademisk legitimasjon.
4. Søk om russisk visum
Hvis du har blitt tatt opp som statsfinansiert student (undervisningsfritak), vil visumreferansen din bli utstedt av Utdannings- og vitenskapsdepartementet i Den russiske føderasjonen (MES), når HMS-ansatte laster opp alle dokumenter som er oppført til MES informasjon System. Listen over visumreferansenumre vil bli publisert på din personlige konto i Visa-delen. Normalt bør visumreferanser være tilgjengelige i begynnelsen av august.
Hvis du har blitt tatt opp til HMS som avgiftsbetalende student, vennligst send inn en søknad om å få visuminvitasjon via din personlige konto (visumdelen). Flere detaljer er tilgjengelig på din personlige konto.
Vær oppmerksom på at innbyggere i følgende fylker TRENGER IKKE et studentvisum for å studere ved russiske utdanningsinstitusjoner: Aserbajdsjan, Abkhasia, Sør-Ossetia, Hviterussland, Kasakhstan, Kirgisistan, Moldova, Tadsjikistan, Ukraina, Armenia og Usbekistan.
Hvis du er statsborger i Hviterussland, Armenia, Kirgisistan eller Ukraina, kan du bruke ditt nasjonale (interne) pass når du krysser den russiske grensen. Hvis du er statsborger i et annet land, må du få et reisepass for å reise inn i Russland.
Russiske statsborgere som ankommer Russland må også vise ID (russisk reisepass for russiske statsborgere bosatt i utlandet). For å melde deg inn i HMS må du også ha ditt nasjonale (interne) pass lett tilgjengelig, selv om du er bosatt i utlandet. Sørg for å lage planene dine på forhånd, siden det kan ta opptil 2 måneder å utstede et nasjonalt pass i Russland (hvis du ikke har en permanent registrering og bare har et midlertidig).
5. Innmeldingsprosedyrer for utenlandske søkere
For offisielt å melde seg inn i HMS og sikre seg plass på et HMS-hjem, vennligst besøk oss på følgende adresse fra kl. 20. august 2019:
Rom 330, 3. etasje, Myasnitskaya Ulitsa 11.
Sørg for at du har følgende dokumenter med deg:
Ditt pass + kopien + notarisert oversettelse av passet ditt til russisk (hvis aktuelt);
Originalt videregående/gradsbevis/vitnemål + kopien + en attestert oversettelse av ditt videregående/gradsbevis/diplom til russisk (hvis aktuelt);
Migrasjonskort utstedt ved innreise til Russland (på flyplassen eller et annet grensekontrollpunkt) eller en kopi av ditt russiske visum;
VIKTIG! Sørg for å understreke i migrasjonskortet utdanning("studie") som formålet med besøket.
4 fotografier (på matt eller glanset papir), størrelse: 3×4 cm;
Original av legeerklæringen din (må være datert senest i mars 2019), og negative HIV-testresultater. Vær oppmerksom på at en legeerklæring er gyldig i 6 måneder, og en HIV-attest er gyldig i 3 måneder.
Din frivillige helseforsikring (hvis tilgjengelig). Du kan kjøpe en forsikring fra et hvilket som helst forsikringsselskap du ønsker eller få en på vårt kontor. For enkelhets skyld fra 20. august til 31. august vil representanter for 3 russiske forsikringsselskaper jobbe på 11 Myasnitskaya Ulitsa.
Påmeldingsprosedyren inkluderer følgende trinn
1. Innlevering av dokumenter for innmelding til HMS.
2. Utarbeide dokumenter for å få en migrasjonsregistrering.
Vær oppmerksom på at utenlandske studenter må registrere seg på deres faktiske bostedsadresse:
Dersom du bor på en HMS-hybel, vennligst kontakt hybelpersonalet for å bli registrert via et lokalt migrasjonskontor;
Hvis du bor i en leid leilighet, vennligst kontakt utleier/vertinne for å bli registrert via et lokalt migrasjonskontor.
Vennligst besøk vårt kontor for å få mer informasjon om registrering av studenter som bor i leide leiligheter.
VIKTIG! Statsborgere fra følgende land kan bli i den russiske føderasjonen uten registrering kun for en bestemt tidsperiode:
· borgere i Ukraina - 90 dager;
· borgere i Hviterussland, Kasakhstan og Armenia - 30 dager;
· innbyggere i Tadsjikistan - 15 dager.
3. Innsjekking på sovesal.
Hybelplasser vil bli tildelt via søkernes personlige kontoer. Du vil få tilgang til sovesalen på din personlige konto når du har fullført delene for registreringssamtykke og anerkjennelse av utenlandsk utdanning og (eller) kvalifikasjoner, men ikke tidligere enn 10. august. Derfor, innen du besøker oss for å sende inn din dokumenter starter fra 20. august, vil en plass på hybelen allerede være tildelt deg.
Høy kvalitet og passende animasjon av nettsider gleder øyet og hjelper i arbeidet. Dette er et av grunnlaget for moderne webdesign. Brukerinteraksjon med moderne nettsteder er sterkt avhengig av animasjon. Den er i stand til å rapportere visse tilstander på siden og rette oppmerksomheten. Animasjon hjelper brukeren med å se resultatene av handlingene deres og kan påvirke deres atferd.
Når kan animasjon forbedre brukeropplevelsen på sider? Hva må egentlig «revitaliseres» for å gjøre interaksjon med ressursen mer praktisk, forståelig og spennende?
Animasjon og sekvenser
Animasjon ved lasting av data
Å distrahere brukeren mens du laster innhold er en av de vanligste situasjonene for bruk av animasjon. Poenget er at animasjon i øyeblikk som disse påvirker måten folk oppfatter tid på. Det skaper følelsen av at handlingen utføres raskere enn den faktisk er.Hvis utførelsestiden for en handling ikke kan reduseres, bør du alltid tilstrebe at brukeren ikke går lei av å vente.
Hvordan enklere animasjon nedlastinger - så mye desto bedre. Du bør imidlertid være veldig forsiktig med eventuelle tilleggseffekter, for eksempel lyder. Vanligvis er de rett og slett ikke nødvendige. En god lasteanimasjon fanger den besøkendes oppmerksomhet. Dessuten, hvis brukeren liker det han ser, hvis han blir litt interessert når han ser på animasjonen, betaler han mindre oppmerksomhet til lastetiden.
Merk: det er animerte GIF-filer overalt, satt inn som lenker og uthevet.
Selv når lastetidene er korte, kan morsomme animasjoner legge til underholdning til ventetiden. (
Animasjon av prosesser og steg-for-steg operasjoner
Animasjon kan vise utførelsen av en viss lineær sekvens av handlinger som ikke er avhengig av brukeren. Den klassiske lastestangen er det vanligste eksemplet.
Lastestang for Aviasales. (
Animasjon kan også brukes til prosesser som krever at brukeren utfører trinnvise operasjoner.
En animasjon kan vise passasjen av en bestemt sekvens av handlinger trinn for trinn. (
Animasjon og wireframing av nettsider
Wireframe-alternativet for å vise nettsider sørger for plass som gradvis fylles med nedlastet informasjon. Den gradvise fyllingen av siden, ikke avbrutt av perioder med "tomhet", gir en følelse av fart i å fullføre handlinger. Denne teknikken kan brukes på nesten alle nettsteder, sammen med en subtil lasteanimasjon for å holde brukerens oppmerksomhet.
Wireframe-skjermer laster inn elementer brukergrensesnitt selv før sideinnholdet vises fullt ut. (
Visuell tilbakemelding
Animert reaksjon på brukerhandlinger
God brukeropplevelsesdesign gir tilbakemeldinger som kommuniserer resultatet av interaksjonen og gjør det synlig og forståelig. Hvis en besøkende på nettstedet ikke vet hvilke sideelementer som kan arbeides med og hva som kan forventes av dem, vil han føle seg forvirret. For å drepe slike forhold i begynnelsen, trenger du bare å utforme interaksjonsalternativer nøye, slik at de blir klare og forståelige.Animer kontroller for stasjonære og mobile nettsteder
Et av de vanligste eksemplene på visuell tilbakemelding er animasjon når du holder musepekeren over et interaktivt element.
Når brukeren er usikker på formålet med en kontroll, prøver de å holde musen over den. Å animere et element når du holder markøren over markøren vil intuitivt informere brukeren om at objektet kan interageres med. (Kilde: codepen)
Ovennevnte gjelder for nettsteder som vises på vanlige datamaskiner, men mobile enheter som ikke har musepekere på skjermene er en annen historie. Derfor, på mobilnettsteder, bør knapper og andre interaktive elementer være utstyrt med visuelle signaler. Verktøytips bør indikere, selv før brukeren berører elementet, at det kan samhandles med det. Og etter berøring, må du umiddelbart gi visuell tilbakemelding. Dette indikerer for brukeren at handlingen deres har fått systemet til å reagere, som knappen på bildet nedenfor som ser ut til å være trykket når den berøres.
Skyggelegging indikerer at elementet kan berøres for å utføre en handling. (
Tiltrekke seg oppmerksomhet med animasjon
Det er velkjent at øynene våre tiltrekkes av bevegelse. Dette kan brukes til å rette brukerens oppmerksomhet og forsterke handlingene han utfører.Her er det for eksempel å legge inn data i et skjema. Animasjon er perfekt for å gi denne prosessen nye kvaliteter. I figuren nedenfor "rister skjemaet negativt på hodet" som svar på et forsøk på å utføre en handling med tomme felt. Hvis alt er skrevet inn riktig, kan hun godt "nikke" godkjennende. Slik animasjon lar brukeren umiddelbart forstå resultatene av handlingen hans.
Formen rister negativt på hodet. (
Navigasjon
Overganger og statsforhold
I dag er trenden skjulte navigasjonsmenyer som dukker opp når du klikker på hamburgerknappen e. Ved hjelp av animasjon kan du sikre tilkobling av applikasjonstilstander og forhindre for raske, iøynefallende overganger mellom skjermer. Godt utformede overganger gir brukerne en klar forståelse av hva de skal fokusere på.
Animasjon kan brukes til å gjøre overganger mellom applikasjonsskjermer mer tydelige. Som et resultat vil brukeren vite nøyaktig hvor han var i begynnelsen av handlingen, og hvor han endte opp etter at den var fullført. (Kilde: codyhouse)
Her er et eksempel fra nettstedet til Brian Hoff Design. Når brukeren klikker på den runde pilknappen, vises en stor menyblokk på høyre side av skjermen. Takket være animasjon ser det ut til at menyen beveger seg ut av et område utenfor skjermen. Som et resultat er det ingen logiske brudd i interaksjonen med siden.
Animasjon hjelper til med å knytte to sidetilstander sammen
Glatt skifte av tilstander
Overgangsanimasjoner er uvurderlige for å indikere endringer i sidetilstander. I Smart Transitions in UX Design viste Adrian Zumbrunnen et godt eksempel på hvordan animasjon kan hjelpe en bruker med å holde seg klar over hvor de er når de klikker på en lenke som fører til en annen del av samme side.Bare sammenlign dette med en brå overgang, som føles som et unaturlig "hopp".
En plutselig endring i tilstanden ser unaturlig ut. Det er vanskelig for brukeren å oppfatte dette. (
Det er ikke noe spesielt triks for å lage storskala animasjon. Selv om nei, det er det: du må bruke mye tid på å optimalisere og teste det. Så, etter flere år med eksperimentering, og kontinuerlig presset mot ytelsesgrensene til nettlesere, har vi kommet opp med en rekke design- og kodingsprinsipper som vil tillate hvem som helst å dekorere prosjektet sitt med imponerende og produktiv animasjon. Ved å bruke dem kan du få jevn drift av sider i stasjonære og mobile nettlesere. Og viktigst av alt, alt dette gjøres og vedlikeholdes veldig enkelt.
Teknologien og implementeringen vil være litt forskjellig for hvert enkelt tilfelle, men vi er sikre på at vår generelle prinsipper vil vise seg nyttig i nesten enhver situasjon.
Hva er animasjon?
Animasjoner har eksistert siden før Internett. For å lage de beste, kan du bruke hele livet på å lære. Det er imidlertid også mønstre i denne saken. Vi vil diskutere noen vanlige og ikke så vanlige problemer som designere møter når de lager animasjoner for nettet.
For å oppnå jevn animasjon ved 60 fps, må hvert bilde behandles på mindre enn 16 ms! Dette er en kort periode, så det er nødvendig å finne svært effektive måter å gjengi hvert bilde for høy animasjonsytelse.
Det er mange måter å implementere nettanimasjon på. For eksempel eksisterte film før internett kom. Essensen er at håndtegnede rammer med minimale forskjeller ble vist flere ganger per sekund, og dermed skapte en illusjon av bevegelse for betrakteren.
Twitter brukte nylig denne enkle tilnærmingen for sin nye hjerteanimasjon, og rullet gjennom 26 bilder i en gitt sekvens.
Den resulterende animasjonen er for kompleks å implementere og faktisk ikke jevn nok.
I mange tilfeller er det mer fordelaktig å bruke CSS "transition"-egenskapen for å automatisk animere et element etter hvert som det endres. Denne teknikken er også kjent som "tweening" og innebærer å lage animasjon med automatisk konstruksjon av mellombilder. La oss si at vi har 2 bilder av samme objekt i forskjellige posisjoner. CSS-overgangseffekter vil hjelpe deg med å lage en animasjon av tilstandsendring. Bruken deres er fordelaktig ved at du kan tilbakestille eller reversere hele animasjonslogikken når som helst. Dette er den ideelle "sett det og glem det"-tilnærmingen. Fungerer utmerket, for eksempel med ulike introsekvenser eller enkle interaksjoner som aktivering av museover-animasjoner.
Dessuten kan animasjon bygget i CSS på keyframes tjene som en ideell bakgrunn for utvalgte områder av siden. For eksempel roterer ringene fra Gyroscope-logoen konstant. Denne tilnærmingen er god å bruke for å animere bevegelsen til ulike mekanismer.
Så la oss avslutte med introduksjonen og gå videre til hoveddelen av innlegget. Her er noen tips som vil hjelpe deg å forbedre produktiviteten og kvaliteten på animasjonen din betydelig. Vi håper de hjelper deg.
#1 Ikke endre andre egenskaper enn opasitet (opasitet) og transformasjoner (forvandle)
Selv om du tror det ville være bedre på denne måten, bør du fortsatt ikke gjøre det!
Etter dette grunnleggende prinsipp vil øke arbeidseffektiviteten med 80 %, selv i mobilsegmentet. Du har sikkert hørt om dette før. Ideen er ikke original, men den blir sjelden fulgt. Det er nettekvivalenten til «spis sunt og tren». Alle har hørt, de vet at dette er riktig, men få følger det.
Det er faktisk ganske enkelt å bli vant til å bruke dette prinsippet. Dette vil spesielt komme de som tidligere har gjort animasjoner med tradisjonelle CSS-egenskaper.
Hvis du for eksempel trenger å gjøre et objekt mindre, kan du bruke skaleringsegenskapen til transformasjonen i stedet for å endre bredden/høyden. Hvis du trenger å flytte et element, bør du ikke bry deg med å endre utfyllingsverdiene, fordi en slik animasjon vil kreve omorganisering av sideoppsettet hver ramme. Bedre bruk enkle egenskaper transformasjoner for dette: forvandle: translateX eller forvandle: oversettY.
Hvorfor fungerer dette?
For noen som endrer bredde, polstring og andre lignende parametere, virker det kanskje ikke som en god idé å bruke transformasjonsegenskaper. Visuelt er resultatet likt. Men fra synspunktet om kostnadene for datakraften til datamaskinen som vil beregne alt dette, ser bruk av transformasjon mange ganger bedre ut.
Nettleserutviklere har gjort mye arbeid for å optimalisere disse operasjonene. Transformasjoner er veldig effektive, de sparer grafikkortressurser ved å eliminere behovet for å gjengi elementet.
Du kan bli gal av å vente på at en side som denne skal lastes: alle hjørnene er avrundet, bilder brukes, skygger legges på alt, og dynamisk uskarphet av elementer legges til for fullstendig lykke. Hvis dette bare skjer én gang, vil noen ekstra millisekunder med venting ikke gjøre noen forskjell. Men når alt innholdet er gjengitt, vil du ikke lenger vente på at noen verdier skal beregnes på nytt for å endre siden.
#2 Skjul innhold i vanlig syn.
Bruk "pekerhendelser" i CSS: verdien "ingen" sammen med null opasitet for å skjule elementer
Denne metoden fungerer ikke bra i eldre nettlesere, men hvis du designer for webkit eller andre moderne nettlesermotorer, vil det gjøre livet ditt mye enklere.
På den tiden da animasjoner ble behandlet ved hjelp av jQuery animate(), var hovedutfordringen når man jobbet med fade-effekten behovet for å bytte visning: egenskap til ingen for å stoppe effekten i rett øyeblikk. For tidlig og animasjonen vil ikke fullføres, for sent og du ender opp med et usynlig element med null verdi opasitet, som dekker siden. En tilbakeringing var nødvendig for å tømme skjermen etter at animasjonen var fullført.
CSS-egenskapen "pointer-events" (som har eksistert lenge, men av en eller annen grunn ikke brukes så ofte) tjener til å gjøre ting ufølsomme for museklikk og andre interaksjoner. Det er som om de ikke er på siden i det hele tatt. Denne egenskapen kan enkelt aktiveres/deaktiveres via CSS. Når den kjøres, avbryter den ikke animasjonen og påvirker ikke gjengivelsen/synligheten til elementer.
Ved å kombinere denne tingen med en null opasitetsverdi får vi den samme effekten som "display: none" gir, men uten ytelsespåvirkningen når du starter nye animasjonsgjengivelsesløkker. Hvis jeg trenger å skjule et element, setter jeg vanligvis opasiteten til null og slår av pekerhendelser. Etter det kan jeg glemme det, vel vitende om at alt enkelt kan returneres og ingenting vil forstyrre ytelsen til siden.
Denne teknikken fungerer spesielt godt med elementer som har absolutt posisjonering, for da kan du være sikker på at de ikke har noen innvirkning på alle andre områder av layout og sideelementer.
Det gir deg også mye mer handlingsfrihet, siden tidspunktet for start/stopp av animasjonen i dette tilfellet kanskje ikke er veldig presis. Selv om du gjør en liten feil med timingen, vil ingenting dårlig skje. Brukeren vil rett og slett ikke kunne klikke på noe før animasjonen er fullført. Alt vil gå som du har planlagt.
#3 Du trenger ikke å animere alt på en gang.
Eller bruk koreografiprinsippet.
Én animasjon kan være jevn alene, men hvis flere effekter utføres samtidig, kan det ødelegge hele bildet og redusere produktiviteten. Det er veldig enkelt å lage en jevn demo, men det er mye vanskeligere å sikre et akseptabelt ytelsesnivå som en del av et helt nettsted. Derfor er det veldig viktig å planlegge utseendet til animasjonen riktig.
Du vil ordne tidspunktene slik at alle animasjoner starter til forskjellige tider. Vanligvis kan 2-3 animasjoner kjøres uten forsinkelse samtidig, spesielt hvis de starter med en liten spredning i tid. Mer enn 3 samtidige lanseringer (med øyet, men ikke i hovedsak - det bør være en minimumsspredning i tid) vil nesten helt sikkert forårsake forsinkelser på skjermen.
Hvis det er mer enn én animasjon på en side, er det viktig for deg å forstå konseptet med koreografi. Det ser ut til, hva har dansebegrepet med det å gjøre? Men å forstå dens essens i denne sammenhengen er veldig viktig for vellykket grensesnittanimasjon: ting må komme til skjermen fra riktig retning og i riktig øyeblikk. Selv om de alle fungerer hver for seg, skal de for seeren se ut som deler av en veldesignet mekanisme.
Googles Material Design har noe om dette problemet. Dette er selvfølgelig ikke den eneste riktige måten, men det gir mat til ettertanke og testing.
#4 En liten økning i overgangsforsinkelse gjør det enkelt å følge koreografiprinsippet
Animasjonskoreografi er veldig viktig, og kvalitetsproduksjonen vil kreve mye eksperimentering. Koden for å implementere ideen er imidlertid usannsynlig å være veldig kompleks.
Jeg erstatter vanligvis en klasse på et overordnet element (vanligvis kroppen) for å utløse en haug med overganger, hver med sin egen overgangsforsinkelsesparameter. Dette gjøres slik at hvert element vises på det tidspunktet jeg trenger. Fra et kodingsperspektiv bør du bare bekymre deg for verdien av én variabel i stedet for å opprettholde dusinvis av timings i JavaScript.
Ved å svinge en rekke elementer samtidig, kan du ganske enkelt arrangere koreografien deres. Dette er en kraftig tilnærming fordi det hele ser bra ut og kjører raskt samtidig, bare husk at du bare kan kjøre 2-3 animasjoner om gangen og alt blir bra. Du må distribuere dem på siden slik at hver enkelt behandles jevnt og i tide. Settet med animasjoner bør oppfattes av seeren som en kontinuerlig flyt, og ikke en kjede av forskjellige elementer. En flytende scene.
Eksempelkode
Det er flere enkle metoder som lar deg rocke elementene dine. De er veldig praktiske, spesielt hvis du bruker en lang kjede av animasjoner. Hvis kjeden inneholder mindre enn 10 elementer, spesifiserer jeg vanligvis forsinkelsesverdiene i CSS. Dette er den enkleste måten å implementere det på.
For lengre sekvenser eller svært dynamisk skiftende elementer, kan tidspunkter settes dynamisk for alle elementer ved å endre verdiene til variabler.
Vanligvis er det 2 variabler: din grunnforsinkelse og tidsforsinkelsen mellom hvert element. Denne balansen er ganske vanskelig å finne, men hvis du treffer riktig sett med tall, vil alt være bra.
#5 Bruk en felles multiplikator for å utvikle deg isakte film
Og få fart på det hele senere.
I animasjonsdesign er timing alt. 20 % av arbeidet ligger i å lage animasjonene selv, og de resterende 80 % er å finne riktige parametere og timing for å oppnå en tydelig synkronisert og jevn scene.
Dette gjelder spesielt når du jobber med koreografien av en lang rekke elementer og prøver å presse ut maksimal ytelse. Etter å ha bremset ned animasjonene, vil slike scener bli mye lettere å jobbe med.
Hvis du bruker Javascript eller en CSS-forprosessor som SASS, bør koden være enkel nok til å bygge den riktige variabelstrukturen.
Du bør sørge for at kodedesignet er brukervennlig slik at du enkelt kan teste ulike hastigheter og tidspunkter. For eksempel, hvis animasjonen hakker selv ved 1/10 hastighet, gjør du mest sannsynlig noe fundamentalt galt. Hvis den går jevnt når den strekkes 50 ganger, handler spørsmålet om å finne den maksimale hastigheten som den kan kjøre jevnt med. Det er ganske vanskelig å legge merke til problemer i full fart, men hvis du bremser farten blir de alle ganske tydelige.
For å sette opp svært komplekse animasjoner eller når du søker flaskehalser Når det gjelder produktivitet, vil sporing av prosessen i sakte film være svært nyttig.
Tanken er å pakke mange vakre detaljer inn i en scene i sakte film, og deretter øke hastigheten slik at animasjonene ser perfekte ut. Dette er veldig fint arbeid, men brukere vil sette pris på detaljene og jevnheten til det som skjer på skjermen.
Denne funksjonen er en aktiv del av OS X: når du minimerer programvinduet, ser du en animasjon i sakte film.
#6 Ta et videoopptak av grensesnittet ditt og bla, du kan se mer fra en tredjepersons perspektiv
Noen ganger hjelper et perspektiv utenfor deg å se ting klarere, og video er en fin måte å oppnå dette på.
Noen lager videoer i Etter effekter, hvoretter de prøver å implementere det de mottok på siden. Jeg gjør ofte akkurat det motsatte, prøver å gjøre bra video basert på nettstedets brukergrensesnitt.
I sanntid er det ganske lett å gå glipp av noen øyeblikk. Men å se på animasjonen tatt opp i lav hastighet om og om igjen, vil bidra til å identifisere selv de minste problemene. Med denne tilnærmingen blir alt åpenbart.
Å se time-lapse-videoer fra sidene mine og korrigere problemområder har blitt en viktig del av arbeidet mitt. Du kan selvfølgelig skylde alt på trege nettlesere, men ofte, etter testing og optimalisering, begynner animasjoner å fungere som smurt. Det vil si at alt kan løses med riktig tilnærming.
#7 Nettverksaktivitet kan føre til etterslep.
Du må forhåndslaste eller blokkere stortHTTP-forespørsler
Bilder er en avgjørende faktor i denne forbindelse, spesielt hvis de er store i vekt (for eksempel en tung bakgrunn), eller massevis av små (laster for eksempel 50-100 avatarer), eller ganske enkelt et stort nummer av innhold (en lang side med en haug med bilder).
Under den første sideinnlastingen blir tonnevis av ting initialisert og lastet. Annonser, moduler og andre scenarier i nedlastingskø 3 gjør situasjonen enda verre. Noen ganger kan det gjøre underverker å utsette animasjoner for å spille bare noen få hundre millisekunder etter at resten av siden er lastet. Du vil få et betydelig ytelsesløft.
Megaoptimalisering bør ikke brukes med mindre det er helt nødvendig, selv om en tung side kan kreve svært presise forsinkelser og animasjonstider for å fungere jevnt. Generelt sett må du starte med å laste så lite data som mulig, deretter inkludere animasjon, og deretter fortsette å laste inn resten av det tunge innholdet på siden.
På sider med mye data kan optimaliseringsarbeid ta mye tid. Animasjon som fungerer godt med statisk innhold, kan begynne å bremse mye og falle fra hverandre når den lastes inn samtidig med ekte data. Hvis noe ser ut til å fungere ganske greit, men på noen punkter begynner å forsinke av en eller annen ukjent grunn, bør du sjekke nettverksaktiviteten din. Kanalen din kan være opptatt med andre nedlastinger i disse øyeblikkene. Sørg for at nettverket ditt ikke håndterer flere samtidige store nedlastinger.
#8 Du trenger ikke å endre standard rulling.
Ideen om å erstatte rullefeltet kan virke kult, men det er det egentlig ikke.
Animasjonsbasert rulling har vært populært i flere år, spesielt hvis det er laget med parallakse og andre spesialeffekter. Man kan krangle om nytten i lang tid, men her er måtene teknisk implementering Det er noen vellykkede og ikke så vellykkede ideer som dette.
Middels effektiv måteå lage ting fra denne kategorien er å bestemme det optimale rulletrinnet og markere det som en egen hendelse. Hvis du ikke vet hva du gjør, er det bedre å ikke bruke slik rulling i det hele tatt. Det er lett å gjøre feil her, og å opprettholde et normalt ytelsesnivå på sider med kompleks rulling er en ganske plagsom oppgave.
En enda verre ide er å erstatte standard scroll med såkalt scrolljacking (innholdet endres synkronisert med rullen, for eksempel Apple-nettstedet). Ikke gjør det. Det er vanskelig å implementere en slik effekt vellykket, og ikke alle brukere vil like det.
Hvis du har litt erfaring og et ønske om å lage din egen rullefelt, lag en lett prototype av den og test den for funksjonalitet før du bruker tid på full utvikling.
#9 Test prosjektene dine på mobile enheter oftere.
De fleste nettsider er laget på en PC. Oftest testes de på samme maskin som de ble utviklet på. Dermed forsvinner mobilversjonen av nettstedet og ytelsen til animasjoner i bakgrunnen. Noen animasjonsteknologier (for eksempel canvas) vil ikke fungere ordentlig på mobile plattformer.
Men hvis animasjonen er laget og optimalisert riktig, blir resultatet mobil opplevelse bruk kan være overlegen i kvalitet til skrivebordet. Mobiloptimalisering pleide å være et veldig komplekst tema, men nye iPhones fungerer raskere enn de fleste bærbare datamaskiner. Hvis du følger tipsene ovenfor, kan du oppnå imponerende ytelse for animasjonene dine også på mobile enheter.
Mobilversjonen av siden er en stor og svært viktig del av den. Dette kan virke rart, men jeg anbefaler å surfe på nettstedet ditt utelukkende på telefonen eller nettbrettet i en uke. Ideelt sett bør du ikke føle at du blir straffet ved ikke å kunne komme til skrivebordet ditt. Hvis alt fungerer raskt, jevnt og uten å bryte den tiltenkte strukturen, har du oppnådd målet ditt. Hvis noe går galt, må du fortsette å jobbe.
Fortsett å gjøre designforbedringer og forbedre ytelsen til forskjellen i brukeropplevelse mellom mobil- og desktopversjonen av nettstedet forsvinner helt.
Hvis du tvinger deg selv til å bruke en mobilside i en uke, vil du sannsynligvis ende opp med å optimalisere den enda bedre enn den større versjonen. Ved å bekjempe irritasjon ved å bruke det regelmessig, vil du fullt ut forstå problemene dine brukere vil møte og kan eliminere dem før prosjektet går live. Dette vil spare deg for mange problemer i fremtiden.
#10 Test prosjekter på en rekke enheter
Det er mange faktorer som radikalt kan påvirke ytelsen til et nettsted på PCer og mobile enheter: skjermoppløsning, antall piksler i vinduet, gammel maskinvare, etc.
Selv om Chrome og Safari er bygget på Webkit og har nesten samme syntaks, har de hver sine særheter. Enhver Chrome-oppdatering fikser gamle feil og introduserer nye, så du må hele tiden holde fingeren på pulsen, som de sier.
Det er tydelig at ikke alle ønsker å følge minst motstands vei, og lage nettsteder i henhold til den laveste fellesnevneren av summen av feil, for ikke å havne i enda et rot etter de siste oppdateringene. populære nettlesere. Det kan være svært givende å finne smarte måter å legge til forbedringer og fjerne noen for å holde nettstedet ditt i orden.
Jeg bytter regelmessig mellom min lille MacBook Air og min større iMac på jobb. Hver slik syklus avslører små problemer og indikerer nødvendige forbedringer. Dette gjelder ikke bare ytelsen til animasjonen, men også utformingen av nettstedet som helhet, informasjonstetthet, lesbarhet, struktur osv.
Modeller av den mobile og vanlige versjonen av nettstedet er oftest forskjellige i strukturdesign når det gjelder bredde, høyde, pikseltetthet og andre egenskaper. Kjennskap til funksjoner operativsystemer og maskinvareegenskaper til mobile enheter kan hjelpe med optimalisering, siden de er veldig forskjellige fra de på en PC.
Jeg håper du fant teknikkene ovenfor nyttige og bruker dem i ditt neste prosjekt. Lykke til!
Oversettelse av artikkelen https://blog.gyrosco.pe/smooth-css-animations-7d8ffc2c1d29
Motion design (eller animasjonsdesign) er bevegelsesgrafikk, videovisuelt design, et utrolig stort kunstnerisk medium som dekker mange disipliner som fotografi, illustrasjon, grafikk, 3D-modellering, animasjon og mange andre.
Bruk av bevegelsesgrafikk og tredimensjonal (3D) animasjon
I mange år har animasjons- og filmindustrien fengslet folks øyne og folk strømmet, som møll, til gløden fra en filmprojektor. Det var filmindustrien og merkevareteknologier som ble stedet der dataanimasjon og bevegelsesgrafikk fant sin utvikling. Grensene mellom animasjon og bevegelsesdesign er relativt uklare. Animasjon i sin rene form fantes og var ekstremt etterspurt ved begynnelsen av filmindustrien frem til utviklingen moderne utseende TV-, forretnings- og 3D-teknologier. I dag er det praktisk talt ingen moderne kino eller type TV-innhold som ikke bruker bevegelsesdesign og tredimensjonale teknologier.
Bevegelsesdesign brukes også aktivt i den mest relevante retningen av eventbransjen i dag - (3D-videokartlegging) eller, på vanlig språk - . I et kartshow blir innhold produsert av bevegelsesdesignere projisert på forskjellige overflater eller til og med i luften ved hjelp av forskjellige videoprojektorer.
Bevegelsesdesign er også mye anvendelig innen interiørkartlegging, dvs. når interiør dekoreres ved hjelp av videoprojektorer. Dette lar deg skape helt nye rom, teksturer og dekorative gjenstander, fordi projektorer kan lyse opp overflaten av enhver form, og dermed endre den til det ugjenkjennelige, og til og med skape den absolutte illusjonen av en fysisk endring i rommet.
BTL-markedsføring, merkevarebygging av rom og lokaler og bevegelsesteknologier er nå nesten uatskillelige. Reklame, presentasjoner, videoinfografikk, layouter, logoer, merkevarebygging - i alle disse forretningsområdene brukes motion design aktivt og er en trend. Moderne episoder av slike filmserier som James Bond og Harry Potter, superpopulære TV-serier som Game of Thrones - deres plasseringer, spesialeffekter, design - alt dette er "tegnet" av grafikk og animatører på datamaskinen.
Motion design som en form for samtidskunst
Takket være den aktive utviklingen av programvare og maskinvare for 3D-grafikk, utvikler bevegelsesdesign seg aktivt på kino, og er også en av de mest sofistikerte formene for moderne kunst. I 1960 var John Whitney en av de første som anerkjente bevegelsesgrafikk som en kunst og introduserte begrepet i en profesjonell sjanger. Hans selskap Motion Graphics Inc. fikk et selvforklarende navn og ble en pioner innen bevegelsesgrafikk og design i filmindustrien. I flere år har John Whitneys selskap jobbet aktivt med filmer som Psycho, Advise & Consent, Man With The Golden Arm, Vertigo. Selskapets mål var å lage relativt enkel, men atmosfærisk bevegelsesgrafikk for å forbedre stemningen i filmen.
I fremtiden utvikler bevegelsesgrafikk seg aktivt; visuelt attraktive grafiske komposisjoner i bevegelse, som også låner elementer fra fotografi, video og illustrasjon. Takket være dette endres, beveger, samhandler og transformerer objekter, karakterer og bakgrunner.
Denne typen bevegelseskunst, i synergi med forretningsoppgaver, har blitt aktivt brukt til presentasjoner av visse store globale merkevarer. Åpenbar fordel Bevegelsesgrafikk som en kunst sammenlignet med andre visuelle midler for kunstnerens selvuttrykk er det absolutte fraværet av noen grenser for implementeringen av kunstnerens ideer. Ved hjelp av en datamaskin og moderne programvare og tilbehør kan du bringe enhver fantasi eller idé til live.
Bevegelsesdesign i næringslivet
På Facebook blir 85 % av videoinnholdet sett uten lyd, og likevel, takket være grafisk teknologi, klarer bedrifter å formidle det nødvendige budskapet til målgruppen selv uten lyd. Bevegelsesgrafikk brukes til å lage mest mulig beste presentasjoner. Informasjonsbevegelsesdesign er den beste måten å demonstrere prosesser, algoritmer i grafisk form, avsløre essensen av dokumenter, tekniske parametere for enheter, fakta og tall.
I dag følger motion design deg overalt: på telefon, reklame, kino, forestillinger og showproduksjoner, utstillinger, presentasjoner og selvfølgelig på TV.
Bevegelsesdesign er en ekstremt lovende form for å lage visuelt attraktivt innhold for reklame- eller bildeformål. Hvis du tenker på å lage bevegelsesgrafiske presentasjoner, reklamevideoer for å markedsføre virksomheten din, kontakt oss, teamet vårt er alltid glade for å utvikle noe unikt, finne en løsning spesielt for din virksomhet og lage utrolig og fantastisk innhold.
Hvordan bli en bevegelsesgrafikkdesigner
Yrket til en bevegelsesdesigner er en ganske ung retning innen design, som oppsto som et resultat av utviklingen av moderne teknologier og programvare. Grafiske designere, webdesignere, grensesnittdesignere, illustratører, 3D-spesialister og designere - de kan alle være bevegelsesdesignere til en viss grad.
Mest viktig skritt for alle som planlegger å satse på en karriere i denne retningen er å bli kjent med det grunnleggende om 3D-modellering, animasjon og grafisk design. Noen av de mest populære dataprogrammene for å lage bevegelsesinnhold er Adobe Premiere Pro, Cinema 4D, Adobe Photoshop, Adobe After Effects og Final Cut Pro. I dag, hvis ønskelig, kan nesten enhver talentfull artist lære å lage bevegelsesinnhold av høy kvalitet selv uten spesialisert teknisk utdanning. På Internett kan du finne et stort antall treningsvideoer og annet materiale om å lage bevegelsesgrafikk.
Det er viktig å hele tiden overvåke trender, analysere kollegenes arbeid for alltid å forstå trendene og utsiktene til bransjen. Motion designer er et yrke etterspurt over hele verden. Gjennomsnittslønnen til en bevegelsesdesigner i USA er omtrent $99 000 per år. Fagfolk og ledere på toppnivå har enda større inntekt.
Som en oppsummering kan vi slå fast at yrket som bevegelsesdesigner er lovende for kreative mennesker, uavhengig av om de har spesialisert utdanning eller ikke. Det viktigste er lyst og utholdenhet.
Takk skal du ha! Du har meldt deg på vårt nyhetsbrev.