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

上一章节中，小编利用Hype 4版本，教大家制作交互菜单弹出子菜单的动画效果，在本章节中，小编将继续带来点击交互菜单，母菜单收回子菜单的动画教程，欢迎小伙伴们继续学习。

收回子菜单动画制作

第一步：点击“元素”按钮，添加两个Button按钮，并分别命名为Button和Button2，如下图1所示。

图1：添加两个新按钮

第二步：鼠标移动Button按钮到主菜单按钮的位置，然后移动Button2按钮在主菜单按钮的正下方，然后在Hype右侧的“元素检查器”中，设置两个按钮的不透明度为0。

第三步：切换时间线为“返回”时间线，然后点击“录制”按钮，移动时间线到00:00:26秒，然后鼠标上移Button2的位置到主菜单按钮的位置，右移Button按钮的位置到主菜单按钮的右侧，具体如下图2所示。

图2：设置按钮动画

第四步： 点击Button按钮，在Hype右侧的“操作检查器”中，设置“鼠标点按时”，增加一个操作，操作选择“开始时间线”，时间线选择“按下”；然后再添加一个操作，操作选择“开始时间线”，时间线选择“返回”，如下图3。

图3：设置Button鼠标点按时操作

第五步： 点击Button2按钮，在Hype右侧的“操作检查器”中，设置“鼠标点按时”，增加一个操作，操作选择“开始时间线”，时间线选择“返回”，然后勾选上“倒序播放”，如下图4。

图4：设置Button2鼠标点按时操作

完成以后，所有的动画效果就制作完成了，该动画的原理是：点击主菜单按钮后，实际是点击了Button按钮，触发“按下”时间线的动画效果，弹出子菜单，同时触发“返回”时间线的动画效果，将Button按钮右移，Button2按钮上移到主菜单按钮位置。再次点击主菜单按钮时，实际上点击的是Button2按钮，倒叙触发“返回时间线”的动画效果，将子菜单收回。

小伙伴们跟着小编的教程操作一遍，完成了这一个动画效果，是不是有满满的成就感呢？还有更多有趣好玩的Hype 4教程发布在城东书院网站上哦，欢迎大家持续关注了解！