如何在Hype制作3秒后出现下一步的页面（动画制作）

在《如何在Hype制作3秒后出现下一步的页面（场景设置）》一文中，我们已经详细讲解了倒计时按钮的制作以及下一步触发动作的设置。

本节中，我们会继续使用Hype完成倒计时按钮的动画制作，其效果如图1所示，可以看到，下一步按钮是在“3s”、“2s”、“1s”按钮倒计时完成后才出现的，单击下一步按钮才能触发跳转下一场景的动画。

一、制作不同按钮的动画效果

我们先来看一下之前创建的场景，接下来，分别进行“3s”、“2s”、“1s”按钮倒计时的动画制作。

图2：场景

1、制作“3s”按钮的动画效果

“3s”按钮是最早出现的，过了1秒后会消失，继而出现“2s”按钮。按照以上逻辑，我们需要依次进行以下操作：

1.开启Hype的自动记录功能

2.在时间线面板选择3s按钮

3.在0秒处添加3s按钮的不透明度关键帧

4.在元素检查器中将3s按钮的不透明度设为100%

图3：0秒处设置不透明度为100%

5. 选中3s按钮基础上，将时间线的指针移动到1秒处

6. 在1秒处添加3s按钮的不透明度关键帧

7. 在元素检查器中将3s按钮的不透明度设为0

以上就完成了3s按钮动画的制作。

图4：1秒处设置不透明度为0

2、制作“2s”按钮的动画效果

接着，进行2s按钮的动画制作，其制作逻辑是，2s秒最开始是隐藏的，随着3s按钮隐藏后出现，但过了1秒后会再次隐藏。

按照以上逻辑，操作如下：

1.开启Hype的自动记录功能

2.在时间线面板选择2s按钮

3.在0秒处添加2s按钮的不透明度关键帧

4.在元素检查器中将2s按钮的不透明度设为0%

图5：0秒处设置不透明度为0

5. 选中2s按钮基础上，将时间线的指针移动到1秒处

6. 在1秒处添加2s按钮的不透明度关键帧

7. 在元素检查器中将2s按钮的不透明度设为100%

图6：1秒处设置不透明度为100%

8. 选中2s按钮基础上，将时间线的指针移动到2秒处

9. 在2秒处添加2s按钮的不透明度关键帧

10. 在元素检查器中将2s按钮的不透明度设为0%

以上就完成了2s按钮动画的制作。

图7：2秒处设置不透明度为100%

3、制作“1s”按钮的动画效果

接着，进行1s按钮的动画制作，其制作逻辑是，1s秒在1-2秒是隐藏的，随着2s按钮隐藏后出现，但过了1秒后会再次隐藏。

按照以上逻辑，操作如下：

1.开启Hype的自动记录功能

2.在时间线面板选择1s按钮

3.在0秒处添加1s按钮的不透明度关键帧

4.在元素检查器中将1s按钮的不透明度设为0%

图8：0秒处设置不透明度为0

5. 选中1s按钮基础上，将时间线的指针移动到2秒处

6. 在2秒处添加1s按钮的不透明度关键帧

7. 在元素检查器中将1s按钮的不透明度设为100%

图9：2秒处设置不透明度为100%

8. 选中1s按钮基础上，将时间线的指针移动到3秒处

9. 在3秒处添加1s按钮的不透明度关键帧

10. 在元素检查器中将1s按钮的不透明度设为0%

以上就完成了1s按钮动画的制作。

图10：3秒处设置不透明度为0

4、制作“下一步”按钮的动画效果

最后，制作下一步按钮的动画效果，其制作逻辑是，下一步按钮从1-3秒间都是隐藏的，过了3秒后才会出现。

按照以上逻辑，操作如下：

1.开启Hype的自动记录功能

2.在时间线面板选择下一步按钮

3.在0秒处添加下一步按钮的不透明度关键帧

4.在元素检查器中将下一步按钮的不透明度设为0%

图11：0秒处设置不透明度为0

5. 选中下一步按钮基础上，将时间线的指针移动到3秒处

6. 在3秒处添加下一步按钮的不透明度关键帧

7. 在元素检查器中将下一步按钮的不透明度设为100%

图12：3秒处设置不透明度为100%

二、设置关键帧过渡效果

完成以上操作后，如图13所示，选中添加的关键帧，单击关键帧面板右侧的过渡方式选项，在其弹出的选项面板中选择“即时”的过渡方式，让按钮的切换显得更加利落。

图13：即时过渡

三、小结

综上所述，通过使用Hype的不透明度关键帧功能，可以设置元素在不同时间点呈现隐藏或可见的状态，该效果适用于场景内同一位置的元素动态变化。