基础教程：Hype 4时间线之录制关键帧

在上一章节，详细讲述了Hype交互动效制作软件时间线面板中通过在属性界面创建关键帧以及设置关键帧属性的方法来制作动画。

本章节继续讲述Hype 4 HTML5创作工具在时间线面板上如何使用录制的方法来制作动画以及关键帧和录制方法的结合来制作动画。

一、使用录制方法制作动画

在Hype软件的播放控制器中，有一个红色圆点，类似于摄像机中的录像按钮。使用这个录像按钮，结合时间指示器以及设置起始点和终点的对象属性，把起点和终点的属性变化过程录制下来，从而制作成动画效果，这个就是制作动画的录制方法。

1、创建对象

在场景页面上创建一个矩形对象。

图1：创建矩形对象

2、设置起点的对象属性

选择矩形对象，设置时间轴上时间指示器的位置为0。然后在元素面板设置矩形对象的背景颜色为橙色。

图2：设置起点及矩形的背景颜色

3、设置终点的对象属性

点击“录制”按钮，然后把时间指示器拖动到2s位置。然后把矩形对象的背景颜色改为深紫色。接着鼠标左键点击矩形并按着不放，水平牵引到右边并松开左键。再次点击“录制”按钮，动画制作完成。

图3：设置终点矩形属性

4、动画效果

点击“播放”按钮，动画效果与使用关键帧制作的动画效果一样。

图4：动画效果

二、录制法和关键帧结合制作动画

显然，使用录制法制作的动画与使用关键帧制作动画的效果是一样的，录制法却比关键帧法简单多了，避免了逐个属性创建关键帧。但是，要制作一个不连续的动画时，只使用录制法是无法制作出来的。

在上述案例的动画效果基础上，矩形移动到2s位置后，停止了1s后，又沿原来的路径返回的起点，并且所有属性恢复到初始状态。

使用录制法是无法实现这个动画效果的，这是就需要结合关键帧的方法来制作动画。想要查看详细案例，可点击查看：《车轮相机动画交互效果》。

图5：录制法制作的动画效果

1、添加关键帧

把时间指示器移动到3s的位置，在“属性”界面点击“原点（左）”右边的“+”按钮以及“背景颜色”的“+”按钮，在3s位置添加关键帧。

图6：在3s位置创建关键帧

2、录制法制作返回原点动画

点击“录制”按钮，把矩形牵引到左边起点位置，并把矩形的背景颜色改为橙色。再次点击“录制”按钮，停止录制，动画制作完成。

图7：录制返回原点动画

3、完整动画效果

图8：动画效果

三、小结

在使用Hype的时候，大多数情况都是使用录制法来制作动画的，因为它非常的简单并且容易上手，无需逐个属性添加关键帧。但也要注意，在一条时间线上如果有动画暂停，则需要通过设置重启动画的关键帧才能制作完整的动画。