Share
Mit zunehmender Bewegung unter den Web-Entwicklern sind auch die Tools, die dazu beitragen, die Erstellung zu rationalisieren. Haiku ist eine eigenständige Anwendung, die für Mac-Benutzer verfügbar ist und auch als Option im Browser verfügbar ist. Mit seiner eigenen Beschreibung „Gestalten Sie einfallsreiche UI-Komponenten, die in jede Web-App einrasten. Code optional. “In diesem Artikel werden wir diese neuen Werkzeuge für Bewegungsliebhaber aller Art betrachten. Tauchen wir ein und erkunden Sie alles, was Haiku ist!
Der Gründer und Haiku-Schöpfer Zack Brown gründete Haiku nach einer langen Karriere in der digitalen Kreativbranche, in der er aus erster Hand erlebte, wie viel Zeit missbraucht wurde, um visuelle Designs in Code zu konvertieren. Haiku ermöglicht es Designern, Ingenieuren, Vermarktern, Managern und allen anderen Stakeholdern, gemeinsam zu kreieren, anstatt für immer im Übergabemodus hängen zu bleiben.
Bevor wir uns eingehender mit Haiku beschäftigen, sollten wir uns visuell eine bessere Vorstellung von dem Ergebnis machen, das Sie erwarten können.
Diese Demo zeigt komplizierte Bewegungen in Bezug auf Typografie. Es erinnert sehr an andere Bibliothekseffekte, die Sie vielleicht schon einmal gesehen haben, beispielsweise die mit Mo.js erstellten.
Haiku basiert vollständig auf Web-Technologien wie JavaScript, TypeScript, WebSockets, SVG, DOM-Interna, React und Git, um den Fortschritt von Haiku zu verfolgen. Zukünftige Ziele sind die Verwendung der eigenen Git-Infrastruktur anstelle von Haiku. Git Hosting ist nur einer der angebotenen Workflow-Services.
Die obige Demo "WildLoader" ist ein weiteres Beispiel aus der Galerieseite und ist ein von Haiku bereitgestelltes Projekt. Für diese Demo benutze ich CodePen, um zu zeigen, und ja, es ist alles SVG.
Mit Haiku können Sie:
Um das Beste aus Haiku herauszuholen, muss Sketch installiert sein. In seiner aktuellen Version verfügt Haiku über keine eigenen Zeichenwerkzeuge und unterstützt aus diesem Grund die umfassende Integration mit Sketch. Es gibt Pläne für die Zukunft, andere Zeichenwerkzeuge wie Adobe Photoshop und Illustrator zu unterstützen, und möglicherweise eigene Zeichensätze zu verwenden.
Hinter den Kulissen konvertiert Haiku alle Art Boards, Seiten und Slices Ihres Sketch-Designs in einzelne Elemente, die auf der Bühne unabhängig voneinander zusammengestellt und animiert werden können. Sie fragen sich vielleicht: "Was ist, wenn Sie die Sketch-Datei ändern müssen?" Haiku sorgt dafür, dass Ihre neuen Änderungen in Haiku und in alle Assets übernommen werden, die Sie auf der Bühne platziert haben.
Das CLI (Command Line Interface) ist ein optionaler Bestandteil von Haiku, bietet jedoch viele leistungsstarke Funktionen. B. mithilfe der CLI ein Haiku-Projekt in eine vorhandene Codebase importieren, oder Sie können die CLI verwenden, um ein Haiku-Projekt direkt auf Ihrem Computer zu klonen und auf Ihren Code zuzugreifen, um manuell bearbeitet zu werden. Sie können sogar laufen Haiku-Login Um sich interaktiv von der Kommandozeile aus anzumelden, können Sie auch laufen Haiku-Abmeldung sich ausloggen Bald können Sie die CLI direkt von npm aus installieren npm install -g @ haiku / cli.
Wenn Sie Haiku zum ersten Mal öffnen, erhalten Sie drei verschiedene Demoprojekte, die zu Lernzwecken zur Verfügung stehen. Das von mir verwendete Motiv "Moto" ist eine Szene, in der ein Motorradfahrer auf einer Bergkulisse unterwegs ist, während die Elemente im wahrsten Leben an dem Fahrer vorbeifahren. wie Mode.
Die Benutzeroberfläche der Anwendung enthält eine visuelle Zeitleiste für jedes Element oder jedes Keyframe der Szene. Sie können mit dieser visuellen Zeitleiste interagieren, um Ihre Animationen zu optimieren und ein visuelles Ergebnis der Änderungen zu erhalten.
Jede Komponente, die Sie in Haiku herstellen, wird automatisch für die Produktion optimiert. Es ist kein Prototyping-Tool. Haiku glaubt, dass Kreativteams weniger Zeit damit verbringen müssen, wegwerfbare Prototypen herzustellen und mehr Zeit für den Versand zu haben. Unter der Haube ist jede Haiku-Komponente reiner JavaScript-Code, den Sie jederzeit von Hand bearbeiten können, ohne die Verknüpfung zum Quelldesign zu unterbrechen. Der Tag, an dem Sie Ihren handgefertigten Code überarbeiten und neue Designänderungen vornehmen, ist vorbei. Haiku bietet sogar eine leistungsstarke API für die Verdrahtung Ihrer Komponenten mit externer Geschäftslogik.
In der Zukunft können Sie weitere Funktionen erwarten, z. B. kollaboratives Editieren in Echtzeit, Verzweigen, Freigeben von Entwürfen, Kommentieren im Kontext und vieles mehr.
Die visuelle Zeitleiste ist ein sehr zentraler Bestandteil des Produkts und ist aus meiner Erfahrung sehr gut gemacht. Ich finde es extrem mächtig, dass jedes Element erweitert oder reduziert werden kann, um in eine Eigenschaft wie z Drehung, Position oder Rahmen Jede dieser Eigenschaften kann separat mit Keyframes und Tweens für jedes Element animiert werden. Kombinieren Sie all dies mit der Option, verschiedene Beschleunigungskurven für jedes Tween und alle in einer intuitiven und ausgefeilten UX zu wählen. So viel geil!!
Eigenschaftseingaben innerhalb der Zeitleiste können mehr als nur einfache Werte enthalten. Benutzer können Code-Codefragmente integrieren Ausdrücke. Dies ist bei Microsoft Excel sehr in Mode; Beginnen Sie Ihren Eigenschaftseingabewert mit einem Gleichheitszeichen und die Eingabe erkennt, dass Sie einen Ausdruck eingeben. Ausdrücke sind Codeausschnitte, die den Eigenschaften Ihrer Animation dynamisches Verhalten verleihen.
Jedes Haiku-Projekt, das Sie erstellen, kann über eine eigene Sammlung interner Zustände verfügen. Diese Daten sind speziell für Ihre Komponente als Methode, um sie in Ihre Ausdrucksfunktionen zu „laden“, sodass Sie komplexes und dynamisches Verhalten erstellen können. Sie können jederzeit über die benutzerdefinierten Timeline-Ausdrücke auf einen Statuswert zugreifen, indem Sie den Namen des Status eingeben.
Staaten sind, wie Sie mit Scheindaten in Haiku arbeiten. Wenn Sie beispielsweise eine Datenvisualisierung erstellen möchten, bei der eine Reihe von Punkten basierend auf einem Datenarray animiert wird. Mithilfe von Zuständen und Ausdrücken können Sie Ihre Animationen visuell einrichten und anschließend anhand von Daten in Haiku testen. Wenn Sie bereit sind, Ihr Projekt in eine Codebasis einzufügen, können diese "Scheinzustände" echte Daten akzeptieren.
Wenn Sie den optionalen React-Adapter von Haiku verwenden, kann jeder Bundesstaat in Haiku automatisch als React-Eigenschaft adressiert werden. Verbinden Sie Ihre Daten von React mit der Komponente Haiku und voila! Ihre Designs leben in Ihrer App komplett mit Live-Daten.
Wenn Sie endlich bereit sind, ein Haiku-Projekt zu versenden, können Sie es mit dem Haiku-Player veröffentlichen. Dieser Player ist kein Browser-Plugin, sondern ein JavaScript-Paket, das in Ihrem Haiku-Projekt enthalten ist und das Rendern im Web mithilfe der nativen Technologien von HTML, CSS und JS ermöglicht.
Die Verwendung von Web-Technologien für die Veröffentlichung bedeutet, dass ein veröffentlichtes Haiku-Projekt überall dort ausgeführt werden kann, wo der Code mit einem modernen Browser ausgeführt wird. Das Haiku-Team sorgt dafür, dass Sie nicht an den Spieler denken müssen, da er schwer zu heben ist, und stellt Ihnen die Code-Schnipsel zur Verfügung, mit denen Sie Ihr Haiku für Codebasen verschiedener Arten verwenden können.
Das Veröffentlichen Ihres Projekts erfolgt durch Klicken auf eine Schaltfläche oben rechts in der App. Hinter den Kulissen führt Haiku einiges an, indem er auf git-Server pusht und das Projekt in npm veröffentlicht. So kann der Entwickler die Komponente installieren, die Komponente in ihren Code einfügen und weiter laufen lassen. Im Gegensatz zu Codegeneratoren (da Haiku Komponenten verwendet) können Sie Ihr Design auch dann weiter durchlaufen, wenn es Teil einer Codebase ist! Alles, was bleibt, ist, über einen einzigen Link an einen Entwickler zu übergeben, den Rest übernimmt Haiku.
Natürlich gibt es Momente, in denen Sie nach mehr Kontrolle streben. Steuern Sie die Zeitleiste basierend auf Ereignissen, ändern Sie die Größe Ihrer Komponente innerhalb des Containers oder eine beliebige Anzahl programmgesteuerter Aktionen. Für diese speziellen Fälle können Sie die Haiku Player Developer API nutzen.
Wie was Sie sehen? Denken Sie, dies wäre eine wertvolle Ergänzung Ihres Workflows? Teilen Sie uns in den Kommentaren mit, was Sie denken und wo Sie sich selbst mit diesem wunderbaren Werkzeug sehen könnten, um Ihre Animationswünsche zu verbessern. Glückliche Kodierung!
Die ersten 100 Leser, die eine Einladung unter dieser URL http://haiku.ai/sign-up?r=3G2gn beantragen, erhalten einen frühen Zugang zu Haiku. Genießen!
Accentsconagua