Spirit App animație simplă în timp real pentru web

Controlul temporal complet, importarea și exportul JSON, inspectarea animațiilor, interfața intuitivă, editarea live, API ușor de înțeles, care vizează viteza și feedback-ul în timp real: toate lucrurile pe care le-ați putea dori vreodată într-o interfață grafică de utilizator atunci când creați și gestionați animații web. În acest articol vom arunca o privire la cel mai nou instrument disponibil pentru animatorii web numit Spirit de Patrick Brouwer. Vom afla cum se poate schimba modul în care creați animații pe web. Să animăm!

Noțiuni de bază și de funcționare

Spiritul este o rețetă cu trei părți, care necesită:

  1. O aplicație desktop (linia de timp).
  2. Un runtime (fișier JavaScript).
  3. O extensie de browser care vă permite să vă conectați la orice pagină web comunicând între aplicație și timpul de executare. 

Aplicația pentru desktop este o interfață grafică (GUI) pentru crearea și gestionarea animațiilor, în timp ce extensia browserului creează conexiunea între aplicația desktop corespunzătoare și pagina dvs. web. 

Aplicația este disponibilă în prezent pentru Mac, dar va fi disponibilă pentru Windows și Linux în viitorul apropiat. Extensia browserului Spirit este strict Chrome, dar extensiile compatibile pentru alte browsere majore (Firefox, Opera și Safari) sunt în curs de dezvoltare. 

Când fiecare componentă necesară este în loc, puteți începe dezvoltarea de animație. Deschideți aplicația, navigați la adresa URL a paginii web dorite, utilizând browserul, activați extensia și începeți animarea!

Sfaturi pentru dezvoltarea locală

Dacă doriți să animați o pagină Web din sistemul dvs. de fișiere local, asigurați-vă că ați bifat caseta de selectare Permiteți accesul la adresele URL ale fișierelor în setările extensiei dvs. Chrome.

Este recomandat să adăugați a date-spirit-id la fiecare element pe care doriți să îl animați atunci când vă dezvoltați local. 

 
...
    ...

Acest lucru facilitează utilizarea interfeței grafice pentru editarea unei cronologii a unui element și, de asemenea, facilitează runtime-ul să vă aleagă obiectivele fără a utiliza selectori CSS bazați pe elemente (de ex.. corp> div> div> ul).

Player-ul Runtime

Spiritul folosește ceea ce se numește "runtime (player)". Dacă pagina web pe care o vizitați nu are runtime Spirit, extensia browserului va injecta automat o durată de execuție temporară pentru dvs. Runtime este doar un fișier JavaScript (~ 10kb), așa că oricând auziți termenul "runtime", spuneți-vă "fișier JavaScript".

Runtime vă permite să redați animațiile direct pe pagina dvs. web și să utilizați puterea GSAP pentru toate redarea animației. Aceasta înseamnă că puteți utiliza proprietăți specifice GSAP, precum și pluginuri asemănătoare drawSVG sau morphSVG, împreună cu alte strategii de animație încă în curs de dezvoltare (WAAPI). 

Timpul de execuție este disponibil prin Open Source dacă doriți să vă dați timp pentru a vă ajuta să îl mențineți sau să îl îmbunătățiți. Dacă preferați să instalați playerul runtime ca un pachet NPM, puteți tasta comanda de instalare npm install spiritjs - salvează de la terminalul dvs. sau puteți să-i dați lui Fire o încercare folosind comanda de instalare fire adaugă spiritjs.

Inspectorul temporal

Sunteți un animator web care caută o cronologie care este ușor de controlat, navigat și folosit? Spiritul are spatele, cu o interfață elegantă și intuitivă oferind o mulțime de opțiuni pentru a regla creațiile. Cronologia poate fi curățată și cadrele cheie adăugate cu ușurință. Elementele de sortare, totuși, reprezintă o caracteristică care urmează să fie implementată. Dacă sunteți în curs de dezvoltare în timp real, elementele pot fi adăugate sau eliminate după cum este necesar. Când ați terminat lucrul, faceți clic pe înapoi , exportați fișierul JSON care conține progresul dvs. și încărcați utilizând API-ul runtime Spirit atunci când doriți.

Fiecare cadru cheie poate fi reglat fin în ceea ce privește calendarul și relaxarea. Adăugarea și eliminarea lor este, de asemenea, simplă. Elementele sunt listate vertical în inspectorul de timp și fiecare are o linie de timp proprie. 

Valorile pentru animarea fiecărei proprietăți pot fi tot ceea ce timpul de execuție acceptă. Este posibil chiar să utilizați codul JavaScript ca o valoare trecută, producând elemente care sunt dinamice și flexibile utilizând evenimentele mouse-ului, deplasarea și detectarea poziției pentru a numi doar câteva. Asigurați-vă că ați încheiat logica JavaScript pentru valorile de proprietate cu acolade arcuite ca atare window.innerWidth - this.clientWidth.

Fiecare element poate avea multe proprietăți diferite pentru a anima inclusiv proprietățile specifice SVG referitoare la accident vascular cerebral, completati, culoare, poziţie și mărimea. Puteți chiar să selectați clip-căi, filtre, box-shadow și z-index să animați. Proprietățile personalizate pot fi adăugate, de asemenea, dacă cele prestabilite nu se potrivesc nevoilor dvs. Asigurați-vă că proprietățile personalizate trecute sunt aliniate cu numele proprietăților CSS documentate de specificațiile W3C.

Înțelegerea "grupurilor"

Un grup de animație este o colecție de obiecte (elemente HTML) pe care doriți să le animați. Gândiți-vă la grupuri ca fiind "componente" unde fiecare are capacitatea de a fi exportat ca JSON.

Puteți crea câte grupuri doriți și aveți control asupra fiecăruia dintre ele. Creați cu ușurință grupuri noi și adăugați elemente noi prin selectarea fiecăruia direct de pe pagina dvs. web sau prin element din Chrome Devtools. Când elementul capturat nu are a date-spirit-id atributul singura referință pe care o are este un XPath (relativ la rădăcina selectată), deci este mai bine să creați referințe atribut atunci când apelurile de dezvoltare a producției.

var tl = noua TimelineMax () spirit.setup (), apoi (() => spirit.load ('./ my-animations.json'). ); // controlați secvența de tragere a fiecărui grup folosind GSAP tl.add (groups.get ('group-name'), 0) .add (groups.get ('group-anothergroupname'), '- = 0.25') .add (groups.get ('grup-încă-altă grupă'), '+ = 0.125')));

Un grup este într-adevăr doar o colecție de linii de timp GSAP, deci dacă sunteți deja un utilizator al GreenSock, acesta va fi un plus de bun venit pentru fluxul de lucru și pentru sculele dumneavoastră. Grupurile nu pot fi controlate imediat utilizând aplicația desktop (o cerere de caracteristică viitoare), dar problema poate fi atenuată utilizând API-ul avansat al lui Spirit, deoarece timpul său de execuție utilizează API-ul GSAP pentru instanțele de cronologie reflectate în codul de mai sus. Puteți, de asemenea, verifica această demonstrație creată de producătorul Spirit, prezentând utilizarea unei secvențe de cronologie de bază cu comenzi UI și mai multe grupuri:

Spiritul API

După cum am discutat în explicația mea anterioară referitoare la grupuri, Spirit are un API pentru dezvoltatorii care necesită un control mai profund. Există două API-uri furnizate; un simplu API și un API avansat.

spirit.loadAnimație (container: element, // element de dom care conține buclă de animație: true, yoyo: true, delay: 2)

În timp ce API-ul avansat permite un control extins, API-ul simplu poate acoperi sarcini cum ar fi controlul redării printr-o serie de opțiuni. Puteți chiar să reveniți la valori, să încărcați grupuri și să adăugați interactivitate.

spirit.setup ()

API-ul avansat este pentru toate nevoile dvs. suplimentare în afara API-ului simplu. Înainte de a putea utiliza API-ul avansat, va trebui să spuneți runtime-ului unde poate găsi GSAP-ul Tween și Cronologie instanțe. După ce apelul la metoda de configurare a lui Spirit este pus în funcțiune, porțile de inundații se vor deschide, oferindu-vă posibilitatea de a face lucruri cum ar fi construcția cronologică și referințele, interactivitatea, referențiarea cadrelor cheie și a proprietății și multe altele.

Gânduri de împărțire

Păstrarea lucrurilor în sincronizare este importantă, mai ales pentru ca spiritul să funcționeze eficient. Aplicația de desktop Spirit se actualizează automat în fundal, astfel încât veți avea întotdeauna cea mai recentă versiune instalată și cele mai noi caracteristici la îndemână. Prin actualizarea automată a aplicației Spirit, este mai ușor să iterați și să implementați noi caracteristici de-a lungul drumului. Extensiile Chrome sunt, de asemenea, actualizate în fundal. La fiecare câteva ore, browserul verifică dacă extensiile sau aplicațiile instalate au o adresă URL de actualizare. Pentru fiecare, face o cerere adresei URL în căutarea unui fișier XML manifestat actualizat.

Mergi la chrome: // extensions și bifați Modul dezvoltator în partea dreaptă sus, apoi apăsați pe Actualizați extensiile acum buton. Prin asigurarea faptului că această configurare este în vigoare, Spiritul poate funcționa fără a conduce la un comportament neașteptat, deoarece sunt adăugate noi caracteristici și date actualizate.

Dacă doriți să păstrați filele cu privire la noile caracteristici și să progresați cu Spirit, puteți să vă înscrieți pentru buletinul informativ aici, precum și să urmăriți progresele pe Twitter. Spiritul este cu siguranță instrumentul care va schimba modul în care creați animații pentru web.

Link-uri utile

  • spiritapp.io
  • Spirit App Documentation
  • Documentația GreenSock
  • Proiectul de specificații pentru animațiile web
  • inlet.nl