hype3 响应布局_使用Hype 3的基于时间轴的Web动画

hype3 响应布局

Tumult的Hype 3是用于创建HTML5动画的OS X应用程序。 如果您曾经使用过Flash的标志性时间轴工具，那么Hype 3的界面似乎会非常熟悉。 在本教程中，我们将快速熟悉该应用程序，然后使用可用的工具制作基本的Material Design动画。

$$的

在撰写本文时，Hype 3的标准应用程序售价为49.99美元，或者，如果您需要更多高级功能，Hype 3 Professional的售价为99.99美元。 您可以下载14天试用版，以进行后续操作。

而且，对不起，这仅是Mac。

接口

作为Mac用户，您将完全熟悉应用程序的布局。 我们正在使用Hype 3标准版（专业版具有更黑，更完整的UI），因此让我们遍历主要部分：

1. 这是上部的工具栏，您可以在其中找到一些基本的控件和快速菜单。
2. 左侧边栏可以切换（可见或不可见）并显示场景。
3. 如您所料，中心区域是为舞台或画布保留的。
4. 右侧的检查器也可以切换，具有选项卡式界面，并且包含许多工具和选项。
5. 最后，也许最重要的是，时间轴和关键帧工具位于底部。

1.新文件

打开应用程序时，默认情况下会显示空白文档。 首先确定您想要的画布尺寸。

在“ 场景”选项卡下，您将看到一些用于设置当前场景的选项。 我选择将画布尺寸设置为600x400px。 完成此操作后，单击“ 背景”下的颜色选择器，并将其更改为＃424242。

注意 ：在本教程中，我们将只处理一个场景和一个时间轴，但是有可能有多个场景，多个时间轴并在所有场景之间切换。

2.一些对象

我们将为Google Material Design的“ 浮动操作按钮”之一设置动画，因此转到“ 元素”菜单图标并选择“ 椭圆” ：

使用鼠标光标在舞台上绘画-保持住的移动会将比例限制为一个圆（非常类似于任何图形应用程序）。 根据材料设计指南 ，较大的浮动动作按钮应为56px宽，图标为24px。 使您的数字与这些数字成比例：

提示 ：转到“ 视图”>“显示标尺” ，使标尺出现在舞台旁边。 将一些参考线从标尺拖到舞台上，以帮助您放置对象。

3.按钮颜色

选择椭圆后，可以在“ 元素”选项卡下更改其背景颜色（我从“材料设计”调色板中使用了＃00E676）并删除了其边框。

同样在“ 元素”选项卡下，您将看到可以向圆中添加阴影。 我给了我们5px的模糊效果，并将其在Y轴上移动了5px。 尽管您将无法选择任何混合模式，但其颜色为＃2E2E2E。 现在看起来非常“材料设计”，我想您会同意：

4. +

要在按钮上添加“加号”符号，我们可以打开一些选项。 我们可以使用绘图工具自己制作，但是工具有限（特别是如果您习惯使用Adobe Illustrator或Sketch的自由度）。 相反，我们将从Google手中获取SVG图标 。

选择“添加”图标，选择白色变体，然后下载。

现在，您可以将SVG文件直接拖动到文档中，这时它将被添加为图像层。

选中“ SVG”图标后，在“ 度量”选项卡下，确保它是正确的动画尺寸：

SVG局限性

我们的SVG图标尚未导入为可编辑矢量。 相反，如果查看“ 元素”选项卡，则会看到它是一个单独的资源，并被用作背景图像。 这意味着我们不能更改其颜色或其他类似的东西（可耻）。

同样，这种方法可能会在某些浏览器中引起问题，尽管Hype 3会警告您：

5.小组拥抱

与许多图形应用程序一样，您现在可以选择我们添加到时间线中的两个图层，然后转到“ 排列”>“分组”以更好地组织它们。 双击组图层名称以将其重命名：

6.让我们动起来！

Hype 3提供了两种使对象及其属性动画化的方法。 我们将从最简单的方法开始，所以继续并点击红色的大“ 记录”按钮：

现在，在时间轴上拖动播放头，在第24帧处停止。

注意 ：您会在时间轴上看到秒，每个秒包含30帧。

现在将播放头放在第24帧上，选择“添加”图标，转到右侧栏中的“ 度量”选项卡，然后找到“ 旋转”部分并将Z值更改为45°。 这将旋转图标，使其现在看起来像一个十字（×）。

现在，您可以再次单击“ 记录”按钮以结束该过程。

关键帧

Hype 3将在时间线的开头（这是开始状态）自动添加一个属性关键帧，并在动画的末尾（结束状态）自动添加一个属性关键帧。 在这种情况下，我们仅更改了“ 旋转角度（Z）”属性，因此这就是关键帧的显示位置。

如果按播放，或沿时间线拖动播放头，您将看到图标在两个属性状态之间平滑地动画。

时间轴比例

为了更容易查看时间轴上发生的事情，请使用右上角的滑块将时间轴比例值提高一些：

缓和

选择属性动画（单击它）后，我们可以更改动画上使用的缓动类型。 默认情况下，它将是“ 缓入” ，这意味着动画将缓慢开始，加速，然后再次减速直至结束。

7.另一个对象

我们还要动画什么？ 让我们看起来像我们的按钮正在执行某些操作–当按钮似乎已被单击时，我们将显示一个卡片。

使用“ 元素”菜单将矩形添加到舞台。 将图层命名为“ Card”。 给它提供背景色（＃757575）并将该层放置在按钮组下方。 将其放置在舞台的底部，并将其不透明度降低到0（这次我们将为几个属性设置动画）。

现在，这次不是点击Record ，而是要手动执行操作。 将播放头放在动画的开头，并选择“卡”层，然后在“ 不透明度”属性层上单击“ 添加关键帧 ”。 然后将播放头移到动画的末尾并添加另一个关键帧。

在最后一个关键帧上的“ 元素”选项卡中，为矩形设置100％的不透明度。 现在，您将在两个状态之间拥有一个整齐的动画。

8.另一个财产

对矩形的不透明度进行动画处理后，现在为其设置位置动画（我们希望其向上滑动）。 这是通过Origin（Top）属性实现的，因此重复我们刚才所做的过程，在动画的开头添加一个关键帧，在动画的末尾添加一个关键帧，然后更改矩形在最终关键帧上的位置。

您应该看到一条绘制的路径，指示矩形所采取的运动：

9.时间安排

此刻，场景一开始，所有事情都会同时发生，但是我们可以更改它。 让我们做一个短暂的延迟，然后图标快速旋转，然后卡片逐渐滑入。

拖动动画条在上方的时间轴上，以使它们对各个元素的时间不同：

注意 ：别忘了您可以更改缓动效果以产生不同的效果。 请参阅Google关于Authentic Motion的指南，以获取更多启发。

10.出口

动画制作完成后，转到“ 文件”>“导出为HTML5”或“ 文件”>“导出为电影” 。 可用的选项很容易解释。 选择输出带有HTML的目录以及JavaScript和SVG资产，动画GIF，MP4等。

请记住，导出为电影时，您添加的任何交互（在这种情况下我们都没有）可能会破坏序列。

11.轮到你了

是时候分配作业了！ 通过遵循本教程，您已经掌握了使动画更进一步的技能。 下载源代码 ，您将找到所需的入门文件，然后：

• 向按钮添加闪光灯； 快速消失的白色圆圈，带来点击效果
• 单击按钮后将其更改为红色
• 通过使所有内容恢复其原始状态来使动画更加圆滑！

结论

时间线对于在构建动画时可视化动画非常有帮助。 除了我们在这里所做的以外，Hype 3还允许进行各种交互，事件和时间轴控制（但这是另一本完整的教程）。 玩这些工具玩得开心，开始构建，并在评论中向我们展示您的想法！

翻译自: https://webdesign.tutsplus.com/tutorials/timeline-based-animation-for-the-web-with-hype-3--cms-24899

hype3 响应布局