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

在上一节中，小编讲解了如何在Hype中制作点赞动画效果，本节也是该主题的最后一节，主要讲解如何制作在点赞以后，取消点赞，爱心破碎的动画效果以及点赞后点赞数的变化效果。本教程中，小编使用的是Hype 4版本进行演示讲解。

一、点赞数变化效果制作

点赞以后，点赞数要从502变为503，要制作该变化效果，其实原理很简单。

首先，要确保一开始0秒的时候，502文本的不透明度为100,503文本的不透明度为0。然后移动时间线到00:00:10，点击“录制”按钮，开始录制动画，再移动时间线到00:00:11秒处，在元素检查器中，设置502文本的不透明度为0,503文本的不透明度为100，具体如下图1所示。

图1：设置点赞数文本动画效果

这样就完成了点赞数从502到503间变化的动画效果了，下面开始进行取消点赞动画效果的制作讲解。

二、取消点赞动画效果制作

第一步:切换时间线为“取消爱心”时间线，然后点击录制按钮，开始录制动画，点击“爱心灰色”图像，设置该图像的不透明度变化动画，该动画主要分3段。第一段设置不透明度从100变为0，第二段保持不变，第三段设置不透明度从0变为100，如下图2所示。

图2：设置灰色爱心不透明度动画

第二步：点击“右边”破碎的心图像，为该图像设置动画，该图像动画需要设置不透明度、旋转角度和运动路径。首先按照如下图3所示，在元素检查器中设置不透明度从0到100，开始的时间线为00:00:05秒，结束时间线为00:00:29秒，当然动画持续时长大家可以自己按照需求设定。

图3：设置右边破碎的心动画

第三步：设置旋转角度动画，在时间线00:00:10处，在“度量检查器”中，设置Z轴旋转角度为0度，然后在时间线00:00:22处，设置Z轴旋转角度为26度，如下图4所示。

图4：设置旋转动画

第四步：设置运动路径。从00:00:10秒处开始录制动画，在00:00:29处，拖动运动路径如上图3左侧红框所示，即完成了运动路径的动画设置，这样就完成了右边破碎心形图像动画的设置。

同理还需要设置左边破碎心形图像的动画，与右边唯一不同的地方在于旋转的Z轴角度，由26度变为-26度。这样就完成了取消点赞的动画效果制作，下面让我们来看看最终的效果吧！

图5：最终效果展示

好了，这就是小编整理的关于使用Hype制作点赞和取消点赞的网页动画效果的具体教程，之后还会有更多更有趣、有用的Hype教程发布在城东书院网站上，欢迎大家前往关注！