2025年haiku英文诗例子_Haiku简介：设计和创建运动（代码可选）

大家好，我是讯享网，很高兴认识大家。

haiku英文诗例子

ku句的诞生

Haiku的创始人兼创始人Zack Brown在数字创意行业从事了广泛的职业之后便着手创建Haiku，他亲眼目睹了将视觉设计转换为代码所浪费的时间。 Haiku使设计师，工程师，营销人员，经理和所有其他利益相关者可以共同创造，而不必永远陷入“交手”模式。

概述

在深入探讨Haiku之前，让我们从视觉上更好地了解您可以预期的最终结果。

该演示展示了有关排版的复杂动作。这非常让人想起您以前可能看到的其他库效果，例如使用Mo.js创建的效果。

上面的“ WildLoader”演示是从图库页面获取的另一个示例，它是Haiku提供的项目。在此演示中，我使用CodePen进行展示，是的，全部是SVG。

使用Haiku，您将可以：

使任何素描设计栩栩如生。
通过响应用户事件和数据来增加交互性。
将您的作品发布为干净的，可用于Web的组件。
仅用几行代码来嵌入您的组件。

素描+ Haiku

Haiku + CLI

CLI（命令行界面）是Haiku的可选部分，但它开放了许多强大的功能。例如，使用CLI将Haiku项目导入到现有的代码库中，或者可以使用CLI将Haiku项目直接克隆到计算机上并访问代码以进行手动编辑。您甚至可以运行haiku login来从命令行以交互方式haiku login ，也可以分别运行haiku logout来注销。很快，您将可以使用npm install -g @haiku/cli直接从npm install -g @haiku/cli 。

你好Hai句

最初打开Haiku时，您将获得三个用于学习目的的演示项目。我使用的一个标题为“ Moto”的场景描绘了一个摩托车手沿着山脉的背景骑行，而元素以真实逼真的方式经过了骑手。

应用程序的界面包含场景的每个元素或关键帧的可视时间线。您可以与此视觉时间轴进行交互，以微调动画并获得更改的视觉结果。

您在Haiku中制作的每个组件都针对生产进行了自动优化。它不是原型工具。 Haiku认为，创意团队应该花更少的时间来制造可丢弃的原型，而要花更多的时间来交付。在后台，每个Haiku组件都是干净JavaScript代码，您可以随时对其进行手工编辑，而无需断开与源设计的链接。随着新的设计变更的出现，重新制作手工代码的日子已经一去不复返了。Haiku甚至提供了强大的API ，可将组件连接到外部业务逻辑。

讯享网

将来，您可以期望看到其他功能，例如实时协作编辑，分支，共享草稿，上下文中的注释以及更多功能。

时间轴

视觉时间表是产品的核心部分，根据我的使用经验，它确实做得很好。我发现每个元素都可以扩展或折叠以钻入任何属性（例如rotation ， position或scale非常强大，并且可以为每个元素分别使用关键帧和补间动画对每个属性进行动画处理。将所有内容与选项结合起来，为每个补间选择不同的缓动曲线，并全部包裹在直观且精致的UX中。太棒了！

时间轴内的属性输入不仅可以包含简单值。用户可以集成称为表达式的代码片段。这在Microsoft Excel中非常流行。以等号开头的属性输入值，输入将识别出您正在输入表达式。表达式是一些代码片段，它们向动画中的属性添加了动态行为。

您创建的每个Haiku项目都可以拥有自己的内部状态集合。这些数据对于您的组件来说是特殊的，可以将它们“召唤”到表达式函数中，从而使您能够创建复杂的动态行为。您可以通过自定义时间轴表达式随时输入状态名称来访问状态值。

出版Hai句项目

当您最终准备好交付Haiku项目时，可以使用Haiku Player进行发布。该播放器不是浏览器插件，而是Haiku项目中附带JavaScript捆绑包，可使用HTML，CSS和JS的本机技术在Web上进行渲染。

使用网络技术进行发布意味着发布的Haiku项目可以使用任何现代浏览器在您的代码执行的任何地方运行。 Haiku团队确保您不必为播放器而思考，因为他们会繁重地工作，并提供代码片段以将Haiku包含在各种类型的代码库中。

当然，有些时候您渴望获得更多控制权；根据事件控制时间轴，更改组件在其容器中的大小调整方式或任何数量的编程操作。对于这些特殊情况，您可以利用Haiku Player开发人员API 。

结论

喜欢你看到的吗？认为这对您的工作流程将是有价值的补充吗？在评论中让我们知道您的想法以及使用此出色工具帮助您建立动画愿望的地方。编码愉快！

在此URL http://haiku.ai/sign-up?r=3G2gn上请求邀请的前100位读者将获得早期访问Haiku的权限。请享用！

翻译自: https://webdesign.tutsplus.com/articles/introducing-haiku-design-and-create-motion-code-optional--cms-29520