Share
Având în mișcare în creștere printre dezvoltatorii de web, la fel sunt și instrumentele care ajută la eficientizarea creării sale. Haiku este o aplicație autonomă disponibilă pentru utilizatorii de Mac și disponibilă și ca opțiune în browser. Prin propria sa descriere "Design componente UI imaginative care se încadrează în orice aplicație web. Cod opțional ". În acest articol vom examina această nouă unealtă disponibilă iubitorilor de mișcare de toate felurile; să ne aruncăm cu capul și să explorăm tot ce este Haiku!
Fondatorul și creatorul Haiku, Zack Brown, a creat Haiku după o carieră extinsă în industria de creație digitală, unde a fost martor la prima vedere cât timp a fost folosit în mod greșit pentru a converti modelele vizuale în cod. Haiku permite designerilor, inginerilor, comercianților, managerilor și tuturor celorlalți actori să creeze împreună, în loc să fie blocați pentru totdeauna în modul "hand off".
Înainte de a ne arunca în Haiku în profunzime să câștigăm o idee mai bună, vizual, cu privire la tipul de rezultat final pe care îl puteți aștepta.
Această demonstrație prezintă mișcări complexe în ceea ce privește tipografia. Este foarte reminiscentă de alte efecte de bibliotecă pe care le-ați fi văzut înainte, cum ar fi cele create cu Mo.js.
Haiku este construit în întregime folosind tehnologii web cum ar fi JavaScript, TypeScript, WebSockets, SVG, DOM interne, React și Git pentru a urmări progresul lui Haiku. Obiectivele viitoare sunt de a permite utilizarea propriului dvs. infrastructură Git în locul lui Haiku; git hosting este doar unul dintre serviciile de flux de lucru oferite.
Demo-ul "WildLoader" de mai sus este un alt exemplu preluat din pagina de galerie și este un proiect oferit de Haiku. Pentru acest demo folosesc CodePen pentru a afișa și da, este tot SVG.
Cu Haiku veți avea puterea de a:
Pentru a profita la maxim de Haiku, veți avea nevoie de Sketch instalat. În actuala sa încarnare Haiku nu are nici unul dintre propriile sale instrumente de desenare și sprijină integrarea bogată cu Sketch din acest motiv. Există planuri de viitor pentru a sprijini alte instrumente de desen, cum ar fi Adobe Photoshop și Illustrator și, în cele din urmă, au și unele proprii.
În spatele scenei, Haiku convertește toate tablourile de artă, paginile și felii de desene ale designului dvs. Sketch în elemente individuale care pot fi compuse independent și animate pe scenă. S-ar putea să vă întrebați: "Ce se întâmplă dacă trebuie să faceți o modificare a fișierului Sketch?" Este bine! Haiku are grijă să vă aducă noile schimbări în Haiku și pe orice bunuri pe care le-ați plasat pe scenă.
CLI (Command Line Interface) este o parte opțională a Haiku, dar deschide o mulțime de caracteristici puternice; de exemplu, utilizând CLI pentru a importa un proiect Haiku într-o bază de date existentă sau puteți utiliza CLI pentru a clona direct un proiect Haiku pe computerul dvs. și pentru a vă accesa codul pentru a fi editat manual. Poți chiar să fugi haiku autentificare pentru a vă conecta interactiv din linia de comandă și, respectiv, puteți rula haiku logout să vă deconectați. În curând veți putea instala CLI direct de la npm, utilizând npm instalați -g @ haiku / cli.
Când deschizi inițial Haiku, vei primi trei proiecte demo diferite, oferite în scopuri de învățare. Unul pe care l-am folosit cu titlul "Moto" este o scenă care ilustrează un motociclist călătorește pe un fundal de munți, în timp ce elementele trec pe lângă călăreț într- cum ar fi moda.
Interfața aplicației conține o cronologie vizuală pentru fiecare element sau cadru cheie pentru scenă. Puteți interacționa cu această cronologie vizuală pentru a vă ajusta animațiile și pentru a obține un rezultat vizual al schimbărilor.
Fiecare componentă pe care o faci în Haiku este optimizată automat pentru producție; nu este un instrument prototip. Haiku crede că echipele creative ar trebui să-și petreacă mai puțin timp făcând prototipuri de aruncătoare și mai mult timp de transport maritim. Sub capota, fiecare componentă Haiku este un cod JavaScript curat pe care îl puteți edita manual fără a rupe legătura cu designul sursei. Au dispărut zilele de reprocesare a codului tău artizanal ca schimbări proaspete ale designului. Haiku oferă chiar și un API puternic pentru conectarea componentelor la logica externă de afaceri.
În viitor, vă puteți aștepta să vedeți alte funcții cum ar fi editare colaborativă în timp real, ramificație, schițe de partajare, comentări în context și multe altele.
Cronologia vizuală este o parte foarte importantă a produsului și, din experiența pe care o folosesc, este foarte bine făcută. Mi se pare extrem de puternic ca fiecare element să poată fi extins sau să se prăbușească pentru a forța în orice proprietate cum ar fi rotație, poziţie sau scară și fiecare dintre aceste proprietăți poate fi animat separat cu cadre cheie și tweens pentru fiecare element. Combinați toate acestea cu opțiunea de a alege diferite curbe de relaxare pentru fiecare tween și toate înfășurate într-un UX intuitiv și lustruit. Atât de minunat!
Intrările de proprietate din linia de timp pot conține mai mult decât valori simple. Utilizatorii pot integra fragmente de cod numite expresii. Acest lucru este foarte mult la modă cu Microsoft Excel; începi valoarea de intrare a proprietății cu un egal semnul iar intrarea va recunoaște că introduceți o expresie. Expresiile sunt fragmente de cod care adaugă comportament dinamic proprietăților din animație.
Fiecare proiect Haiku pe care îl creați poate avea o colecție proprie de state interne. Aceste fragmente de date sunt speciale pentru componenta dvs. ca o metodă de a le "citească" în funcțiile de expresie, permițându-vă să creați un comportament complex și dinamic. Puteți accesa oricând o valoare de stat prin expresiile personalizate de cronologie introducând numele statului.
Statele sunt modul în care lucrezi cu date false în Haiku. De exemplu, dacă doriți să creați o vizualizare de date în care o serie de puncte sunt animate pe baza unei serii de date. Folosind stări și expresii, puteți să vă configurați vizual animațiile și apoi să le testați cu date machete în Haiku. Când sunteți gata să vă conectați la proiect într-o bază de coduri, aceste "state machete" sunt gata să accepte date reale.
Dacă utilizați adaptorul opțional React al lui Haiku, fiecare stat din Haiku este adresabil în mod automat ca proprietate React. Conectați-vă datele de la React în componenta Haiku și voila! Design-urile dvs. trăiesc în interiorul aplicației complete cu date live.
Când sunteți în sfârșit gata să expediați un proiect Haiku puteți publica folosind Haiku Player. Acest player nu este un plugin de browser, este mai mult un pachet de JavaScript care este inclus în proiectul dvs. Haiku, permițându-i să facă pe web folosind tehnologiile native HTML, CSS și JS.
Folosirea tehnologiilor web pentru publicare înseamnă că un proiect Haiku care este publicat poate rula oriunde codul dvs. utilizează orice browser modern. Echipa Haiku vă asigură că nu trebuie să vă gândiți la jucătorul în timp ce fac ridicarea greoaie și să oferiți fragmentele de cod pentru a include haiku-ul dvs. pentru diverse coduri de cod.
Publicarea proiectului dvs. este un clic pe un buton din partea dreaptă sus a aplicației. În spatele scenei, Haiku efectuează unele ridicări grele, împingând pe serverele git și publicând proiectul la npm, astfel încât este pregătit pentru ca un dezvoltator să instaleze, să abandoneze componenta în codul lor și să continue să ruleze. Spre deosebire de generatoarele de coduri (de când Haiku folosește componente), puteți păstra iterarea designului dvs. chiar și după ce face parte dintr-o bază de coduri! Tot ce rămâne rămâne să se predea unui dezvoltator printr-o singură legătură, Haiku se ocupă de restul.
Există, desigur, momente când aveți mai mult control; controlați cronologia bazată pe evenimente, schimbați modul în care dimensiunea componentei dvs. este dimensionată în container sau orice număr de acțiuni programatice. Pentru aceste cazuri speciale, puteți utiliza API-ul Haiku Player Developer.
Ca ce vezi? Credeți că acest lucru ar fi un plus de valoare pentru fluxul dvs. de lucru? Spuneți-ne în comentariile dvs. ce credeți și unde ați putea să vă vedeți folosind acest instrument minunat pentru a vă ajuta să vă creați dorințele de animație. Codificare fericită!
Primii 100 de cititori care vor cere o invitație la adresa http://haiku.ai/sign-up?r=3G2gn vor primi accesul prealabil la Haiku. se bucura!
Accentsconagua