Indhold
Animation på nettet er særligt nuanceret, da vi skal justere vores arbejde for at tage højde for båndbredde, kodekompatibilitet og produktdesign. I denne artikel forklarer jeg den anbefalede opsætning til en virkelig responsiv skalerbar animation. Jeg vil også dække forskellige måder at arbejde med animationen på for at opnå positive brugeroplevelser og paritet i vores verden med flere enheder.
Jeg vil dække et udvalg af vigtige brugssager: tilføje CSS-animation til SVG-sprites, beskæftige sig med enkeltstående grafik, der kræver kompleks bevægelse, skabe en lydhør oplevelse, der tilpasser sig visningen, og gøre animationer enklere til mobil.
Jeg kan varmt anbefale at bruge SVG (skalerbar vektorgrafik) til grafik med responsive animationer. Disse er opløsningsuafhængige, så du behøver ikke at indlæse yderligere HTTP-anmodninger eller falde ned med udskiftning af billedmedieforespørgsler.
Som et alternativ til img-attributten håndterer billedelementet billedudskiftning ganske pænt, men når det drejer sig om forskellige billeder i bevægelse, bliver det meget mere besværligt at holde animationen konsistent. SVG er langt bedre på denne måde: vi kan skrive kode en gang og fortsætte med at justere den visuelle kompleksitet af vores billede.
SVG giver også en navigerbar DOM, så det bliver enkelt at nå inde i en kompliceret grafik og animere elementer individuelt. Som navnet antyder, er SVG bygget i målestok. Det er utroligt simpelt og intuitivt at justere størrelsen på en SVG.
Selv med disse nøglefunktioner vil enheder og endda den måde, vi opfatter billeder på, ændre sig fra skærmstørrelse til skærmstørrelse. Bare rolig; Jeg har fået dig dækket! Lad os se på et par måder at arbejde med responsiv animation på.
SVG sprites og CSS animation
Denne første teknik fungerer særligt godt til responsiv, enkeltstående animation - for eksempel når man illustrerer tekst. Vi starter med en typisk lydhør sprite og tilpasser ikke kun billedets størrelse, men også grafikens kompleksitet. Dette giver meget mening, når du tænker på, hvad vi visuelt kan fortolke på en mindre skærm. For at grafikken i vores animation skal forblive tydelig, skal vi også overveje skærm fast ejendom.
Se illustrationen ovenfor. Til venstre kan du se, at vi har designet til desktop-, tablet- og mobilimplementeringer. Til højre har vi gjort to ting for at gøre os klar til eksport.
Den første er at fjerne gentagelse. Vi kan tydeligt se, at desktop- og tabletvisningerne er ens nok til, at vi enten kan ændre egenskaberne eller erstatte dem med CSS-medieforespørgsler. Et eksempel på en sådan ændring ville være at justere baggrunden, så den er grøn i stedet for blå. For bjergene er ændringen i design mellem forskellige enhedsstørrelser betydelig nok til, at vi bliver nødt til at anvende en klasse på elementet for at skjule eller afsløre det.
Den vigtigste del af denne teknik ligger i den måde, vi håndterer viewBox-attributten på. Du kan tænke på viewBox som et lille vindue, hvor vi ser SVG. SVG selv kan strække sig uden for viewBox-grænserne, men kun området inden for det vil være synligt. Resten beskæres.
For desktop- og tabletversionerne ønsker vi kun at den første flise skal vises, så oprindeligt indstiller vi viewBox inline i SVG til kun at dække den øverste del af sprite: viewBox = "0 0 490 474". Vi skifter derefter det synlige område med JavaScript til ’0 490 500 500’.
Kompleks bevægelse
Hver gang du har en enkeltstående grafik med mere kompleks bevægelse, foreslår jeg at skifte til GreenSock Animation Platform (GSAP) i stedet for at bruge CSS. Selvom der er masser af seje ting, som GSAP har at tilbyde, er de største fordele i dette tilfælde dobbelt.
Den første er stabilitet på tværs af browsere.
Takket være alle vores browsere og systemer betyder frontend-udvikling en stor testmatrix. Når vi inkluderer mobil, bliver det eksponentielt mere komplekst. Ældre Safari-browsere på ældre Apple-enheder kan have spotty support til flytning af SVG'er, og der er også mange gotchas på Android. GSAP tilbyder virkelig stabil bevægelse uden at ofre hastighed.
Den anden fordel er tidslinjen. Dette muliggør stabling af tweens og endda forskudte effekter med strømlinet og intuitiv kode. For resten af eksemplerne i denne artikel parrer jeg GSAP og SVG.
Lad os først slå fast, at animerende elementer med transformationer og opacitet er den mest performante tilgang. Det er lettere for browseren at optimere, fordi det reducerer genmaling, hvilket er det vigtigste at holde øje med for jank- og stutterfri animation.
Også, hvis vi bruger attributterne i SVG DOM, skaleres de sammen med hele SVG, fordi de ærer rummet i viewBox. Så hvis du skalerer en kompleks SVG ved hjælp af procent, flexbox eller andre teknikker, skaleres din animation også i overensstemmelse hermed. Dette betyder, at du ikke behøver at justere noget; du kan fokusere på at skrive din kode korrekt kun en gang. Og det er en ret stor velsignelse.
Lad os for eksempel overveje en virkelig kompliceret animation som den, der er vist på billedet ovenfor. Jeg designer normalt alle de elementer, jeg har brug for først, og afslører dem langsomt over tid. Dette giver mig mulighed for at planlægge tingene på forhånd, hvilket fører til renere, mere læselig kode.
Den færdige animation er fuldstændig skalerbar - du kan tilfældigt justere knappen, mens den kører, og få det hele justeret til en ny procentdel (se billedet nedenfor).
Responsiv UX
At designe en lydhør oplevelse, der tilpasser sig visningen, er afhængig af en vis planlægning i designfasen. Du kan tænke på det som små sammenkoblede Lego-blokke: Vi gennemgår design-, opbygnings- og udviklingsstadierne og scoping hvert enkelt område for sig selv, men hvad brugeren ender med er en komplet (men alligevel forskellig) visning på hver visningsport.
Vi tog denne tilgang til vores Huggy Laser Panda-animation. Se på det ved at besøge netm.ag/demo3-278. Vi designede dette omhyggeligt under hensyntagen til de enheder, der skulle skifte og stakke.
For at få stykkerne til at låse sammen på mobil justerer vi placeringen af det højre afsnit (skitseret i magenta for at gøre det tydeligt) og vender det, så det kan stables korrekt.
Vi sørger for, at hver del, der vises i de sektioner, der er angivet i boksen, eksporteres inden for individuelle SVG'er og navngives korrekt, inklusive mindre enheder eller grupper. Dette betyder, at vi i vores eksportindstillinger (jeg bruger Jake Archibalds SVGOMG) ikke fjerner unødvendige ID'er eller grupper.
Vi bruger derefter flere funktioner. Hver sektion afgrænses uafhængigt, og der er en gentagen funktion for alle de animationer, der løber.
funktion revolve () {var tl = ny TimelineMax (); tl.to (gear, 4, {transformOrigin: "50% 50%", rotation: 360, gentag: -1, lethed: Linear.easeNone}, "start"); ... return tl; }
Dette gør designet meget nemmere at bygge af og ræsonnere om. Vi kan endda pause hver animation i starten, så den kan udløses af en brugerklikhændelse. Nu er alt sammenfattet til det nødvendige afsnit, hele vejen fra design til færdigt produkt, det er let at vide, hvor man skal hen til justeringer.
Vi adskiller disse builds og har hvert Lego-lignende stykke justeret via procentdel, og det skaleres smukt. Alternativt ville flexbox fungere lige så godt, afhængigt af supportniveauet.
Mindre pizazz på mobil
Lad os indse det, mobilforbindelser (især i mindre udviklede lande) kan være ret langsomme. Uanset om du kun har et par vigtige animationsinteraktioner på dit websted eller en kæmpe WebGL-oplevelse, behøver nogle gange en animation, der ser smuk ud på skrivebordet, ikke ned til en mobiloplevelse.
I tilfælde af en stor lærredanimation eller endda en virkelig kompleks SVG-animation, der ikke er kritisk for brugeroplevelsen, er det bedste, du undertiden kan gøre, at tone det ned eller slukke for mindre enheder.
Active Theory's websted gør et smukt stykke arbejde med dette (se billedet nedenfor) ved at vise dig en fuld partikel lærred animation på skrivebordet, der erstattes med en simpel polygon baggrund på mobil. Interaktionerne på mobil er stadig meget on-point og overgår smukt ud over det, vi forventer på native.
Holdet viser stadig sin interaktionsdygtighed i den måde, du navigerer på siden, hvilket uden tvivl er mere imponerende på mobil end en animeret baggrund alligevel ville være. Designet sparer båndbredden til det, der tæller.
Konklusion
Uanset om du designer til lydhør fra start til slut eller blot slukker animationer på mobilen, er det vigtigt at have en konkret plan for, hvad dine seere oplever fra enhed til enhed. Dette gælder især i et landskab, hvor mobil er konge. Indhold, billedtype og brugerbåndbredde hjælper alle med at guide animationsvalg til responsivt design.
