Share
Med rörelse i ökningen bland webbutvecklare så är verktygen som hjälper till att effektivisera sin skapande. Haiku är en fristående applikation som är tillgänglig för Mac-användare och också tillgänglig som ett in-browser-alternativ. Genom sin egen beskrivning "Design fantasifulla användargränssnittskomponenter som klickar in i en webapp. Kod valfritt. "I den här artikeln kommer vi att titta över det här nya verktyget tillgängligt för rörelseälskare av alla slag; låt oss dyka in och utforska allt som är haiku!
Grundare och Haiku-skaparen Zack Brown satte upp sig för att skapa Haiku efter en omfattande karriär inom den digitala kreativa industrin där han bevittnade förstahand hur mycket tid missbrukades att konvertera visuella mönster till kod. Haiku gör det möjligt för konstruktörer, ingenjörer, marknadsförare, chefer och alla andra intressenter att skapa tillsammans istället för att alltid vara fast i "hand off" -läge.
Innan vi dyker in i Haiku fördjupade får vi en bättre uppfattning, visuellt, om vilken typ av resultat du kan förvänta dig.
Denna demonstration visar invecklade rörelser med avseende på typografi. Det påminner mycket om andra bibliotekseffekter som du kanske sett tidigare, som de som skapades med Mo.js.
Haiku är byggt helt och hållet med webbtekniker som JavaScript, TypeScript, WebSockets, SVG, DOM internals, React och Git för att spåra Haikus framsteg. Framtida mål är att tillåta användandet av din egen Git-infrastruktur i stället för Haikus; git hosting är bara ett av de arbetsflöden som erbjuds.
"WildLoader" -demo ovan är ett annat exempel taget från gallerisidan och är ett projekt som tillhandahålls av Haiku. För den här demo använder jag CodePen för att visa upp och ja, det är allt SVG.
Med Haiku har du befogenhet att:
För att få ut det mesta av Haiku behöver du Sketch installerat. I sin nuvarande inkarnation har Haiku inte några egna ritverktyg och stöder rik integration med Sketch av just denna anledning. Det finns framtida planer för att stödja andra ritverktyg som Adobe Photoshop och Illustrator och så småningom också några egna.
Bakom kulisserna omvandlar Haiku all din Sketchdesigns konstkort, sidor och skivor till enskilda tillgångar som kan vara självständigt sammansatta och animerade på scenen. Du kanske frågar dig själv "Vad händer om du behöver göra en ändring i Sketch-filen?" Det är bra! Haiku tar hand om att föra dina nya förändringar i Haiku och på alla tillgångar du har lagt på scenen.
CLI (Command Line Interface) är en valfri del av Haiku, men det öppnar upp många kraftfulla funktioner. till exempel genom att använda CLI för att importera ett Haiku-projekt till en befintlig kodbas eller du kan använda CLI för att direkt klona ett Haiku-projekt till din dator och få åtkomst till din kod för att redigera manuellt. Du kan även springa haiku inloggning att logga in interaktivt från kommandoraden och respektive du kan också köra haiku logout att logga ut. Snart kommer du att kunna installera CLI direkt från npm, med hjälp av npm installera -g @ haiku / cli.
När du först öppnar Haiku får du tre olika demoprojekt som är avsedda för lärande. Den som jag använde med titeln "Moto" är en scen som visar en motorcyklist som rider längs en bakgrund av berg medan elementen passerar av ryttaren i det verkliga livet - liknande mode.
Applikationsgränssnittet innehåller en visuell tidslinje för varje element eller nyckelram för scenen. Du kan interagera med denna visuella tidslinje för att finjustera dina animeringar och få ett visuellt resultat av förändringarna.
Varje komponent du gör i Haiku optimeras automatiskt för produktion. Det är inte ett prototyperverktyg. Haiku anser att kreativa lag borde spendera mindre tid att göra bortkastade prototyper och mer tidsköp. Under huven är varje Haiku-komponent ren JavaScript-kod som du alltid kan redigera utan att bryta länken till källdesignen. Borta är det dags att omarbeta din handgjorda kod, eftersom nya designändringar kommer in. Haiku erbjuder även ett kraftfullt API för att koppla upp dina komponenter till extern affärslogik.
I framtiden kan du förvänta dig att se andra funktioner som realtidssamarbete, förgrening, delning av utkast, in-context-kommentar och mycket mer.
Den visuella tidslinjen är en väldigt viktig del av produkten, och det är mycket bra med min erfarenhet att använda den. Jag tycker att det är extremt kraftfullt att varje element kan utökas eller kollapsas för att borra i någon egendom som rotation, placera eller skala och var och en av dessa egenskaper kan animeras separat med nyckelbilder och tweens för varje element. Kombinera allt det med möjligheten att välja olika lättnadskurvor för varje tween och alla inslagna i en intuitiv och polerad UX. Så mycket fantastiskt!
Egenskapsinmatningar inom tidslinjen kan innehålla mer än bara enkla värden. Användare kan integrera utdrag av kod som heter uttryck. Det här är väldigt mycket i mode med Microsoft Excel; starta ditt värde för inmatning av egendom med en är lika med tecken och inmatningen kommer att inse att du skriver ett uttryck. Uttryck är koduttag som lägger till dynamiskt beteende i egenskaperna inom din animering.
Varje Haiku-projekt du skapar kan ha sin egen samling av interna tillstånd. Dessa data är speciella för din komponent som en metod att "kalla" dem i dina expressionsfunktioner så att du kan skapa komplext och dynamiskt beteende. Du kan när som helst få tillgång till ett statligt värde via de anpassade tidslinjeuttryckningarna genom att skriva statens namn.
Staterna är hur du arbetar med mock data i Haiku. Om du till exempel vill skapa en datavisualisering där en serie punkter animeras baserat på en rad data. Med hjälp av stater och uttryck kan du visuellt konfigurera dina animeringar och sedan testa dem med mock data inuti Haiku. När du är redo att fästa ditt projekt i en kodbas är dessa "mock states" redo att acceptera verkliga data.
Om du använder Haikus valfria React-adapter, är varje stat i Haiku automatiskt adresserbar som React-egenskap. Dra upp dina data från React in i Haiku-komponenten och voila! Dina motiv lever i din app med levande data.
När du äntligen är redo att skicka ett Haiku-projekt kan du publicera med hjälp av Haiku Player. Den här spelaren är inte en webbläsarplugg, det är mer en bunt JavaScript som ingår i ditt Haiku-projekt, vilket gör det möjligt att göra det på webben med hjälp av den inbyggda tekniken HTML, CSS och JS.
Att använda webbteknologi för publicering innebär att ett Haiku-projekt som publiceras kan springa var som helst med din kod med någon modern webbläsare. Haiku-laget ser till att du inte behöver tänka på spelaren, eftersom de gör tunga lyft och tillhandahåller kodsekvenserna för att inkludera din Haiku för kodbaser av olika slag.
Publicera ditt projekt är ett klick på en knapp längst upp till höger om appen. Bakom kulisserna utför Haiku en del tung lyftning, driver till git-servrar och publicerar projektet till npm så det är klart för en utvecklare att installera, släpp komponenten i sin kod och fortsätt springa. Till skillnad från kodgeneratorer (eftersom Haiku använder sig av komponenter) får du hålla iterera på din design även efter att den är en del av en kodbas! Allt som återstår är att lämna ut till en utvecklare via en enda länk, hanterar Haiku resten.
Det finns naturligtvis ögonblick när du längtar efter mer kontroll. kontrollera tidslinjen baserat på händelser, ändra hur din komponent är stor i behållaren eller något antal programmatiska åtgärder. För dessa speciella fall kan du utnyttja Haiku Player Developer API.
Gilla vad du ser? Tror det att detta skulle vara ett värdefullt tillägg till ditt arbetsflöde? Låt oss veta i kommentarerna vad du tycker och var du kunde se dig själv med hjälp av detta underbara verktyg för att hjälpa till att bygga dina animationsbehov. Lycklig kodning!
De första 100 läsarna att begära en inbjudan på denna URL http://haiku.ai/sign-up?r=3G2gn kommer att ges tidig tillgång till Haiku. Njut av!
Accentsconagua