Share
Fullständig tidslinjekontroll, import och export JSON, inspektera animeringar, intuitivt gränssnitt, levande redigering, enkelt att förstå API, riktade till snabbhet och realtids återkoppling: allt du någonsin vill ha i ett grafiskt användargränssnitt när du skapar och hanterar webbanimationer. I den här artikeln tar vi en titt på det senaste verktyget tillgängligt för webbanimatorer som heter Spirit by Patrick Brouwer. Vi lär oss hur det kan ändra hur du skapar animeringar på webben. Låt oss animera!
Anden är ett tredelt recept som kräver:
Skrivbordsprogrammet är ett grafiskt användargränssnitt (GUI) för att skapa och hantera dina animationer, medan webbläsarens tillägg skapar anslutningen mellan motsvarande skrivbordsapp och din webbsida.
Appen är för närvarande tillgänglig för Mac, men kommer att vara tillgänglig för Windows och Linux inom den närmaste framtiden. Andes webbplatstillägg är strängt Chrome, men kompatibla tillägg för andra stora webbläsare (Firefox, Opera och Safari) är under utveckling.
När varje komponent är på plats kan du börja din animationsutveckling. Öppna appen, navigera till önskad webbadress med din webbläsare, aktivera förlängningen och börja animera!
Om du vill animera en webbsida från ditt lokala filsystem, se till att välj kryssrutan Tillåt åtkomst till filadresser i dina Chrome-förlängningsinställningar.
Det rekommenderas att du lägger till en data ande-id till varje element du vill animera när du utvecklar lokalt.
...
Detta gör det lättare att använda GUI för att redigera ett elements tidslinje och gör det också lättare för körtiden att välja dina mål utan att använda elementbaserade CSS-selektorer (t.ex.. kropp> div> div> ul).
Andan använder det som kallas "runtime (spelare)". Om den webbsida du besöker inte har någon speltid för spridning, kommer webbläsarens tillägg automatiskt att injicera en tillfällig runtime för dig. Runtime är bara en JavaScript-fil (~ 10kb), så när som helst hör du termen "runtime" säger till dig själv "JavaScript-fil".
Runtime gör att du kan spela animationer direkt på din webbsida och utnyttjar kraften i GSAP för all animering. Det betyder att du kan använda GSAP-specifika egenskaper samt plugins som drawSVG eller morphSVG, tillsammans med andra animationsstrategier som fortfarande är under utveckling (WAAPI).
Runtiden är tillgänglig via Open Source om du vill ge din tid för att behålla eller förbättra den. Om du föredrar att installera runtime-spelaren som ett NPM-paket kan du skriva installationskommandot npm installera spiritjs - save från din terminal, eller du kan ge Garn ett försök med deras installationskommando garn tillägg spiritjs.
Är du en webbanimator letar du efter en tidslinje som är lätt att styra, navigera och använda? Spirit har ryggen, med ett elegant och intuitivt gränssnitt som ger dig många alternativ för att finjustera dina skapelser. Tidslinjen kan skruvas och keyframes läggas med lätthet. Sorteringselement är dock en funktion som väntar på att implementeras. Om du utvecklar i realtid kan element läggas till eller tas bort efter behov. När ditt arbete är klart klickar du på tillbaka knappen, exportera JSON-filen som innehåller dina framsteg, och ladda med API-filen för Spirit runt om det behövs.
Varje keyframe kan finjusteras med avseende på tidtagning och lättnad. Att lägga till och ta bort dem är också enkelt. Element är listade vertikalt i tidslinjeinspektören och var och en har sin egen tidslinje.
Värdena för att animera varje egenskap kan vara allt som körtiden accepterar. Det är även möjligt att använda JavaScript-kod som ett godkänt värde, som producerar element som är dynamiska och flexibla med hjälp av mushändelser, rullning och positionsdetektering för att bara nämna några. Se till att du sätter ihop din JavaScript-logik för egenskapsvärden med lockiga hängslen som så window.innerWidth - this.clientWidth.
Varje element kan ha många olika egenskaper tillgängliga för att animera inklusive specifika SVG egenskaper relaterade till stroke, fylla, Färg, placera och storlek. Du kan även välja clips banor, filter, box-shadow och z-index att animera. Anpassade egenskaper kan också läggas till, om de standard som tillhandahålls inte passar dina behov. Se till att anpassade egenskaper som passerat in är anpassade till CSS-fastighetsnamn dokumenterade av W3C-specifikationer.
En animationsgrupp är en samling objekt (HTML-element) som du vill animera. Tänk på grupper som "komponenter" där var och en har förmåga att exporteras som JSON.
Du kan skapa så många grupper som du vill och har kontroll över var och en av dem. Skapa nya grupper enkelt och lägg till nya element genom att välja var och en direkt från din webbsida eller via element panelen i Chrome Devtools. När det infångade elementet inte har en data ande-id ange den enda referens som den har är en XPath (relativt den valda roten) så det är bäst att skapa attributreferenser när produktionsutvecklingen ringer.
Accentsconagua
var tl = ny TimelineMax () spirit.setup (). då (() => spirit.load ('./ my-animations.json'). sedan (grupper => // konstruera alla grupper groups.construct ( ); // kontrollera bränningssekvensen för varje grupp med hjälp av GSAP tl.add (groups.get ('gruppnamn'), 0) .add (groups.get ('group-anothergroupname'), '- = 0,25') .add (groups.get ('group-yetanothergroupname'), '+ = 0.125')));En grupp är egentligen bara en samling av GSAP-tidslinjer, så om du redan är användare av GreenSock kommer detta att vara ett välkommet tillägg till ditt arbetsflöde och verktyg. Grupper kan inte kontrolleras på en gång med skrivbordsapplikationen (en framtida funktionsförfrågan), men problemet kan lindras med hjälp av Spirit's advanced API, eftersom dess runtime använder GSAP API för tidslinjes instanser som återspeglas i koden ovan. Du kan också kolla in den här demo som skapats av Andes tillverkare och visar användningen av en huvudtidslinjesekvens med UI-kontroller och flera grupper:
Som jag diskuterade i min tidigare förklaring rörande grupper har Spirit ett API för utvecklare som behöver djupare kontroll. Det finns två API-er som tillhandahålls; ett enkelt API och ett avancerat API.
spirit.loadAnimation (container: element, // dom element som innehåller animationsslinga: true, yoyo: true, delay: 2)
Medan det avancerade APIet tillåter omfattande kontroll kan det enkla API-systemet täcka uppgifter som att styra uppspelning via en rad alternativ. Du kan till och med returnera värden, ladda grupper och lägga till interaktivitet.
spirit.setup ()
Det avancerade API: n är för alla dina extra behov utanför det enkla API: n. Innan du kan använda det avancerade APIet måste du berätta runtiden där den kan hitta GSAP Tween och tidslinje instanser. När samtalet till Andes installationsmetod är på plats, öppnar översvämningsportarna, vilket ger dig möjligheten att göra saker som tidslinjekonstruktion och referens, interaktivitet, nyckelram och referenser för fastigheter och mycket mer.
Att hålla saker i synkronisering är viktigt, speciellt för att Anden ska springa effektivt. Anteckningsprogrammet för Andes automatiskt uppdateras i bakgrunden, så du har alltid den senaste versionen installerad och de senaste funktionerna till hands. Genom att automatiskt uppdatera Spirit-appen är det lättare att iterera och implementera nya funktioner under vägen. Chrome-tillägg uppdateras även i bakgrunden. Varje några timmar kontrollerar webbläsaren om det finns en uppdateringsadress för eventuella installerade tillägg eller appar. För var och en gör det en begäran till den webbadressen som letar efter en uppdaterad manifest XML-fil.
Gå till chrome: // extensions och kryssa på utvecklarläge kryssrutan längst upp till höger och tryck sedan på Uppdatera tillägg nu knapp. Genom att säkerställa att denna inställning är på plats kan Anden fungera utan att leda till oväntat beteende då nya funktioner och uppdaterade data läggs till.
Om du vill behålla flikar på nya funktioner och framsteg med Spirit kan du anmäla dig till deras nyhetsbrev här samt följa framsteg på Twitter. Ande är definitivt det verktyg som kommer att förändra hur du skapar animationer för webben.
