Share
Les développeurs Web ayant de plus en plus de mouvement, il en va de même pour les outils qui aident à rationaliser sa création. Haiku est une application autonome disponible pour les utilisateurs de Mac et également disponible en option dans le navigateur. Selon sa propre description, «Concevez des composants d’interface utilisateur imaginatifs qui s’intègrent parfaitement dans une application Web. Code facultatif. »Dans cet article, nous allons examiner ce nouvel outil disponible pour les amateurs de mouvement de toutes sortes; allons plonger et explorer tout ce qui est Haiku!
Le fondateur et créateur de Haiku, Zack Brown, a décidé de créer Haiku après une longue carrière dans l'industrie de la création numérique, où il a pu constater combien de temps avait été mal utilisé pour convertir des conceptions visuelles en code. Haiku permet aux concepteurs, aux ingénieurs, aux spécialistes du marketing, aux gestionnaires et à tous les autres acteurs de créer ensemble au lieu d'être bloqués pour toujours.
Avant de plonger dans Haiku en profondeur, donnons-nous une meilleure idée visuelle du type de résultat final auquel vous pouvez vous attendre..
Cette démo présente des mouvements complexes en ce qui concerne la typographie. Cela rappelle beaucoup d'autres effets de bibliothèque que vous avez peut-être déjà vus, tels que ceux créés avec Mo.js.
Haiku est entièrement construit à l'aide de technologies Web telles que JavaScript, TypeScript, WebSockets, SVG, les composants internes du DOM, React et Git afin de suivre les progrès de Haiku. Les objectifs futurs sont de permettre l’utilisation de votre propre infrastructure Git au lieu de celle de Haiku; L'hébergement git n'est qu'un des services de flux de travail offerts.
La démo «WildLoader» ci-dessus est un autre exemple tiré de la page de la galerie et est un projet fourni par Haiku. Pour cette démonstration, j'utilise CodePen comme vitrine et oui, tout est en SVG.
Avec Haiku, vous aurez le pouvoir de:
Pour tirer le meilleur parti de Haiku, Sketch doit être installé. Dans sa version actuelle, Haiku ne possède aucun de ses propres outils de dessin et prend en charge une intégration poussée avec Sketch pour cette raison même. Il est prévu de prendre en charge d’autres outils de dessin, tels que Adobe Photoshop et Illustrator, et d’avoir certains de ses propres outils..
En coulisse, Haiku convertit tous les planches, pages et découpes artistiques de votre conception Sketch en éléments individuels pouvant être composés et animés de manière indépendante sur scène. Vous vous demandez peut-être «Et si vous deviez modifier le fichier Sketch?», C'est bon! Haiku prend en charge l’introduction de vos nouvelles modifications dans Haiku et sur tous les actifs que vous avez placés sur la scène..
La CLI (interface de ligne de commande) est une partie optionnelle de Haiku, mais elle offre de nombreuses fonctionnalités puissantes. Par exemple, utilisez la CLI pour importer un projet Haiku dans une base de code existante ou utilisez la CLI pour cloner directement un projet Haiku sur votre ordinateur et accéder à votre code pour le modifier manuellement. Vous pouvez même courir connexion haiku pour vous connecter de manière interactive à partir de la ligne de commande et vous pouvez également exécuter le haïku se déconnecter se déconnecter. Bientôt, vous pourrez installer la CLI directement à partir de npm, en utilisant npm install -g @ haiku / cli.
Lorsque vous ouvrez Haiku pour la première fois, vous obtiendrez trois projets de démonstration différents à des fins d’apprentissage. Celui que j’ai utilisé, intitulé «Moto», est une scène représentant un motocycliste chevauchant un paysage de montagnes alors que les éléments passent devant le coureur dans la vraie vie- comme la mode.
L'interface de l'application contient un scénario visuel pour chaque élément ou image clé de la scène. Vous pouvez interagir avec cette chronologie visuelle afin d'affiner vos animations et d'obtenir un résultat visuel des modifications..
Chaque composant fabriqué à Haiku est automatiquement optimisé pour la production. ce n'est pas un outil de prototypage. Haiku pense que les équipes créatives devraient passer moins de temps à fabriquer des prototypes jetables et plus de temps à expédier. Sous le capot, chaque composant Haiku est un code JavaScript propre que vous pouvez toujours éditer à la main sans rompre le lien avec le dessin source. Il est révolu le temps de retravailler votre code artisanal lorsque de nouvelles modifications de conception entrent en jeu. Haiku fournit même une puissante API permettant de relier vos composants à une logique métier externe..
A l'avenir, vous pouvez vous attendre à voir d'autres fonctionnalités telles que l'édition collaborative en temps réel, la création de branches, le partage de brouillons, la commentaire en contexte, etc..
La chronologie visuelle est une partie très centrale du produit et, selon mon expérience, elle est vraiment bien faite. Je trouve extrêmement puissant que chaque élément puisse être agrandi ou réduit pour explorer n'importe quelle propriété telle que rotation, position ou échelle et chacune de ces propriétés peut être animée séparément avec des images clés et des interpolations pour chaque élément. Combinez tout cela avec la possibilité de choisir différentes courbes d’atténuation pour chaque interpolation, le tout enveloppé dans un UX intuitif et poli. Tellement génial!
Les entrées de propriété dans la chronologie peuvent contenir plus que de simples valeurs. Les utilisateurs peuvent intégrer des extraits de code appelé expressions. C'est très à la mode avec Microsoft Excel; commencez votre propriété valeur d'entrée avec un signe égal et l'entrée reconnaîtra que vous tapez une expression. Les expressions sont des extraits de code qui ajoutent un comportement dynamique aux propriétés de votre animation..
Chaque projet Haiku que vous créez peut avoir sa propre collection d'états internes. Ces éléments de données sont spéciaux pour votre composant en tant que méthode pour les «invoquer» dans vos fonctions d'expression, ce qui vous permet de créer un comportement complexe et dynamique. Vous pouvez accéder à une valeur d'état à tout moment via les expressions de scénario personnalisées en saisissant le nom de l'état..
Les États sont votre façon de travailler avec des données fictives à Haiku. Par exemple, si vous souhaitez créer une visualisation de données dans laquelle une série de points sont animés en fonction d'un tableau de données. En utilisant des états et des expressions, vous pouvez configurer visuellement vos animations, puis les tester avec des données fictives dans Haiku. Lorsque vous êtes prêt à intégrer votre projet dans une base de code, ces «états fictifs» sont prêts à accepter des données réelles..
Si vous utilisez l'adaptateur facultatif React de Haiku, chaque État de Haiku est automatiquement adressable en tant que propriété React. Câblez vos données de React dans le composant Haiku et le tour est joué! Vos conceptions vivent dans votre application avec des données en direct.
Lorsque vous êtes enfin prêt à envoyer un projet Haiku, vous pouvez le publier à l'aide du logiciel Haiku Player. Ce lecteur n'est pas un plugin de navigateur, mais un ensemble de JavaScript inclus dans votre projet Haiku, ce qui lui permet d'effectuer un rendu sur le Web en utilisant les technologies natives de HTML, CSS et JS..
L'utilisation des technologies Web pour la publication signifie qu'un projet publié par Haiku peut s'exécuter n'importe où votre code utilise un navigateur moderne. L’équipe Haiku veille à ce que vous n’ayez pas à penser au joueur car elle supporte de lourdes charges et fournit les extraits de code afin d’inclure votre Haiku pour les bases de codes de différents types..
La publication de votre projet est un clic sur un bouton en haut à droite de l'application. Dans les coulisses, Haiku effectue des tâches lourdes: il pousse sur des serveurs git et publie le projet dans npm afin qu'un développeur soit prêt à installer le composant dans son code et à continuer à l'exécuter. Contrairement aux générateurs de code (Haiku utilise des composants), vous pouvez continuer à itérer sur votre conception, même après son intégration dans une base de code! Tout ce qui reste à faire est de le céder à un développeur via un seul lien, Haiku se charge du reste.
Il y a bien sûr des moments où vous avez besoin de plus de contrôle; contrôler la chronologie en fonction des événements, changer la façon dont votre composant est dimensionné dans son conteneur ou n'importe quel nombre d'actions programmatiques. Pour ces cas particuliers, vous pouvez utiliser l'API Haiku Player Developer..
Aimez ce que vous voyez? Vous pensez que cela constituerait un ajout précieux à votre flux de travail? Faites-nous savoir dans les commentaires ce que vous pensez et où vous pourriez vous voir en utilisant ce merveilleux outil pour vous aider à concrétiser vos désirs d'animation. Bonne codage!
Les 100 premiers lecteurs à demander une invitation à cette adresse http://haiku.ai/sign-up?r=3G2gn se verront accorder un accès anticipé à Haiku. Prendre plaisir!
Accentsconagua