Share
Full tidslinjekontroll, import og eksport JSON, inspiser animasjoner, intuitivt grensesnitt, live redigering, lett å forstå API, rettet mot hastighet og realtids tilbakemelding: alt du kan ønske deg i et grafisk brukergrensesnitt når du oppretter og administrerer web animasjoner. I denne artikkelen tar vi en titt på det nyeste verktøyet som er tilgjengelig for web-animatorer kalt Spirit by Patrick Brouwer. Vi lærer hvordan det kan endre måten du lager animasjoner på nettet. La oss animere!
Ånd er en tredelte oppskrift som krever:
Desktop-appen er et GUI (grafisk brukergrensesnitt) for å opprette og administrere animasjonene dine, mens nettleserutvidelsen skaper forbindelsen mellom tilhørende skrivebordsprogram og websiden din.
Appen er for øyeblikket tilgjengelig for Mac, men vil være tilgjengelig for Windows og Linux i nær fremtid. Andes nettleserutvidelse er strengt Chrome, men kompatible utvidelser for andre store nettlesere (Firefox, Opera og Safari) er under utvikling.
Når hver komponent er på plass, kan du begynne animasjonsutviklingen. Åpne appen, naviger til ønsket nettadresse med nettleseren, aktiver utvidelsen og start animasjonen!
Hvis du vil animere en nettside fra ditt lokale filsystem, må du sørge for å bytte av i avkrysningsruten Tillat tilgang til filadresser i innstillingene for kromutvidelse.
Det anbefales at du legger til en data-spirit-id til hvert element du vil animere når du utvikler deg lokalt.
...
Dette gjør det enklere å bruke GUI for å redigere et elements tidslinje, og gjør det også lettere for kjøretiden å velge mål uten å bruke elementbaserte CSS-selektorer (f.eks.. kropp> div> div> ul).
Ånd bruker det som kalles "runtime (spiller)". Hvis nettsiden du besøker, ikke har noen ånds-runtime, vil nettleserutvidelsen automatisk injisere en midlertidig kjøretid for deg. Runtime er bare en JavaScript-fil (~ 10kb), så når du hører ordet "runtime", si til deg selv "JavaScript-fil".
Runtime gjør at du kan spille animasjonene direkte på din nettside og utnytter kraften til GSAP for all animasjon avspilling. Det betyr at du kan bruke GSAP-spesifikke egenskaper samt plugins som drawSVG eller morphSVG, sammen med andre animasjonsstrategier som fortsatt er under utvikling (WAAPI).
Rundtiden er tilgjengelig via Open Source hvis du ønsker å donere tiden din for å opprettholde eller forbedre den. Hvis du foretrekker å installere runtime-spilleren som en NPM-pakke, kan du skrive inn installasjonskommandoen npm installere spiritjs - save fra terminalen din, eller du kan gi Garn et forsøk med å bruke sin installasjonskommando garn tilsett spiritjs.
Er du en web-animator som ser etter en tidslinje som er lett å kontrollere, navigere og bruke? Ånden har ryggen din, med et elegant og intuitivt grensesnitt som gir mange muligheter for å finjustere dine kreasjoner. Tidslinjen kan skrubbe og keyframes legges enkelt. Sorteringselementer er imidlertid en funksjon som venter på å bli implementert. Hvis du utvikler i sanntid, kan elementer legges til eller fjernes etter behov. Når arbeidet ditt er ferdig, klikker du på tilbake knappen, eksporter JSON-filen som inneholder fremdriften din, og last inn ved hjelp av Spirit runtime API når du ønsker det.
Hver keyframe kan finjusteres med hensyn til timing og lettelse. Å legge til og fjerne dem er også grei. Elementer er oppført vertikalt i tidslinjeinspektøren, og hver har sin egen tidslinje.
Verdiene for å animere hver eiendom kan være alt som kjøretiden aksepterer. Det er også mulig å bruke JavaScript-kode som en bestått verdi, og produsere elementer som er dynamiske og fleksible ved hjelp av museventer, rulling og posisjonsdeteksjon for å nevne noen få. Pass på å pakke inn JavaScript-logikken din for eiendomsverdier med krøllete braces slik window.innerWidth - this.clientWidth.
Hvert element kan ha mange forskjellige egenskaper tilgjengelig for å animere, inkludert spesifikke SVG egenskaper relatert til hjerneslag, fylle, farge, stilling og størrelse. Du kan til og med velge clip-baner, filtre, box-shadow og z-indeks å animere. Tilpassede egenskaper kan også legges til, hvis standardene som er oppgitt, ikke passer dine behov. Pass på at egendefinerte egenskaper som passeres inn, er justert med CSS-fastighetsnavn dokumentert av W3C-spesifikasjoner.
En animasjonsgruppe er en samling objekter (HTML-elementer) du vil animere. Tenk på grupper som "komponenter" der hver enkelt har muligheten til å bli eksportert som JSON.
Du kan opprette så mange grupper som du ønsker og har kontroll over hver enkelt av dem. Lag nye grupper enkelt og legg til nye elementer ved å velge hver enkelt direkte fra nettsiden din, eller via Elements panel i Chrome Devtools. Når det oppfangede elementet ikke har en data-spirit-id Tilskrive den eneste referansen den har, er en XPath (i forhold til den valgte roten), så det er best å opprette attributtreferanser når produksjonsutvikling kaller.
Accentsconagua
var tl = ny TimelineMax () spirit.setup (). da (() => spirit.load ('./ my-animations.json'). da (groups => // konstruere alle grupper groups.construct ( ); // styr avfyringssekvensen til hver gruppe ved hjelp av GSAP tl.add (groups.get ('group-name'), 0) .add (groups.get ('group-anothergroupname'), '- = 0,25') .add (groups.get ('group-yetanothergroupname'), '+ = 0.125')));En gruppe er egentlig bare en samling av GSAP-tidslinjer, så hvis du allerede er bruker av GreenSock, vil dette være et godt tillegg til arbeidsflyten og verktøyet ditt. Grupper kan ikke kontrolleres på en gang ved hjelp av skrivebordsprogrammet (en fremtidig funksjonsforespørsel), men problemet kan lindres ved hjelp av Spirit's avanserte API, da kjøretiden utnytter GSAP API for tidslinjes forekomster gjenspeiles i koden ovenfor. Du kan også sjekke ut denne demoen som er opprettet av Spirit's maker, og viser bruken av en master tidslinjesekvens med UI-kontroller og flere grupper:
Som jeg diskuterte i min tidligere forklaring vedrørende grupper, har Spirit en API for utviklere som trenger dypere kontroll. Det er to APIer gitt; en enkel API og en avansert API.
spirit.loadAnimation (container: element, // dom element som inneholder animasjonsløype: true, yoyo: true, delay: 2)
Mens den avanserte APIen gir omfattende kontroll, kan den enkle APIen dekke oppgaver som å kontrollere avspilling gjennom en rekke alternativer. Du kan til og med returnere verdier, laste grupper og legge til interaktivitet.
spirit.setup ()
Den avanserte APIen er for alle dine ekstrabehov utenfor den enkle API. Før du kan bruke den avanserte APIen, må du fortelle kjøretiden der den kan finne GSAP Tween og Tidslinje forekomster. Etter at samtalen til Ånds oppsettsmetode er på plass, åpner flodportene, noe som gir deg muligheten til å gjøre ting som tidslinjekonstruksjon og referanse, interaktivitet, keyframe og referanse til eiendom og mye mer.
Å holde ting i synkronisering er viktig, spesielt for Ånd å løpe effektivt. Ånds skrivebordsprogrammet automatiserer seg automatisk i bakgrunnen, slik at du alltid har den nyeste versjonen installert og de nyeste funksjonene på fingertuppene. Ved automatisk oppdatering av Spirit-appen, er det lettere å iterere og implementere nye funksjoner underveis. Chrome-utvidelser oppdateres også i bakgrunnen. I noen få timer sjekker nettleseren om noen installerte utvidelser eller apper har en oppdateringsadresse. For hver enkelt, gjør det en forespørsel til den nettadressen som ser etter en oppdatert manifest XML-fil.
Gå til chrome: // extensions og kryss av Utviklermodus boksen øverst til høyre, og trykk deretter på Oppdater utvidelser nå knapp. Ved å sørge for at dette oppsettet er på plass, kan Ånd operere uten å føre til uventet oppførsel, da nye funksjoner og oppdaterte data legges til.
Hvis du vil beholde faner på nye funksjoner og fremgang med Spirit, kan du registrere deg for nyhetsbrevet her, så vel som å følge fremdriften på Twitter. Ånd er definitivt det verktøyet som vil endre måten du lager animasjoner på nettet.
