实例：使用Hype制作一张动态电子贺卡（二）

一个好的静态场景决定了一个网页所能达到的下限，而一个好的动态效果则决定了一个网页所能达到的上限。在上一章节中，小编带大家制作好了电子贺卡的静态场景页面，而在本节中，将正式开始进入动态效果的制作，这是取决网页是否成功的核心所在。

下面，小编将在Mac系统上，使用Hype 4版本，开始下面教程的演示讲解。

一、心形上浮效果制作

从第一节的最终效果预览GIF可以看到，页面上有几个心形图形上浮的动态效果，并且是一直循环重复的。想要达到这个循环的效果，就需要使用到Hype的时间线循环功能，当然，后续的动态心形图形沿着Love曲线移动也是一样的原理，因此需要创建2条新的时间线，一条命名为“心形上浮”，另一条命名为“心形移动”。

第一步：创建时间线的操作很简单，点击主时间线旁如下图1红框的小按钮，然后选择“新时间线”，创建时间线，并按照上述进行命名即可。

图1：创建2条时间线

第二步：点击“元素”，然后选择图像，将心形图像导入到场景中，如下图2，然后使用快捷键“Command + C”快速复制出2个相同的心形图像。

图2：导入心形图像

第三步：使用鼠标调整心形图形的大小，最好设置为两大一小，这里小编设置的小心形宽度大小为42px，高度为39px；大心形宽度大小为61px，高度为57px，供大家参考。调整结束以后，拖动三个心形图案到场景的最下方，并分别拉到左边、中间和相对靠右的位置，具体位置如下图3红框所示。

图3：调整心形大小和位置

第四步：移动时间线到00:07:00的位置，点击“录制”按钮，开始录制动画，然后直接移动最左边的心形图像到终点的位置，此时的移动路径会呈现一条直线，鼠标拖动直线的某个点，可以将直线按照该点进行变形，通过拖拽下图4红色箭头所指的两个拖拽点，可以调整变形的幅度，将直线变为S型曲线，调整后，最终的移动路径如下图4所示。

图4：移动左边图形

第五步：取消“录制”按钮，然后移动时间到00:02:13秒，再点击“录制”按钮，移动时间线到00:09:22秒处，根据上述的方法，调整中间心形图形的移动路径如下图5，注意中间的心形是从右边飞出场景的。

图5：中间心形的移动路径

第六步：取消“录制”按钮，移动时间到00:04:00秒，再点击“录制”按钮，移动时间线到00:08:06秒处，根据上述的方法，调整右边心形图形的移动路径如下图6，右边的心形从场景中间飞出场景。

图6：右边心形的移动路径

当然，上述的移动路径也不一定需要根据小编的设置而来，大家也可以随性发挥，包括心形图形的个数和开始动画、结束动画的时间，都可以根据自身需要进行调整。

第七步：选中全部三个心形图像的时间线，然后点击下图7红框的按钮，将原本默认的“渐入/渐出”效果改为“渐出”，使得动画效果更生动更符合当前场景。

图7：调整动画效果

二、祝福语闪烁效果制作

在效果预览中，“happy national day”这句祝福语是会一闪一闪的，那么这个效果又该如何实现呢？原理其实就是利用文字透明度的重复变化，实现闪烁的效果。

第一步：切换到“主时间线”，选中文本，点击“录制”动画按钮，在00:00:00秒处，切换到“元素检查器”，设置文本的不透明度为75%，然后间隔8毫秒，即时间线移动到00:00:08秒处，调整文本的不透明度为100%，再间隔8毫米，时间线移动到00:00:16秒，调整文本的不透明度为75%，这样就实现了一个闪一下亮一下再暗一下的闪烁效果了。

图8：文本动画时间线

第二步：同样的，移动时间线到00:00:24，重复上述步骤，再录制一个相同的动画，此时的时间线动画展示如下图9，这样是为了实现在1.1秒内文字闪现2次，然后接下来1秒停止闪烁的效果。

图9：文本动画时间线

第三步：移动时间线到00:02:15秒处，然后点击下方图10红框的小加号，添加一个关键帧，时间线操作选择“开始时间线”，时间线选择“主时间线”，这样就完成了文字重复闪烁的动画效果了。

图10：添加关键帧

到这里为止，本节就结束了，在本节中，小编带大家学习了如何制作心形图形上浮的动画和文字闪烁的动画，在下一节中，将主要带大家学习实现心形动态沿着Love轨迹移动的效果，请大家继续关注城东书院网站进行后续学习哦。