Share
Med bevegelse i økende grad blant webutviklere så er verktøyene som bidrar til å effektivisere etableringen. Haiku er en frittstående applikasjon tilgjengelig for Mac-brukere, og er også tilgjengelig som et nettleseralternativ. Med sin egen beskrivelse "Design fantasifulle brukergrensesnittkomponenter som knytter seg til en hvilken som helst webapp. Kode valgfritt. "I denne artikkelen vil vi se over dette nye verktøyet tilgjengelig for bevegelseselskere av alle slag; la oss dykke inn og utforske alt som er haiku!
Grunnlegger og Haiku-skaperen Zack Brown satte seg for å skape Haiku etter en omfattende karriere i den digitale kreative bransjen hvor han oppdaget førstehånds hvor mye tid ble misbrukt å konvertere visuelle design til kode. Haiku gjør det mulig for designere, ingeniører, markedsførere, ledere og alle andre interessenter å skape sammen i stedet for alltid å sitte fast i "hånd av" modus.
Før vi dykker inn i Haiku i dybden, får vi en bedre ide, visuelt, om hva slags sluttresultat du kan forvente.
Denne demonstrasjonen viser intrikate bevegelser med hensyn til typografi. Det minner veldig om andre bibliotekseffekter du kanskje har sett før, for eksempel de som ble opprettet med Mo.js.
Haiku er bygget helt ved hjelp av webteknologier som JavaScript, TypeScript, WebSockets, SVG, DOM internals, React og Git for å spore Haiku's fremgang. Fremtidige mål er å tillate bruken av din egen Git-infrastruktur i stedet for Haiku's; git hosting er bare en av arbeidsflytene som tilbys.
"WildLoader" -demoen ovenfor er et annet eksempel tatt fra gallerisiden og er et prosjekt levert av Haiku. For denne demoen bruker jeg CodePen til å vise frem og ja, det er alt SVG.
Med Haiku har du muligheten til å:
For å få mest mulig ut av Haiku trenger du Sketch installert. I sin nåværende inkarnasjon har Haiku ikke noen av sine egne tegneverktøy og støtter rik integrasjon med Sketch av denne grunn. Det er fremtidige planer om å støtte andre tegneverktøy som Adobe Photoshop og Illustrator og til slutt ha noe av seg selv også.
Bak kulissene konverterer Haiku alle Sketch-designens kunstbrett, sider og skiver til individuelle eiendeler som kan være selvstendig komponert og animert på scenen. Du kan spørre deg selv "Hva om du må gjøre en endring i Sketch-filen?" Det er greit! Haiku tar vare på å bringe dine nye endringer i Haiku og på alle eiendeler du har lagt på scenen.
CLI (Command Line Interface) er en valgfri del av Haiku, men det åpner opp mange kraftige funksjoner; for eksempel ved å bruke CLI for å importere et Haiku-prosjekt inn i en eksisterende kodebase, eller du kan bruke CLI til å klone et Haiku-prosjekt direkte til datamaskinen din og få tilgang til koden din for å redigere manuelt. Du kan til og med løpe haiku logg inn å logge inn interaktivt fra kommandolinjen og henholdsvis du kan også kjøre haiku logout å logge ut. Snart vil du kunne installere CLI direkte fra npm, ved hjelp av npm installer -g @ haiku / cli.
Når du åpner Haiku i første omgang, får du tre forskjellige demoprosjekter som er tilveiebrakt for læringsformål. Den jeg brukte "Moto", er en scene som viser en motorsyklist som rider langs bakken av fjell mens elementene går forbi rytteren i sann livs- som mote.
Programmets grensesnitt inneholder en visuell tidslinje for hvert element eller keyframe for scenen. Du kan samhandle med denne visuelle tidslinjen for å finjustere animasjonene dine og få et visuelt resultat av endringene.
Hver komponent du lager i Haiku, blir automatisk optimalisert for produksjon; det er ikke et prototypingsverktøy. Haiku mener at kreative lag skal bruke mindre tid på å lage bortkastede prototyper og mer tidsforsendelse. Under hetten er hver Haiku-komponent ren JavaScript-kode som du alltid kan håndredigere uten å koble linken til kildesignalet. Gone er dagene med å omarbeide den håndlagde koden din etter hvert som nye designendringer kommer inn. Haiku gir enda en kraftig API for å koble opp komponentene til ekstern forretningslogikk.
I fremtiden kan du forvente å se andre funksjoner som samarbeid i sanntid, forgrening, deling av utkast, kommentarer i sammenheng og mye mer.
Den visuelle tidslinjen er en svært sentral del av produktet, og fra min erfaring er det veldig bra gjort. Jeg finner det ekstremt kraftig at hvert element kan utvides eller kollapses for å bore inn i en hvilken som helst egenskap som rotasjon, stilling eller skala og hver av disse egenskapene kan animeres separat med keyframes og tweens for hvert element. Kombiner alt det med muligheten til å velge forskjellige lettelse kurver for hver tween og alt pakket inn i en intuitiv og polert UX. Så mye kjempebra!
Egenskapsinnganger innenfor tidslinjen kan inneholde mer enn bare enkle verdier. Brukere kan integrere utdrag av kode som heter uttrykkene. Dette er veldig mye på mote med Microsoft Excel; Start inntastingsverdien din med en ligner tegn og inngangen vil gjenkjenne at du skriver et uttrykk. Uttrykk er kodestykker som legger til dynamisk oppførsel til egenskapene i animasjonen din.
Hvert Haiku-prosjekt du lager, kan ha sin egen samling av interne tilstander. Disse dataene er spesielle for komponenten din som en metode for å "kalle" dem inn i uttrykksfunksjonene, slik at du kan lage komplisert og dynamisk oppførsel. Du kan når som helst få tilgang til en statlig verdi via de egendefinerte tidslinjeprøven ved å skrive statens navn.
Stater er hvordan du jobber med spotdata i Haiku. For eksempel, hvis du ønsket å lage en datavisualisering der en serie poeng er animert basert på en rekke data. Ved hjelp av stater og uttrykk kan du visuelt sette opp animasjonene dine og deretter teste dem med spotdata i Haiku. Når du er klar til å snap prosjektet ditt i en kodebase, er disse "mock states" klar til å akseptere ekte data.
Hvis du bruker Haikus valgfrie React-adapter, er hver stat i Haiku automatisk adresserbar som React-egenskap. Koble dataene dine fra React til Haiku-komponenten og voila! Dine design lever i appen din komplett med live data.
Når du endelig er klar til å sende et Haiku-prosjekt, kan du publisere ved hjelp av Haiku Player. Denne spilleren er ikke et nettleserplugg, det er mer en bunke med JavaScript som følger med Haiku-prosjektet, slik at det kan gjengis på nettet ved hjelp av den innfødte teknologien til HTML, CSS og JS.
Ved hjelp av webteknologi for publisering betyr et Haiku-prosjekt som publiseres, kan løpe hvor som helst koden din bruker en hvilken som helst moderne nettleser. Haiku-laget sørger for at du ikke trenger å tenke på spilleren som de gjør tung løft og gi kodeutklippene for å inkludere Haiku for kodebaser av forskjellige slag.
Publisering av prosjektet ditt er et klikk på en knapp øverst til høyre i appen. Bak kulissene utfører Haiku noe tungt løft, presser på å gi servere og publiserer prosjektet til npm, så det er klart for en utvikler å installere, slippe komponenten i koden og fortsett å løpe. I motsetning til kodegeneratorer (siden Haiku benytter seg av komponenter), får du stadig å gjenkjenne designet ditt selv om det er en del av en kodebase! Alt som gjenstår, er å overlate til en utvikler via en enkelt kobling, Haiku håndterer resten.
Det er selvfølgelig øyeblikk når du ønsker mer kontroll; kontroller tidslinjen basert på hendelser, endre måten komponenten er dimensjonert i sin container eller et hvilket som helst antall programmatiske handlinger. For disse spesielle tilfellene kan du utnytte Haiku Player Developer API.
Liker du hva du ser? Tror dette ville være et verdifullt tillegg til arbeidsflyten din? Gi oss beskjed i kommentarene dine, og du kan se deg selv ved hjelp av dette fantastiske verktøyet for å bidra til å bygge dine animasjonsbehov. Glad koding!
De første 100 leserne til å be om en invitasjon på denne nettadressen http://haiku.ai/sign-up?r=3G2gn vil få tidlig tilgang til Haiku. Nyt!
Accentsconagua