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

时间：02-01来源：作者：点击数：

在上一小节《实例：使用Hype制作点赞和取消点赞的网页动画（一）》中，小编讲解了如何使用Mac系统HTML5制作软件Hype，制作一个静态的网页场景，该场景可用于制作点赞和取消点赞的网页动画，下面小编就利用Hype 4版本，继续教大家如何利用此场景制作点赞的网页动画效果，请大家跟随小编的步伐一起往下看吧！

一、添加新时间线

首先，除了主时间线以外，还需要再创建3个时间线，如下图1所示。其中一个时间线用于制作点赞后的动画效果，另一个时间线用于制作取消点赞后的动画效果，最后一个时间线用于制作随着点赞和取消点赞事件的发生，点赞数的数字变化效果。

图1：时间线展示

点击图1的“新时间线”按钮，创建时间线，为该时间线填写一个时间线名称，然后点击“创建”，重复三次，创建上述所说的三条时间线，并分别命名为“爱心点击后”、“取消爱心”和“数字变化”。

图2：创建新时间线

二、点赞动画制作

第一步：时间线创建完成以后，下面开始点赞动画的制作，切换时间线为“爱心点击后”时间线，如下图3所示。

图3：切换时间线

第二步：点击“爱心灰色”图像，然后在Hype检查器的“操作”选项卡中，设置鼠标点按时，添加一个操作，操作选择“开始时间线”，时间线选择“爱心点击后”，然后再添加一个操作，操作选择“开始时间线”，时间线选择“数字变化”，具体如下图4。此项操作，是为了当鼠标点击爱心图像时，执行点赞的动画效果（点赞按钮由灰变红，同时按钮飘动向上），同时修改点赞总数。

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

第三步：在0秒的时候，点击录制按钮，如下图5，下面开始录制点赞动画。在Hype检查器的“元素”选项卡中，设置“爱心灰色”图像不透明度为100，“爱心-已赞飘动”图像不透明度为0。

图5：点击录制按钮

第四步：拖动时间线到00:00:07秒，然后点击“爱心灰色”图像，在Hype检查器“元素”选项卡中，设置该图像的不透明度为0，如下图6。这样该图像就设置好了不透明度从100到0的动画，点击点赞按钮后，该灰色爱心图像会慢慢消失不见。

图6：设置灰色爱心图像的不透明度动画

第五步：将时间线移到1秒处，然后点击“爱心-已赞飘动”图像，设置该图像的不透明度为100，然后设置该图像的运动路径，运动路径大家可以设置为自己想要的路径，拖动路径即可修改路径，小编设置的路径如下图7左侧红框所示。完成该动画设置以后，点击灰色爱心进行点赞以后，灰色爱心会逐渐消失，红色爱心会沿着设定好的运动路径缓缓出现。