使用Hype进行动画制作的入门介绍

在一个网页中，如果多了一些动态元素的呈现，会使页面看起来更显得高大上一些。而Hype使用功能强大的动画系统，利用时间线录制功能，使制作者制作动画变得轻而易举。

下面小编就通过使用Hype 4，向大家介绍下Hype的动画制作系统及其简单使用。

一、动画制作界面

动画制作界面主要如下图1所示，具体作用下面一一为大家介绍。

1. 动画控件（从左到右）：跳转到开始处，上一帧，下一帧，播放/暂停。
2. 录制动画按钮。
3. 当前时间指示器，匹配时间光标，时间光标在第几秒处这里就显示第几秒。
4. 时间光标，表示当前动画的时间点。
5. 时标缩放滑块，可以缩小或者放大时间线。
6. 动画属性弹出菜单。
7. 动画效果弹出菜单。
8. 添加关键帧按钮。
9. 带有动画的时间线视图。
10. 运动路径切换按钮。

图1：动画制作界面

二、关键帧

关键帧（如图2红框）指定了属性在特定时间点的值，动画由两个关键帧组成，这两个关键帧定义了属性动画的开始和结束值。例如，在第一个关键帧处，设置元素透明度为0，在第二个关键帧处，设置透明度为100。那么动画的效果就是逐渐变透明，这就是动画制作的原理。

图2：关键帧

三、录制动画

录制是创建动画时自动生成关键帧的直观方法。只需单击动画界面中的“录制”按钮，移动时间光标，并操作场景中的元素或更改检查器中的属性。Hype就会自动进行动画的录制制作。

例如，设置矩形元素逐渐变大的动画，具体的操作步骤如下。

第一步，单击录制按钮打开录制，选择要设置动画的元素。

图3：选中元素录制动画

第二步，将时间光标向右移动并停在3秒刻度线处（不一定3秒，几秒可由用户自身需求而定），然后调整元素的大小，这时时间线上就会出现一条蓝色的直线，如下图4，单击并拖动蓝色线的起点或终点可以调整动画的时间。

图4：设置元素结束属性

好了，以上就是小编整理的关于使用Hype进行动画制作的基本介绍，之后还会有更多更有趣、有用的教程发布在城东书院，欢迎大家前往关注哦！