实例：使用Hype制作交互菜单动画（二）

上一章节中，小编利用Hype 4版本，教大家制作交互菜单的静态场景页面，而在本章节中，小编将带来交互菜单按钮上的三道横杠变为叉号的动画以及点击菜单按钮后，弹性弹出子菜单按钮的具体教程，感兴趣的小伙伴们就跟着小编的步伐继续往下看吧！

一、横杠变为叉号动画效果制作

先跟小编来看制作好的动画效果，效果预览如下图1所示，主菜单按钮上的三条横杠变为了叉号。

图1：动画效果预览

其实这个动画效果很简单，主要设置分为3个阶段，具体操作步骤如下图2所示。首先，第一阶段，点击“录制”按钮，移动时间线到00:00:09秒，然后移动上、下两个矩形到中矩形所在位置。第二阶段，再次移动时间线到00:00:15秒位置，设置上、下两个矩形的旋转角度为45度。

图2：动画效果分阶段展示

旋转角度设置如下图3所示，在Hype右侧“度量检查器”中，设置上、下两个矩形的Z轴旋转角度为45度即可。

图3：设置旋转角度

第三阶段，点击“中”矩形，移动时间线到00:00:07秒处，点击“录制”按钮，开始录制中矩形的动画，然后再移动时间线到00:00:08秒处，在Hype右侧的“元素检查器”中，设置该矩形的不透明度为0，如下图4所示即可。

图4：设置中矩形不透明度为0

二、添加时间线

在第一章节中，使用主时间线创建了一个静态场景页面，但是想要完成动画效果的制作，一条时间线是不够的，下面，还需要再创建两条时间线，具体如下图1所示。

图5：添加新时间线

点击上图1中的“新时间线”按钮，创建一条新的时间线，并命名为“按下”，使用同样的操作，再创建另一条新时间线，命名为“返回”。两条时间线分别用于点击主菜单按钮弹出子菜单的动画以及再次点击主菜单按钮，收回子菜单的动画制作。

三、添加子菜单动画效果

第一步：切换到“按下”时间线，然后点击右侧的“录制”按钮，开始录制动画，移动时间线到00:00:18秒处，点击其中一张图像素材，然后鼠标拖动该图像素材，移动到需要弹出的位置即可，具体操作如下图2所示。

图6：录制子菜单图像素材动画

第二步：上述是对一个图像素材录制动画，接下来还需要按照第一步的操作步骤，对第二个、第三个图像素材录制动画。不同的是，第一个素材的录制动画时间为00:00:00-00:00:18，而第二个素材的录制动画时间为00:00:03-00:00:22，第三个素材的录制动画时间为00:00:05-00:00:25，具体如下图3红框所示。

图7：三个图像子菜单的录制动画时间

这样设置以后，点击主菜单按钮，会先弹出第一个子菜单，在第一个子菜单弹出的过程中，第二个子菜单会紧跟着弹出，最后是第三个子菜单，效果如下图4所示。

图8：子菜单效果展示

四、添加弹性效果

这样设置以后，点击主菜单按钮，会先弹出第一个子菜单，在第一个子菜单弹出的过程中，第二个子菜单会紧跟着弹出，最后是第三个子菜单。

完成子菜单的弹出动画以后，还需要对三个子菜单素材的位移动画添加弹性效果，使得弹出动画不那么生硬。在属性右侧的“渐入渐出”中，选择设置为“弹性”，如下图5所示即可。

图9：设置弹性效果

完成以后，本节关于子菜单弹出的动画效果就制作完了，效果如下图6所示。

图10：设置弹性效果

在下一节中，小编将带大家学习制作本教程最后的动画效果，即主菜单收回子菜单的动画效果，请大家继续关注城东书院网站进行后续学习哦。