Share
Volledige tijdlijncontrole, import en export JSON, inspecteer animaties, intuïtieve interface, live bewerking, eenvoudig te begrijpen API, gericht op snelheid en realtime feedback: alles wat u ooit zou willen in een grafische gebruikersinterface bij het maken en beheren van webanimaties. In dit artikel zullen we een kijkje nemen naar de nieuwste tool beschikbaar voor web-animators genaamd Spirit door Patrick Brouwer. We zullen leren hoe dit de manier kan veranderen waarop u animaties op het web maakt. Laten we animeren!
Spirit is een recept uit drie delen, dat vereist:
De desktop-app is een GUI (grafische gebruikersinterface) voor het maken en beheren van uw animaties, terwijl de browserextensie de verbinding tot stand brengt tussen de corresponderende desktop-app en uw webpagina.
De app is momenteel beschikbaar voor Mac, maar zal in de zeer nabije toekomst beschikbaar zijn voor Windows en Linux. De browserextensie van Spirit is momenteel strikt Chrome, maar compatibele extensies voor andere belangrijke browsers (Firefox, Opera en Safari) zijn in ontwikkeling.
Wanneer elk onderdeel vereist is, kunt u beginnen met het ontwikkelen van uw animatie. Open de app, navigeer naar de gewenste webpagina-URL met uw browser, activeer de extensie en begin met animeren!
Als u een webpagina vanuit uw lokale bestandssysteem wilt animeren, schakelt u het selectievakje in Toegang tot bestands-URL's toestaan in uw Chrome-extensie-instellingen.
Het is raadzaam een a toe te voegen data-spirit-id voor elk element dat je wilt animeren bij lokaal ontwikkelen.
...
Dit maakt het gemakkelijker om de grafische gebruikersinterface te gebruiken voor het bewerken van de tijdlijn van een element en maakt het ook gemakkelijker voor de runtime om uw doelen te selecteren zonder element-gebaseerde CSS-selectors te gebruiken (bijv.. lichaam> div> div> ul).
Spirit gebruikt de zogenaamde "runtime (speler)". Als de webpagina die u bezoekt geen Spirit-runtime heeft, injecteert de browserextensie automatisch een tijdelijke runtime voor u. Runtime is slechts een JavaScript-bestand (~ 10 kb), dus wanneer je de term 'runtime' hoort, zeg dan tegen jezelf 'JavaScript-bestand'.
Met Runtime kunt u de animaties rechtstreeks op uw webpagina afspelen en wordt de kracht van GSAP gebruikt voor al het afspelen van animaties. Dat betekent dat u zowel GSAP-specifieke eigenschappen als plug-ins kunt gebruiken drawSVG of morphSVG, samen met andere animatiestrategieën die nog in ontwikkeling zijn (WAAPI).
De runtime is beschikbaar via Open Source als u uw tijd wilt doneren om het te onderhouden of te verbeteren. Als u de runtime-speler liever als een NPM-pakket installeert, kunt u de installatieopdracht typen npm install spiritjs --save vanaf uw terminal, of u kunt Yarn een keer proberen met behulp van hun installatieopdracht garen voeg spiritjs toe.
Ben je een web-animator op zoek naar een tijdlijn die eenvoudig te bedienen, te navigeren en te gebruiken is? Spirit heeft je rug, met een elegante en intuïtieve interface die tal van opties biedt om je creaties te verfijnen. De tijdlijn kan worden geschrobd en keyframes worden eenvoudig toegevoegd. Sorteerelementen zijn echter een functie die nog moet worden geïmplementeerd. Als u zich in realtime ontwikkelt, kunnen elementen worden toegevoegd of verwijderd als dat nodig is. Wanneer uw werk is voltooid, klikt u op de terug knop, exporteer het JSON-bestand met uw voortgang en laad indien gewenst met de Spirit runtime API.
Elk sleutelframe kan worden afgestemd op timing en versoepeling. Het toevoegen en verwijderen ervan is ook eenvoudig. Elementen worden verticaal weergegeven in de tijdlijninspecteur en elke kolom heeft zijn eigen tijdlijn.
De waarden voor het animeren van elke eigenschap kunnen alles zijn dat de runtime accepteert. Het is zelfs mogelijk om JavaScript-code te gebruiken als een doorgegeven waarde, door elementen te produceren die dynamisch en flexibel zijn met muisgebeurtenissen, scrollen en positiedetectie om er maar een paar te noemen. Zorg ervoor dat je JavaScript-logica voor eigenschapswaarden wikkelt met accolades zoals dat het geval is window.innerWidth - this.clientWidth.
Elk element kan veel verschillende eigenschappen hebben om te animeren, inclusief specifieke SVG-eigenschappen die betrekking hebben op beroerte, vullen, kleur, positie en grootte. U kunt zelfs selecteren clip-paden, filters, box-shadow en z-index animeren. Aangepaste eigenschappen kunnen ook worden toegevoegd als de standaardinstellingen niet voldoen aan uw behoeften. Zorg ervoor dat aangepaste eigenschappen die zijn doorgegeven, worden uitgelijnd met CSS-eigenschapsnamen die zijn gedocumenteerd door W3C-specificaties.
Een animatiegroep is een verzameling objecten (HTML-elementen) die u wilt animeren. Beschouw groepen als "componenten" waar elk de mogelijkheid heeft om te worden geëxporteerd als JSON.
Je kunt zoveel groepen maken als je wilt en controle hebben over elk van hen. Maak eenvoudig nieuwe groepen en voeg nieuwe elementen toe door elk afzonderlijk te selecteren vanaf uw webpagina of via de Elements paneel in Chrome Devtools. Wanneer het opgenomen element geen a heeft data-spirit-id attribuut de enige referentie die het heeft is een XPath (relatief ten opzichte van de geselecteerde root) dus het is het beste om attribuutreferenties te creëren wanneer productieontwikkeling aanroept.
Accentsconagua
var tl = new TimelineMax () spirit.setup (). then (() => spirit.load ('./ my-animations.json'). then (groups => // construeer alle groepen groups.construct ( ); // bestuurt de afvuursequentie van elke groep met behulp van GSAP tl.add (groups.get ('groepsnaam'), 0) .add (groups.get ('group-anothergroupname'), '- = 0.25') .add (groups.get ('group-yetanothergroupname'), '+ = 0.125')));Een groep is eigenlijk maar een verzameling GSAP-tijdlijnen, dus als u al een gebruiker van GreenSock bent, is dit een welkome toevoeging aan uw workflow en gereedschappen. Groepen kunnen niet tegelijk worden beheerd via de desktop-app (een toekomstige functieverzoek), maar het probleem kan worden opgelost door de geavanceerde API van Spirit te gebruiken, omdat de GSAP-API wordt gebruikt voor tijdlijninstanties die worden weergegeven in de bovenstaande code. Je kunt ook deze demo bekijken die is gemaakt door Spirit's maker en waarin het gebruik van een hoofdtijdlijnreeks met UI-besturingselementen en meerdere groepen wordt getoond:
Zoals ik in mijn eerdere uitleg over groepen heb besproken, heeft Spirit een API voor ontwikkelaars die meer controle nodig hebben. Er zijn twee API's beschikbaar; een eenvoudige API en een geavanceerde API.
spirit.loadAnimation (container: element, // dom-element dat animatielus bevat: true, yoyo: true, delay: 2)
Hoewel de geavanceerde API uitgebreide controle biedt, kan de eenvoudige API taken afdekken zoals het afspelen regelen via een reeks opties. U kunt zelfs waarden retourneren, groepen laden en interactiviteit toevoegen.
spirit.setup ()
De geavanceerde API is voor al uw extra behoeften buiten de eenvoudige API. Voordat u de geavanceerde API kunt gebruiken, moet u de runtime aangeven waar deze de GSAP kan vinden Tween en Tijdlijn instances. Nadat de aanroep naar de installatiemethode van Spirit is geïnstalleerd, worden de sluizen geopend en hebt u de mogelijkheid om dingen te doen zoals tijdlijnconstructie en -referentie, interactiviteit, keyframe en verwijzing naar eigenschappen en nog veel meer.
Het synchroniseren van dingen is belangrijk, vooral als Spirit effectief werkt. De Spirit desktop-applicatie werkt zichzelf automatisch op de achtergrond bij, zodat je altijd de nieuwste versie hebt geïnstalleerd en de nieuwste functies binnen handbereik hebt. Door de Spirit-app automatisch bij te werken, is het gemakkelijker om onderweg nieuwe functies te herhalen en te implementeren. Chrome-extensies worden ook op de achtergrond bijgewerkt. Om de paar uur controleert de browser of geïnstalleerde extensies of apps een update-URL hebben. Voor elke aanvraag wordt naar die URL gezocht naar een bijgewerkt manifest XML-bestand.
Ga naar chrome: // extensions en vink het aan Ontwikkelaarsmodus selectievakje in de rechterbovenhoek en druk vervolgens op Update nu extensies knop. Door ervoor te zorgen dat deze instelling op zijn plaats is, kan Spirit werken zonder tot onverwacht gedrag te leiden, omdat nieuwe functies en bijgewerkte gegevens worden toegevoegd.
Als je nieuwe functies en vooruitgang met Spirit wilt bijhouden, kun je je hier aanmelden voor hun nieuwsbrief en de voortgang volgen op Twitter. Spirit is absoluut de tool die de manier waarop je animaties voor het web maakt, zal veranderen.
