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

Hype 4 Pro for Mac(HTML5动画制作软件) v4.1.14中文激活版

如何创建令人惊叹的动画和交互式web？Hype 4 Pro for Mac让您创建令人惊叹的动画和交互式web内容。它被主要设计师用来创建动画，为网页、信息图形、演示文稿、数字杂志、广告、iBooks、教育内容、应用程序原型、作品集、动画gif、视频、整个网站等等添加“哇”的元素。快来下载体验吧！

大小：16.58 MB时间：2023.09.20

Hype 4 Pro for Mac让您创建令人惊叹的动画和交互式web内容。那么如何利用Hype制作3秒后出现下一步的页面？详细教程如下：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、设置关键帧过渡效果

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

三、小结

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