实例：使用Hype制作浪漫表白网站（二）

在上一节中，小编带大家学习了如何制作浪漫表白网站的静态页面，但是光有一动不动的场景却没有实实在在打动人心的动态效果，是会大大降低表白成功率的。

因此在本节中小编将使用上述场景，制作一些更为吸引人的效果，包括心形按钮模仿心脏扑通扑通的跳动效果、点击按钮弹出表白框的动态效果，而在第三节中，还会有烟花绚丽爆炸的场景效果，请小伙伴们耐心往下观看和学习吧！

一、制作心脏跳动效果

第一步：在Hype时间线操作上，除了默认的主时间线以外，再点击创建一条新的时间线，并重命名为“心脏跳动”，如下图1所示。然后切换到“心脏跳动”这条新时间线，拖动鼠标同时选中2个心脏按钮图片。

图1：创建“心脏跳动”时间线

第二步：点击时间线上的“录制”动画按钮，移动时间线到00:00:13秒处， 如下图2。

图2：录制动画

在“度量检查器”中，勾选上缩放项中的“限制比”,锁定等比缩放，然后设置宽度为110%，此时高度会同比变为110%，然后取消录制按钮的点击即可，具体如下图3。

图3：修改宽度和高度

当然，心脏的跳动是扑通扑通收缩循环跳动的，仅仅制作心脏放大的动画是不行的。Hype软件贴心地为我们提供了时间线的循环播放功能，利用此功能，就能实现时间线的循环播放，由此实现心脏一下放大一下缩小并重复循环的动画效果。

移动时间线到00:00:14秒处，然后点击时间线操作右侧的小加号按钮，选择时间线操作为“开始时间线”，时间线选择“心脏跳动”时间线。

图4：开始时间线

此时的心脏跳动时间线的动画如下图5红框所示。

图5：心脏跳动时间线动画

大家在这里先预览一下GIF效果吧，心脏跳动的快慢可以根据时间线的长度适当调节。

图6：GIF效果预览

二、表白弹框效果制作

第一步：首先对左侧的主页场景，鼠标右键点击它，选择“复制场景”，复制多一个场景，然后给场景命名为“场景1”。

图7：复制主页场景

第二步：在场景1中，设置场景页面如下图8所示，即给场景1加上一层薄薄的黑色蒙版，然后加上一个“明人不说暗话”的确定框。

图8：场景1页面

想要设置以上的效果，首先，需要在元素按钮中，加入一个矩形，然后在“元素检查器”中，设置矩形的背景颜色为黑色，宽度和高度都设置为100%，以保证覆盖整个场景页面，然后设置不透明度为41%，具体设置如下图9。

图9：加入黑色蒙版设置

然后，在元素按钮中，加入2个圆角矩形，并命名为矩形1和矩形2，然后对矩形1，在“元素检查器”中，设置矩形背景颜色为白色，并加入文字“明人不说暗话！”，在矩形2中，设置背景颜色为粉红色，并加入文字“确定”，并在“排印检查器”中，设置文字大小为24px，文字对齐为第二项，居中对齐，如下图10，这样就完成了上图8中的场景页面设置。

此时要确保不透明蒙版是位于这两个圆角矩形的下方，如果不是，请右键点击蒙版，然后选择“下移一层”。

图10：设置文本格式

第三步：回到主页场景，然后点击“不愿意”图标按钮，在“操作检查器”中，设置鼠标点按时，操作“跳到场景”，场景选择“场景1”，过滤选择“即时”，如下图11。

图11： 设置点按时跳到场景1

这样就完成了点击不愿意按钮时，弹出表白弹框的动画效果制作了，具体小编制作的预览效果如下GIF图12所示，上述只简单说了一个“明人不说暗话”的场景，其他的表白场景大家只需要重复上述操作发挥即可。

图12：GIF效果预览

这里有小伙伴们肯定会问，不愿意按钮出来表白弹框，那么愿意按钮出来的是啥呢？那就涉及到小编下一节教程的内容了，在下一节中，小编将带大家学习如何点击愿意图标按钮，出来一个简单的烟花爆炸场景，请大家继续关注城东书院网站进行后续学习哦。