Share
Controllo della sequenza temporale, importazione ed esportazione JSON, ispezioni di animazioni, interfaccia intuitiva, editing in tempo reale, API di facile comprensione, mirate alla velocità e feedback in tempo reale: tutte le cose che potresti desiderare in un'interfaccia grafica utente durante la creazione e la gestione di animazioni web. In questo articolo daremo uno sguardo al nuovo strumento disponibile per gli animatori del web chiamato Spirit di Patrick Brouwer. Impareremo come può cambiare il modo in cui crei le animazioni sul web. Animiamo!
Spirit è una ricetta in tre parti, che richiede:
L'app desktop è una GUI (interfaccia utente grafica) per la creazione e la gestione delle animazioni, mentre l'estensione del browser crea la connessione tra l'app desktop corrispondente e la tua pagina web.
L'app è attualmente disponibile per Mac, ma sarà disponibile per Windows e Linux nel prossimo futuro. L'estensione del browser di Spirit è rigorosamente Chrome in questo momento, ma sono in fase di sviluppo estensioni compatibili per altri principali browser (Firefox, Opera e Safari).
Quando ogni componente richiesto è a posto puoi iniziare lo sviluppo dell'animazione. Apri l'app, vai all'URL della pagina web desiderata usando il browser, attiva l'estensione e avvia l'animazione!
Se desideri animare una pagina Web dal tuo file system locale, assicurati di attivare la casella di controllo Consenti l'accesso agli URL dei file nelle tue impostazioni dell'estensione di Chrome.
Si consiglia di aggiungere un Dati-spirit-id a ciascun elemento che desideri animare durante lo sviluppo locale.
...
Ciò semplifica l'utilizzo della GUI per la modifica della timeline di un elemento e rende inoltre più facile per il runtime selezionare i target senza utilizzare selettori CSS basati su elementi (ad es.. corpo> div> div> ul).
Spirit usa ciò che viene chiamato "runtime (player)". Se la pagina web che stai visitando non ha runtime Spirit, l'estensione del browser si auto-inietterà automaticamente un runtime temporaneo. Il runtime è solo un file JavaScript (~ 10kb), quindi ogni volta che senti il termine "runtime" dì a te stesso "file JavaScript".
Runtime ti consente di riprodurre le animazioni direttamente sulla tua pagina web e sfrutta la potenza di GSAP per tutta la sua riproduzione animata. Ciò significa che puoi utilizzare le proprietà specifiche di GSAP così come i plugin drawSVG o morphSVG, insieme ad altre strategie di animazione ancora in fase di sviluppo (WAAPI).
Il runtime è disponibile tramite Open Source se desideri donare il tuo tempo per mantenerlo o migliorarlo. Se si preferisce installare il lettore runtime come pacchetto NPM, è possibile digitare il comando install npm install spiritjs --save dal tuo terminale, oppure puoi provare Yarn usando il loro comando di installazione filato aggiungere spiritjs.
Sei un animatore web alla ricerca di una timeline facile da controllare, navigare e utilizzare? Spirit ha le spalle, con un'interfaccia elegante e intuitiva che offre numerose opzioni per perfezionare le tue creazioni. La timeline può essere cancellata e i keyframe aggiunti con facilità. Gli elementi di ordinamento, tuttavia, sono una caratteristica che attende di essere implementata. Se stai sviluppando in tempo reale, gli elementi possono essere aggiunti o rimossi secondo necessità. Al termine del tuo lavoro, fai clic su indietro pulsante, esporta il file JSON contenente i tuoi progressi e carica utilizzando l'API runtime Spirit quando lo desideri.
Ogni fotogramma chiave può essere regolato per quanto riguarda i tempi e l'andamento. Aggiungerli e rimuoverli è anche semplice. Gli elementi sono elencati verticalmente nell'ispettore timeline e ognuno ha una propria timeline.
I valori per l'animazione di ogni proprietà possono essere qualsiasi cosa che il runtime accetta. È persino possibile utilizzare il codice JavaScript come valore passato, producendo elementi dinamici e flessibili utilizzando gli eventi del mouse, lo scorrimento e il rilevamento della posizione per citarne solo alcuni. Assicurati di avvolgere la tua logica JavaScript per i valori delle proprietà con parentesi graffe in questo modo window.innerWidth - this.clientWidth.
Ogni elemento può avere molte proprietà diverse disponibili per l'animazione, tra cui proprietà SVG specifiche relative a ictus, riempire, colore, posizione e taglia. Puoi anche selezionare clip-percorsi, filtri, box-ombra e z-index animare. È possibile aggiungere anche proprietà personalizzate, se quelle predefinite fornite non soddisfano le proprie esigenze. Assicurati che le proprietà personalizzate passate siano allineate con i nomi delle proprietà CSS documentati dalle specifiche W3C.
Un gruppo di animazioni è una raccolta di oggetti (elementi HTML) che desideri animare. Pensa ai gruppi come a "componenti" in cui ognuno ha la possibilità di essere esportato come JSON.
Puoi creare tutti i gruppi che desideri e avere il controllo su ognuno di essi. Crea facilmente nuovi gruppi e aggiungi nuovi elementi selezionandoli direttamente dalla tua pagina web o tramite Elementi pannello in Chrome Devtools. Quando l'elemento catturato non ha a Dati-spirit-id attributo l'unico riferimento che ha è un XPath (relativo alla radice selezionata) quindi è meglio creare riferimenti agli attributi quando lo sviluppo di produzione chiama.
Accentsconagua
var tl = new TimelineMax () spirit.setup (). then (() => spirit.load ('./ my-animations.json'). then (groups => // costruisci tutti i gruppi groups.construct ( // controlla la sequenza di attivazione di ogni gruppo utilizzando GSAP tl.add (groups.get ('nome-gruppo'), 0) .add (groups.get ('group-anothergroupname'), '- = 0.25') .add (groups.get ('group-yetanothergroupname'), '+ = 0.125')));Un gruppo è in realtà solo una raccolta di timeline GSAP, quindi se sei già un utente di GreenSock, questa sarà una gradita aggiunta al tuo flusso di lavoro e agli strumenti. I gruppi non possono essere controllati contemporaneamente utilizzando l'app desktop (una richiesta futura di funzionalità), ma il problema può essere alleviato utilizzando l'API avanzata di Spirit poiché il runtime sfrutta l'API GSAP per le istanze di timeline riflesse nel codice sopra. Puoi anche dare un'occhiata a questa demo creata dal creatore di Spirit, che mostra l'uso di una sequenza timeline principale con controlli dell'interfaccia utente e più gruppi:
Come discusso nella mia precedente spiegazione relativa ai gruppi, Spirit ha un'API per gli sviluppatori che richiedono un controllo più approfondito. Sono disponibili due API; una semplice API e un'API avanzata.
spirit.loadAnimation (container: elemento, // elemento dom che contiene il ciclo dell'animazione: true, yoyo: true, delay: 2)
Mentre l'API avanzata consente un controllo completo, la semplice API può coprire attività come il controllo della riproduzione attraverso una serie di opzioni. Puoi anche restituire valori, caricare gruppi e aggiungere interattività.
spirit.setup ()
L'API avanzata è per tutti i tuoi bisogni extra al di fuori della semplice API. Prima di poter utilizzare l'API avanzata devi dire al runtime dove può trovare il GSAP Gemello e Sequenza temporale le istanze. Dopo aver richiamato la chiamata al metodo di installazione di Spirit, i gate di alluvione si apriranno offrendoti la possibilità di fare cose come la costruzione di timeline e riferimenti, l'interattività, il keyframe e la referenziazione di proprietà e molto altro.
Mantenere le cose in sincrono è importante, specialmente perché Spirit funzioni in modo efficace. L'applicazione desktop Spirit si aggiorna automaticamente in background, così avrai sempre l'ultima versione installata e le funzionalità più nuove a portata di mano. Aggiornando automaticamente l'app Spirit, è più facile iterare e implementare nuove funzionalità lungo il percorso. Anche le estensioni di Chrome vengono aggiornate in background. Ogni poche ore, il browser controlla se eventuali estensioni o app installate hanno un URL di aggiornamento. Per ognuno, invia una richiesta a tale URL alla ricerca di un file XML manifest aggiornato.
Vai a chrome: // estensioni e spuntare il modalità sviluppatore casella di controllo in alto a destra, quindi premere il tasto Aggiorna le estensioni ora pulsante. Assicurandosi che questa configurazione sia attiva, Spirit può operare senza comportare comportamenti imprevisti man mano che vengono aggiunte nuove funzionalità e dati aggiornati.
Se desideri tenere d'occhio le nuove funzionalità e progredire con Spirit, puoi iscriverti alla loro newsletter qui e seguire i progressi su Twitter. Spirit è sicuramente lo strumento che cambierà il modo in cui crei animazioni per il web.
