haiku英文诗例子
随着Web开发人员的兴起，有助于简化其创建的工具也越来越多。 Haiku是可供Mac用户使用的独立应用程序，也可以作为浏览器内选项使用。 用自己的描述“设计可想象到任何Web应用程序中的具有想象力的UI组件。 代码可选。” 在本文中，我们将介绍适用于各种运动爱好者的新工具。 让我们潜入并探索Haiku！
ku句的诞生
Haiku的创始人兼创始人Zack Brown在数字创意行业从事了广泛的职业之后便着手创建Haiku，他亲眼目睹了将视觉设计转换为代码所浪费的时间。 Haiku使设计师，工程师，营销人员，经理和所有其他利益相关者可以共同创造，而不必永远陷入“交手”模式。
概述
在深入探讨Haiku之前，让我们从视觉上更好地了解您可以预期的最终结果。
该演示展示了有关排版的复杂动作。 这非常让人想起您以前可能看到的其他库效果，例如使用Mo.js创建的效果 。
Haiku完全使用JavaScript，TypeScript，WebSockets，SVG，DOM内部，React和Git等Web技术构建，以跟踪Haiku的进度。 未来的目标是允许使用您自己的Git基础结构而不是Haiku的基础结构。 git托管只是提供的工作流服务之一。
上面的“ WildLoader”演示是从图库页面获取的另一个示例，它是Haiku提供的项目。 在此演示中，我使用CodePen进行展示，是的，全部是SVG。
使用Haiku，您将可以：
- 使任何素描设计栩栩如生。
- 通过响应用户事件和数据来增加交互性。
- 将您的作品发布为干净的，可用于Web的组件。
- 仅用几行代码来嵌入您的组件。
素描+ Haiku
为了充分利用Haiku，您需要安装Sketch。 由于这个原因，Haiku目前没有任何绘图工具，并支持与Sketch的丰富集成。 将来有计划支持其他绘图工具，例如Adobe Photoshop和Illustrator，最终也将拥有一些工具。
在幕后，Haiku将您所有Sketch设计的画板，页面和切片转换为可以在舞台上独立合成和动画化的单个资产。 您可能会问自己“如果需要更改Sketch文件怎么办？” 没关系！ Haiku负责将您的新更改带入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项目都可以拥有自己的内部状态集合。 这些数据对于您的组件来说是特殊的，可以将它们“召唤”到表达式函数中，从而使您能够创建复杂的动态行为。 您可以通过自定义时间轴表达式随时输入状态名称来访问状态值。
状态是您在Haiku中处理模拟数据的方式。 例如，如果要创建数据可视化，其中将根据数据数组对一系列点进行动画处理。 使用状态和表达式，您可以直观地设置动画，然后在Haiku中使用模拟数据对其进行测试。 当您准备好将项目捕捉到代码库中时，这些“模拟状态”就可以接受实际数据了。
如果您使用的是Haiku的可选React适配器，则Haiku中的每个州都可以自动作为React属性进行寻址。 将您的数据从React连接到Haiku组件中，瞧！ 您的设计与实时数据一起存在于您的应用程序中。
出版Hai句项目
当您最终准备好交付Haiku项目时，可以使用Haiku Player进行发布。 该播放器不是浏览器插件，而是Haiku项目中附带JavaScript捆绑包，可使用HTML，CSS和JS的本机技术在Web上进行渲染。
使用网络技术进行发布意味着发布的Haiku项目可以使用任何现代浏览器在您的代码执行的任何地方运行。 Haiku团队确保您不必为播放器而思考，因为他们会繁重地工作，并提供代码片段以将Haiku包含在各种类型的代码库中。
单击应用程序右上方的按钮即可发布项目。 在幕后，Haiku进行了一些繁重的工作，将其推送到git服务器并将项目发布到npm，以便开发人员可以安装，将组件放入其代码中并继续运行。 与代码生成器不同（因为Haiku使用了组件），即使代码已经成为代码库的一部分，您也可以继续迭代设计！ 剩下的就是通过单个链接移交给开发人员，剩下的事情由Haiku处理。
当然，有些时候您渴望获得更多控制权； 根据事件控制时间轴，更改组件在其容器中的大小调整方式或任何数量的编程操作。 对于这些特殊情况，您可以利用Haiku Player开发人员API 。
结论
喜欢你看到的吗？ 认为这对您的工作流程将是有价值的补充吗？ 在评论中让我们知道您的想法以及使用此出色工具帮助您建立动画愿望的地方。 编码愉快！
在此URL http://haiku.ai/sign-up?r=3G2gn上请求邀请的前100位读者将获得早期访问Haiku的权限。 请享用！
haiku英文诗例子
326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
