实例：使用Hype制作表单提交按钮动画效果（二）

本文是使用Hype制作表单提交按钮动画效果教程的第二章节，主要介绍如何结合已经制作好的场景完成动画效果的制作，本文将该动画效果拆分为三部分进行讲解。先行声明，本教程是在Mac系统的基础上，使用Hype 4版本进行演示及讲解。

一、第一部分动画制作

首先，使用第一章节制作好的场景，移动时间线到00:00:00处，在Hype右侧的“元素检查器”中，设置“success文本”、“打勾图像”、“刷新图像”的不透明度为0，如下图1所示。

图1：设置红框内元素不透明度为0

此时，在0分0秒时，场景页面如下图2所示。

图2：最开始时场景

第二步：移动时间线到00:00:15秒处，点击“录制”按钮，开始录制动画，然后再次移动时间线到00:00：26秒处，在“元素检查器”中设置“submit文本”和“箭头图像”的不透明度为0；同时按照图3箭头所示方向，移动“箭头图像”和“椭圆形”元素的位置。

图3：移动图像和元素位置

第三步： 在“度量检查器”中，将原本“圆角矩形”的左边位置从154px改为255px，然后宽度从251px改为49px，如下图4红框所示。

图4：修改圆角矩形的位置和宽度

第四步：以上三步完成以后，关闭“录制”按钮，然后移动时间线到00:00:23秒处，再次点击“录制”按钮，再移动时间线到00:00:26秒处，在“元素检查器”中设置“刷新图像”的不透明度为87，这样第一部分的动画就制作完成了，效果如下图5所示。

图5：第一部分效果预览

二、第二部分动画制作

第一步：移动时间线到00:00:15秒处，然后点击“录制”按钮，再移动时间线到00:02:07秒处，在“度量检查器”中设置“刷新图像”的Z轴旋转角度为721度，如下图6所示。

图6：制作刷新图像旋转动画

第二步：移动时间线到00:01:21秒处，点击“录制”按钮，再移动时间线到00:02:04处，在“元素检查器”中设置“圆角矩形”和“椭圆形”的填充背景颜色为绿色，如下图7所示。

图7：设置填充背景颜色为绿色

第三步：移动时间线到00:01:28秒处，点击“录制”按钮，再移动时间线到00:02:07秒处，在“元素检查器”中设置“刷新图像”的不透明度为0；然后移动时间线到00:02:10秒处，在“元素检查器”中设置“打勾图像”的不透明度为100。这样就完成了第二部分的动画制作，具体效果预览如下图8所示。

图8：第二部分动画效果预览

三、第三部分动画制作

第一步：移动时间线到00:03:00秒处，点击“录制”按钮，然后再移动时间线到00:03:10处，按照下图9红色箭头的方向，移动“打勾图像”和“椭圆形”元素的位置。

图9：移动打勾图像和椭圆形元素

第二步： 在“度量检查器”中，将原本“圆角矩形”的左边位置从255px改为154px，然后宽度从49px改为251px，如下图10红框所示。

图10：调整圆角矩形宽度和位置

第三步：移动时间线到00:03:20处，在“元素检查器”中设置“success文本”的不透明度为100。这样就完成了第三部分动画的制作，下面是第三部分动画的预览效果。

图11：第三部分效果预览

好了，这样就完成了表单提交按钮动画效果的制作，下面还有更多有趣有用的Hype教程发布在城东书院网站上，欢迎大家前往关注！