利用Haiku在项目中添加Motion动效

文章分享自Nad Chishtie,点击查看原文

现代数字产品的一个共同设计目标是创造惊喜和取悦用户,而Motion设计可以成为你的武器库中最强大的那个工具。有趣的加载动画、舒适的反馈和恰当的转场动画引导,都是提升用户体验的好方法。

针对设计师如何在动效设计构建中找到最恰当的表现形式,Paul Stamatiou为我们做了很好的总结:

如果你是一个设计师,请学习运用Motion设计技巧。60fps的动画,你需要在Mock A和Mock B之间设计58帧。

——Paul Stamatiou@Stammy

遗憾的是,大多数现代设计工具和工作流程并不能够让设计者真正设计出这58帧。

当今流行的工作流往往围绕着创建一次性原型,用于与开发人员进行交流,然后后者费力地利用代码艰难地再现直到调试到视觉和使用上的最佳效果。

这不仅浪费时间和资源,而且过程是如此的疲惫不堪,甚至经验丰富的设计师和开发人员最终都在“足够好”的实现层面上止步了。如果他们想在尝试完一个概念之后继续迭代他们的设计,他们又得从头开始。

与众不同的Haiku

 

 

在Haiku中编写的所有内容都是随时可发布的成品,一旦与代码库集成,你就可以继续在你的设计上进行迭代。少了一些没有必要承接转换。

 

用时间&空间两个维度思考物体运动

在我们撸起袖子使用Haiku之前,一个很有效的方法就是通过像动画师一样,用时间空间的二维方式思考一下如何将我们的设计转化为动画。

如果你刚接触Motion,一个简单的方法就是创建故事版。

 

 

故事板在20世纪30年代被华特迪士尼公司(Walt Disney Productions)推广,通过将故事记录为一个个序列的方式帮助动画师和导演进行沟通交流。在交互设计中,故事板可以帮助我们确定一下几点:

  • 需要什么元素;
  • 需要操控元素的哪些属性;
  • 我们将从哪些关键帧开始(稍后再讨论)。

 

举个例子,让我们尝试如果在Haiku中创建一个跳跃的球的动画。

从这个简单的故事板,我们可以定义:

  • 我们需要2个元素:球和影子。
  • 我们想要改变球的位置,球的大小和阴影的不透明度。
  • 我们需要至少3个关键帧来实现动画的无缝循环。

当创建故事板时,尽量不要钻进小细节里,很多灵感和创意都是发生在动画制作开始和迭代视觉效果的时候。所以动画雏形构建得差不多就可以开始了。

开始使用Haiku

如果不想看下面的gif教程的话,可以查看youtube视频教程

 

使用Sketch

在Haiku中,有两种方法可以使用sketch——你可以导入现有的sketch源文件,也可以从头开始创建新的设计元素。

如果你想要开始一个新的设计项目,最好的方法是在Haiku既有的样板文件中,双击进入后编辑。

你同样可以导入既有的Sketch和SVG文件。

 

Haiku通过查找画板和切片,并将它们十分智能地导入到你的库中作为独立的元素。在画出你的球和阴影之后,将形状转换成切片的最简单方法是在sketch中将它们标记为“Make Exportable”。

 

 

点击保存后,你的sketch切片元素将会出现在Haiku的库中:

你可以把元素拖拽进舞台:

在一个属性被编辑的同时,Haiku会自动创建一个关键帧,并在那里定位一个播放头的标记。和我们创建最原始故事板的方法如出一辙,你需要考虑在哪里设置关键帧。

时间轴里的属性可以直接被编辑,或者直接对舞台上的元素进行可视化操作:

现在关键帧 已经设置好了,让我们在时间轴上右击调出内置的补间动画库选定缓动形式,让这个两个关键帧之间产生圆滑的过渡效果。我将使用 Ease In →  Cubic and Ease Out → Cubic,但是我建议初学者可以多尝试不同的补间动画直到找到最适合你的那一个:

使用我们刚刚演示的基本技巧,可以很容易添加更多的细节:在时间轴上添加关键帧,以便在球接近地面时显示阴影;

并将球垂直压扁以模拟真实的物理材质:

 

点击发布自动生成一个唯一的URL用来分享给别人。

 

在Haiku中创建的一切都是纯粹的JS/CSS,随时可以嵌入任何web应用程序,使用Lottie提供原生渲染器更是能够对接iOS和Android项目。

 

看到这里你或许已经想跃跃欲试,创建自己的专属动画,如果你还没有安装Haiku,可以点击这里下载安装

另外你可以在以下社交分享网站中找到持续更新的相关内容:

刷牙君

View posts by 刷牙君
处女座设计师一枚,涉及的专业领域视觉,交互,前端。

1 Comment

  1. 刷牙君2018年3月20日

    Haiku手册有更多进阶教程https://docs.haiku.ai

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *