实例：使用Hype制作点赞和取消点赞的网页动画（一）

Hype是一款用于Mac系统的HTML5创作软件，能够通过零代码的形式，辅助非专业人员制作好看的精美网页，并进行了网页端和手机端不同大小页面的适配。

下面小编就利用Hype 4版本，教大家如何制作点赞和取消点赞的网页动画效果，本文是第一章节，主要讲解的是该网页的静态场景页面的制作，下一章节则开始进行动画制作的讲解。

一、效果预览

首先，在教程开始前，先对完成后的效果进行预览，对整个效果有个大概的了解，方便后面进行动画的制作。

点击Hype界面上方的“预览”按钮，打开默认浏览器进行效果预览，如下图1。

预览的效果如下图2所示，可以看到，页面默认的点赞数是502，同时点赞的心形按钮是灰色的。点击心形按钮点赞后，心形按钮从灰色变为橙红色，同时点赞数从502变为503，如下图3红框。当然，还有取消点赞的功能，再次点击心形按钮，点赞数就会从503变为502，点赞按钮也会重新变为灰色，就和抖音的点赞功能大同小异。

二、静态场景制作

第一步：点击Hype菜单栏的“场景”菜单，选择“新场景”，为当前Hype项目创建一个新场景。然后在右侧检查器中，切换到“场景”选项卡，设置当前场景大小为“预设大小”，宽度为320px，高度为568px。缩放比例都为100%，如下图4所示。

图2：创建指定场景及大小

第二步：创建好场景以后，需要在场景中加入元素，想要达到上述预览的效果，大家需要在场景中添加10个元素，如下图5红框所示。

图3：添加元素

前2个元素是点赞数502和503，通过点击Hype界面上方的“元素”按钮，然后点击“文本”，创建2个文本元素，输入502和503，然后移动到图5点赞数指定位置即可。

然后，主要就是导入图像元素，从图5红框可以看出，除了2个文本元素以外，其他的必须元素都是图像元素。点击界面上方“元素”按钮，再点击图像按钮，一次性选中所有要用到的图像，点击“打开”，导入到Hype场景中，如下图6。

图4：导入图像文件

其中主要的图像元素素材文件，包括一个LOL的图片素材、一个灰色的心形图案、一个橙红色的心形图案、一个左边的心形图案和一个右边的心形图案，部分素材如下图7。

图5：部分心形图案素材展示

导入图像素材以后，使用鼠标拖动图像素材，将图像素材按照上图5的效果摆放好，如果涉及到图片层级问题，可通过鼠标右键点击“上移一层”、“下移一层”按钮进行解决，完成以后，本节的场景设置就算完成了，在下一节《实例：使用Hype制作点赞和取消点赞的网页动画（二）》中，小编将带大家学习如何使用该场景，制作点赞的动画效果，请大家继续关注城东书院网站进行后续学习哦。