Innehåll
Animering på webben är särskilt nyanserad, eftersom vi måste justera vårt arbete för att ta hänsyn till bandbredd, kodkompatibilitet och produktdesign. I den här artikeln kommer jag att förklara den rekommenderade inställningen för en riktigt lyhörd skalbar animering. Jag kommer också att beskriva olika sätt att arbeta med animeringen för att uppnå positiva användarupplevelser och paritet i vår värld med flera enheter.
Jag kommer att täcka ett urval av viktiga användningsfall: lägga till CSS-animering i SVG-sprites, hantera fristående grafik som kräver komplex rörelse, skapa en responsiv upplevelse som anpassar sig till visningsområdet och göra animationer enklare för mobilen.
Jag rekommenderar starkt att du använder SVG (Scalable Vector Graphics) för grafik med responsiva animationer. Dessa är upplösningsoberoende, så du behöver inte ladda upp ytterligare HTTP-förfrågningar eller fördjupa dig med ersättningsfrågor för bildmedier.
Som ett alternativ till img-attributet hanterar bildelementet bildutbytet ganska snyggt, men när det gäller rörliga bilder av olika storlek blir det mycket mer besvärligt att hålla animationen konsekvent. SVG är mycket överlägset på detta sätt: vi kan skriva kod en gång och fortsätta att justera den visuella komplexiteten i vår bild.
SVG tillhandahåller också en navigerbar DOM, så det blir enkelt att nå in i en komplicerad grafik och animera element individuellt. Som namnet antyder är SVG byggt i skala. Det är otroligt enkelt och intuitivt att justera storleken på en SVG.
Även med dessa nyckelfunktioner ändras dock enheter och till och med hur vi uppfattar bilder från skärmstorlek till skärmstorlek. Oroa dig inte; Jag har täckt dig! Låt oss titta på några sätt att arbeta med responsiv animation.
SVG-sprites och CSS-animering
Denna första teknik fungerar särskilt bra för responsiv, fristående animering - till exempel när du illustrerar text. Vi börjar med en typisk responsiv sprite och anpassar inte bara bildens storlek utan också grafikens komplexitet. Det här är mycket meningsfullt när du tänker på vad vi visuellt kan tolka på en mindre skärm. För att grafiken i vår animation ska förbli tydlig måste vi också överväga skärmfastigheter.
Ta en titt på bilden ovan. Till vänster kan du se att vi har utformat för stationära, surfplattor och mobila implementeringar. Till höger har vi gjort två saker för att göra oss redo för export.
Den första är att ta bort repetition. Vi ser tydligt att skrivbords- och surfplattans vyer är tillräckligt lika för att vi antingen kan ändra egenskaperna eller ersätta dem med CSS-mediefrågor. Ett exempel på en sådan förändring kan vara att justera bakgrunden så att den blir grön istället för blå. För bergen är designförändringen mellan olika enhetsstorlekar tillräckligt stor för att vi kommer att behöva använda en klass på elementet för att dölja eller avslöja det.
Den viktigaste delen av denna teknik ligger i hur vi hanterar viewBox-attributet. Du kan tänka på viewBox som ett litet fönster där vi visar SVG. SVG själv kan sträcka sig utanför gränserna för viewBox, men endast området inom det kommer att vara synligt. Resten kommer att beskäras.
För skrivbords- och surfplattversionerna vill vi att endast den första brickan ska visas, så initialt ställer vi in viewBox inline i SVG för att täcka bara den övre delen av spriten: viewBox = "0 0 490 474". Vi flyttar sedan det synliga området med JavaScript till ’0 490 500 500’.
Komplex rörelse
Varje gång du har en fristående grafik med mer komplex rörelse föreslår jag att du byter till GreenSock Animation Platform (GSAP), snarare än att använda CSS. Även om det finns massor av häftiga saker som GSAP har att erbjuda, är de största fördelarna i detta fall dubbla.
Den första är webbläsarstabilitet.
Tack vare alla våra webbläsare och system innebär frontend-utveckling en stor testmatris. När vi inkluderar mobil blir det exponentiellt mer komplicerat. Äldre Safari-webbläsare på äldre Apple-enheter kan ha fläckigt stöd för att flytta SVG-filer, och det finns också många gotchas på Android. GSAP erbjuder riktigt stabil rörelse utan att offra hastigheten.
Den andra fördelen är tidslinjen. Detta möjliggör stapling av tweens och till och med förskjutna effekter, med strömlinjeformad och intuitiv kod. För resten av exemplen i den här artikeln kopplar jag ihop GSAP och SVG.
Låt oss först konstatera att animeringselement med transformationer och opacitet är det mest framträdande tillvägagångssättet. Det är lättare för webbläsaren att optimera eftersom det minskar ommålningar, vilket är det viktigaste att hålla koll på för jank- och stammfri animering.
Om vi använder attributen inom SVG DOM kommer de också att skala ihop med hela SVG, eftersom de hedrar utrymmet i viewBox. Så om du skalar en komplex SVG med procent, flexbox eller andra tekniker, kommer din animering också att skala därefter. Det betyder att du inte behöver justera någonting; du kan fokusera på att skriva din kod korrekt bara en gång. Och det är en ganska stor välsignelse.
Låt oss till exempel överväga en riktigt komplicerad animering som den som visas i bilden ovan. Jag kommer vanligtvis att designa alla element jag behöver först och avslöja dem långsamt över tiden. Detta gör att jag kan planera saker i förväg, vilket leder till renare, mer läsbar kod.
Den färdiga animationen är helt skalbar - du kan slumpmässigt justera knappen medan den är igång och få hela saken justerad till en ny procentsats (se bilden nedan).
Responsiv UX
Att utforma en lyhörd upplevelse som anpassar sig till visningsområdet bygger på viss planering i designfasen. Du kan tänka på det som små sammankopplade Lego-block: vi går igenom design-, bygg- och utvecklingsstadierna och scoping varje område för sig själv, men vad användaren slutar med är en fullständig (men ändå helt annan) vy på varje visningsområde.
Vi tog detta tillvägagångssätt för vår Huggy Laser Panda-animation. Ta en titt på den genom att besöka netm.ag/demo3-278. Vi utformade detta noggrant med tanke på de enheter som måste byta och stapla.
På mobilen justerar vi placeringen av den högra sektionen (skisserad i magenta för tydlighetens skull) för att få bitarna att låsa sig korrekt och vänder den så att den kan staplas på rätt sätt.
Vi ser till att varje del som visas i rutorna exporteras till enskilda SVG: er och är korrekt namngiven, inklusive mindre enheter eller grupper. Det betyder att i våra exportinställningar (jag använder Jake Archibalds SVGOMG) tar vi inte bort onödiga ID eller grupper.
Vi använder sedan flera funktioner. Varje sektion är oberoende och det finns en upprepad funktion för alla animationer som slingrar.
function revolve () {var tl = new TimelineMax (); tl.to (växel, 4, {transformOrigin: "50% 50%", rotation: 360, upprepa: -1, lätthet: Linear.easeNone}, "börja"); ... return tl; }
Detta gör designen mycket lättare att bygga av och resonera om. Vi kan till och med pausa varje animering från början så att den kan utlösas av en användarklickhändelse. Nu räcker allt till dess erforderliga avsnitt, hela vägen från design till färdig produkt, det är lätt att veta vart man ska gå för justeringar.
Vi skiljer ut dessa byggnader och har varje Lego-liknande del justeras via procent, och det skalas vackert. Alternativt skulle flexbox fungera lika bra, beroende på supportnivå.
Mindre pizazz på mobilen
Låt oss inse det, mobilanslutningar (särskilt i mindre utvecklade länder) kan vara ganska långsamma. Oavsett om du bara har några viktiga animationsinteraktioner på din webbplats eller en enorm WebGL-upplevelse, ibland behöver en animering som ser vacker ut på skrivbordet inte minska till en mobilupplevelse.
När det gäller en stor dukanimering, eller till och med en riktigt komplex SVG-animation som inte är kritisk för användarupplevelsen, är det bästa du ibland kan göra att tona ner den eller stänga av den för mindre enheter.
Active Theorys webbplats gör ett vackert jobb med detta (se bilden nedan) genom att visa dig en fullständig partikeldukanimering på skrivbordet, som ersätts med en enkel polygonbakgrund på mobilen. Interaktionerna på mobil är fortfarande mycket på plats och övergår vackert utöver vad vi förväntar oss av infödda.
Teamet visar fortfarande sin interaktionsförmåga i hur du navigerar på webbplatsen, vilket förmodligen är mer imponerande på mobilen än en animerad bakgrund skulle vara i alla fall. Designen sparar bandbredden för vad som räknas.
Slutsats
Oavsett om du designar för lyhörd från början till slut eller helt enkelt stänger av animationer på mobilen är det viktigt att ha en konkret plan för vad dina tittare upplever från enhet till enhet. Detta gäller särskilt i ett landskap där mobil är kung. Innehåll, bildtyp och användarbandbredd hjälper till att styra animeringsval för responsiv design.
